/* ============================================================
   TEMA — Hotel Boutique Concordia
   ------------------------------------------------------------
   ESTE ES EL UNICO ARCHIVO QUE HAY QUE TOCAR PARA CAMBIAR LA
   IDENTIDAD VISUAL DE TODO EL SISTEMA (sitio publico + panel).

   Cambia los valores de aqui y el cambio se propaga solo.
   No pongas colores literales (#hex) en ningun otro archivo CSS.

   La paleta viene del logotipo: dos colibries sobre fondo negro
   dentro de un aro dorado. Colores de marca: verde, azul, dorado
   y rojo, sobre negro.
   ============================================================ */

:root {

    /* ========================================================
       BLOQUE 1 — COLORES DE MARCA
       Muestreados del archivo del logotipo
       (webroot/img/logo-concordia.jpg) pixel por pixel: de cada
       familia de tono se tomo el promedio y el punto mas vivo, y
       el valor de aqui queda entre los dos. Si llega el manual de
       marca con los valores oficiales, sustituirlos aqui.

       La variante --*-rgb son los mismos canales sueltos, para
       los degradados que necesitan transparencia:
       rgb(var(--marca-verde-rgb) / 0.2). Asi tampoco hay colores
       literales en sitio.css ni en panel.css.
       ======================================================== */

    /* Negro del logotipo. Es negro puro: el fondo del archivo
       mide 0,0,0, y las zonas de marca tienen que dar el mismo
       valor para que la imagen no se note como un rectangulo. */
    --marca-negro:        #000000;
    --marca-negro-suave:  #0E0E12;

    /* Dorado: el aro y la tipografia del logotipo */
    --marca-dorado:       #C9A961;
    --marca-dorado-rgb:   201 169 97;
    --marca-dorado-claro: #E0C88A;
    --marca-dorado-oscuro:#A3833F;

    /* Azul: ala del colibri izquierdo */
    --marca-azul:         #1E6FB8;
    --marca-azul-rgb:     30 111 184;
    --marca-azul-claro:   #4A93D4;
    --marca-azul-oscuro:  #10375A;

    /* Verde esmeralda: cuerpo del colibri izquierdo */
    --marca-verde:        #1E8F6E;
    --marca-verde-rgb:    30 143 110;
    --marca-verde-claro:  #3FBE9C;
    --marca-verde-oscuro: #0F7259;

    /* Rojo carmin: cuerpo del colibri derecho */
    --marca-rojo:         #CE3A54;
    --marca-rojo-rgb:     206 58 84;
    --marca-rojo-claro:   #E06378;
    --marca-rojo-oscuro:  #9C2740;

    /* Purpura: alas del colibri derecho y tramo bajo del aro.
       Uso ocasional. */
    --marca-purpura:      #93479B;
    --marca-purpura-rgb:  147 71 155;


    /* ========================================================
       BLOQUE 2 — USO EN LA INTERFAZ
       Aqui se decide QUE color de marca cumple CADA funcion.
       Cambiar una linea de aqui reasigna el rol sin tocar el
       resto del sistema.
       ======================================================== */

    /* Color primario: elementos interactivos, botones, enlaces,
       estados activos. Es el azul del logotipo. */
    --color-primario:        var(--marca-azul-oscuro);
    --color-primario-claro:  var(--marca-azul);
    --color-primario-oscuro: #0A2540;
    --color-primario-tenue:  #EBF1F7;

    /* Acento: filetes, subrayados, detalles. Solo detalles:
       el dorado nunca como fondo de areas grandes. */
    --color-acento:        var(--marca-dorado);
    --color-acento-claro:  var(--marca-dorado-claro);
    --color-acento-oscuro: var(--marca-dorado-oscuro);
    --color-acento-tenue:  #F7F1E4;

    /* Superficies de marca: portada, pantalla de acceso y barra
       del panel. Negro, como el logotipo. */
    --color-marca:       var(--marca-negro);
    --color-marca-suave: var(--marca-negro-suave);

    /* Fondos claros del area de trabajo */
    --color-fondo:        #FFFFFF;
    --color-superficie:   #FAF8F4;
    --color-superficie-2: #F2EEE7;
    --color-borde:        #E4DDD1;
    --color-borde-fuerte: #CFC5B4;

    /* Texto */
    --color-texto:           #17181C;
    --color-texto-suave:     #6B7079;
    --color-texto-tenue:     #9AA0A8;
    --color-texto-invertido: #FFFFFF;

    /* Estados. Los cuatro colores de la marca cubren justo lo
       que necesita el sistema: verde = presente / autorizado,
       rojo = falta / rechazado, dorado = pendiente / por revisar,
       azul = informativo. */
    --color-exito:             var(--marca-verde);
    --color-exito-tenue:       #E7F6F1;
    --color-advertencia:       var(--marca-dorado-oscuro);
    --color-advertencia-tenue: #F9F2E3;
    --color-error:             var(--marca-rojo);
    --color-error-tenue:       #FBEBEE;
    --color-info:              var(--marca-azul);
    --color-info-tenue:        #EBF3FA;


    /* ========================================================
       BLOQUE 3 — TIPOGRAFIA
       Titulo: serif con espaciado amplio, como el logotipo.
       Texto: sans, para que el panel sea legible y operativo.
       ======================================================== */
    --fuente-titulo: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --fuente-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --peso-normal: 400;
    --peso-medio:  500;
    --peso-fuerte: 600;

    --texto-xs:   0.75rem;
    --texto-sm:   0.8125rem;
    --texto-base: 0.9375rem;
    --texto-md:   1.0625rem;
    --texto-lg:   1.25rem;
    --texto-xl:   1.625rem;
    --texto-2xl:  2.25rem;
    --texto-3xl:  3.25rem;


    /* ========================================================
       BLOQUE 4 — ESPACIADO, BORDES, SOMBRAS, LAYOUT
       ======================================================== */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4rem;
    --esp-9: 6rem;

    --radio-sm:   3px;
    --radio-md:   5px;
    --radio-lg:   8px;
    --radio-full: 999px;

    --sombra-sm: 0 1px 2px rgba(11, 11, 14, 0.06);
    --sombra-md: 0 2px 8px rgba(11, 11, 14, 0.09);
    --sombra-lg: 0 8px 28px rgba(11, 11, 14, 0.14);

    --ancho-contenido: 1180px;
    --ancho-panel:     1400px;
    --alto-barra:      64px;
    --ancho-menu:      248px;

    --transicion: 160ms ease;
}