/*======= CLIENTCORE · COLORES DE MARCA =======*/
/*
 * ÚNICO archivo que se modifica para cambiar los colores de un sitio.
 * portal.tecreamos.cl     -> estos valores
 * portal.dominiohosting.cl -> copiar este archivo y cambiar los valores.
 * Ningún otro CSS debe usar colores fijos: siempre var(--...).
 * Si cambias un color que tiene versión "-rgb", cambia también su tripleta RGB.
 */

:root {
    /* --- MARCA PRINCIPAL  (lo primero que se cambia para otro sitio) --- */
    --brand-primary: #005548;  /* Color principal: precios, títulos de acento, bordes activos */
    --brand-primary-600: #007e69;  /* Botones y acciones */
    --brand-primary-650: #007663;  /* Contorno de foco (accesibilidad) */
    --brand-primary-700: #006b59;  /* Hover de botones */
    --brand-primary-800: #006351;  /* Hover oscuro */
    --brand-dark: #0b3028;  /* Títulos oscuros */
    --brand-dark-2: #244a40;  /* Texto oscuro secundario */
    --brand-ink: #122522;  /* Texto principal */
    --brand-ink-2: #102c29;  /* Texto principal (variante) */
    --brand-accent: #b5f000;  /* Acento lima */
    --brand-cta: #007663;  /* Botones "Activar plan" */
    --brand-cta-hover: #333333;  /* Botones "Activar plan" al pasar el mouse */
    --brand-menu-bg: #e8f7ef;  /* Fondo del menú de categorías de la tienda */

    /* Mismos colores en RGB, para transparencias: rgba(var(--x-rgb), .1) */
    --brand-primary-rgb: 0, 85, 72;  /* = brand-primary */
    --brand-primary-600-rgb: 0, 126, 105;  /* = brand-primary-600 */
    --brand-dark-rgb: 11, 48, 40;  /* = brand-dark */
    --brand-ink-rgb: 18, 37, 34;  /* = brand-ink */
    --brand-mint-rgb: 189, 232, 215;  /* Menta (#bde8d7), usado con transparencia */
    --neutral-white-rgb: 255, 255, 255;  /* = blanco */

    /* --- TONOS SUAVES DE MARCA --- */
    --brand-soft-1: #e7f6ef;  /* Fondo suave */
    --brand-soft-2: #e5f5ee;  /* Fondo de ayuda / tarjetas */
    --brand-soft-3: #e7f6f2;  /* Fondo suave (variante) */
    --brand-soft-4: #d5f0e8;  /* Texto claro sobre fondo oscuro */
    --brand-soft-5: #ceeee1;  /* Fondo seleccionado */
    --brand-soft-6: #c9e5d9;  /* Borde de ayuda */
    --brand-tint: #f7faf9;  /* Fondo muy claro */
    --brand-lime-soft: #f0f6e3;  /* Fondo opción seleccionada (lima) */
    --brand-lime-border: #c9daba;  /* Borde opción seleccionada (lima) */

    /* --- BORDES Y TEXTOS CON TINTE DE MARCA --- */
    --brand-border: #e3eae8;  /* Borde general de tarjetas */
    --brand-border-2: #dce5e2;
    --brand-border-3: #dce8e2;
    --brand-border-4: #dce8e3;
    --brand-border-5: #dce6e3;
    --brand-border-6: #cbdcd5;  /* Borde de campos */
    --brand-border-7: #8db9ad;  /* Borde hover */
    --brand-muted: #687578;  /* Texto secundario */
    --brand-muted-2: #71817d;
    --brand-muted-3: #677773;
    --brand-muted-4: #5f766e;
    --brand-muted-5: #82978e;
    --brand-muted-6: #485a59;
    --brand-muted-7: #486b60;

    /* --- ESTADOS: éxito, eliminar, error, aviso --- */
    --state-success: #16834a;  /* Éxito / ahorro */
    --state-success-2: #168c4c;
    --state-active-bg: #5cb85c;  /* Etiqueta "Activo" de servicios */
    --brand-stat-border: #5cb85c;  /* Borde de las tarjetas de resumen del inicio */
    --brand-icon-ink: #005548;  /* Símbolo de los íconos suaves de la página de inicio */
    --state-danger: #a43b36;  /* Eliminar */
    --state-danger-dark: #812b26;  /* Eliminar (hover) */
    --state-danger-ink: #6b2a26;  /* Texto sobre fondo de alerta */
    --state-danger-bg: #fdf5f4;  /* Fondo de alerta */
    --state-danger-border: #f0d4d2;  /* Borde de alerta */
    --state-error: #c62828;  /* Error de validación */
    --state-error-2: #b42318;
    --state-error-3: #c83a42;
    --state-warning-bg: #fff0d6;  /* Aviso: fondo */
    --state-warning-border: #f5cd89;  /* Aviso: borde */
    --state-warning-ink: #795a28;  /* Aviso: texto */
    --state-attention: #e8730c;  /* Atención (dominios por vencer): botón, número e ícono */
    --state-attention-bg: #fff4ea;  /* Atención: fondo */
    --state-attention-border: #f6c89c;  /* Atención: borde */
    --state-attention-ink: #9a4a05;  /* Atención: texto */

    /* --- NEUTROS (normalmente iguales en ambos sitios) --- */
    --neutral-white: #ffffff;  /* Blanco */
    --neutral-bg: #fafbfd;  /* Fondo de página */
    --neutral-bg-2: #f1f7fb;  /* Fondo tarjeta seleccionada */
    --neutral-bg-3: #e9edf1;
    --neutral-bg-4: #e2e5e9;
    --neutral-line: #e3e7eb;
    --neutral-line-2: #e9ecef;
    --neutral-line-3: #dfe4e7;
    --neutral-line-4: #c5cfd5;
    --neutral-line-5: #c9cfd4;
    --neutral-text: #88959b;
    --neutral-text-2: #657487;
    --neutral-text-3: #64748b;

    /* --- LISTAS DESPLEGABLES (todas las <select> de la plantilla) · V75 --- */
    /* Por defecto siguen los colores de marca; cámbialos aquí si quieres otros. */
    --select-option-hover-bg: var(--brand-soft-1);          /* Fondo de la opción al pasar el mouse */
    --select-option-hover-text: var(--brand-primary);       /* Texto de la opción al pasar el mouse */
    --select-option-selected-bg: var(--brand-primary);      /* Fondo de la opción elegida */
    --select-option-selected-text: var(--neutral-white);    /* Texto de la opción elegida */
    --select-border-focus: var(--brand-primary-600);        /* Borde de la lista al enfocarla */
}