/* ============================================================ */
/*  variables.css                                               */
/*  Variables globales de diseño — tokens centralizados        */
/*                                                              */
/*  ÍNDICE                                                      */
/*  1. Paleta principal (azul marino institucional)            */
/*  2. Paleta secundaria (morado — cónyuge / vínculo)          */
/*  3. Estados semánticos                                       */
/*  4. Neutros                                                  */
/*  5. Espaciado / Forma                                        */
/*  6. Sombras                                                  */
/*  7. Tipografía                                               */
/*  8. Transiciones                                             */
/*  9. Colores utilitarios (clases de uso directo)             */
/*  10. Tokens de botones                                       */
/* ============================================================ */


/* ============================================================ */
/*  1–8. TOKENS DE DISEÑO EN :root                             */
/* ============================================================ */

:root {

    /* ── 1. Paleta principal (azul marino institucional) ── */
    --color-primary:          #374965;
    --color-primary-dark:     #2a3a52;
    --color-primary-light:    #435575;
    --color-primary-lighter:  #5a6d8f;
    --color-primary-bg:       #eef2f7;
    --color-primary-border:   #c8d5e3;
    --color-primary-bg-soft:  #e8f1ff;

    /* ── 2. Paleta secundaria (morado — cónyuge / vínculo) ── */
    --color-purple:           #7c6b9e;
    --color-purple-dark:      #5c3d6b;
    --color-purple-bg:        #f0ebf8;
    --color-purple-bg-soft:   #f5f0ff;
    --color-purple-border:    #d4bfec;
    --color-purple-line:      #9b87c0;

    /* ── 3. Estados semánticos ── */
    --color-success:          #28a745;
    --color-success-dark:     #1b742f;
    --color-danger:           #b83a35;
    --color-danger-dark:      #bc3535;
    --color-warning:          #ffeea4;
    --color-warning-dark:     #ecd798;
    --color-muted:            #6c757d;
    --color-muted-dark:       #3f4549;

    /* ── 4. Neutros ── */
    --color-white:            #ffffff;
    --color-border:           #e4e8ef;
    --color-border-soft:      #f0eef2;
    --color-border-inner:     #f4f2f4;
    --color-text-primary:     #374965;
    --color-text-secondary:   #7a848f;
    --color-bg-hover:         #f9f8fb;

    /* ── 5. Espaciado / Forma ── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 50%;

    /* ── 6. Sombras ── */
    --shadow-card:         0 6px 24px rgba(55, 73, 101, 0.10);
    --shadow-btn:          0 4px 15px rgba(102, 126, 234, 0.40);
    --shadow-btn-hover:    0 6px 20px rgba(102, 126, 234, 0.60);
    --shadow-motivo:       0 2px 8px  rgba(55, 73, 101, 0.08);
    --shadow-motivo-focus: 0 0 0 3px  rgba(55, 73, 101, 0.12);

    /* ── 7. Tipografía ── */
    --fs-xxs:  9px;
    --fs-xs:  10px;
    --fs-sm:  11px;
    --fs-md:  13px;
    --fs-base:14px;
    --fs-lg:  17px;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --ls-wide:   0.06em;
    --ls-wider:  0.07em;
    --ls-widest: 0.08em;

    /* ── 8. Transiciones ── */
    --transition-fast:   0.20s ease;
    --transition-normal: 0.30s ease;
    --transition-slow:   0.35s ease;

    /* ── 9. Colores utilitarios (raw — usados en clases helper) ── */

    /* Azul */
    --util-blue:            #435575;
    --util-blue-hover:      #2d384d;
    --util-blue-light:      #8ca2bd;

    /* Gris */
    --util-gray:            #808080;
    --util-gray-hover:      #616161;

    /* Rojo */
    --util-red:             #b60e27;
    --util-red-hover:       #7a0a1b;

    /* Amarillo */
    --util-yellow:          #e0c76d;

    /* Rosa / Pink */
    --util-pink:            #b88cb9;

    /* Negro */
    --util-black:           #48484c;
    --util-black-text:      #000000;

    /* Blanco */
    --util-white:           #ffffff;

    /* Texto semántico */
    --util-text-success:    #2ecc71;
    --util-text-danger:     #e74c3c;

    /* Estados leyenda — colores específicos de asesorías */
    --legend-asignada:      #76818d;
    --legend-asignada-dark: #5a6370;

    --legend-pendiente:     #ceaccd;
    --legend-pendiente-mid: #b890b7;
    --legend-pendiente-text:#9a6899;

    --legend-terminada:     #334d6d;
    --legend-terminada-dark:#1e3a5f;

    --legend-anomalia:      #edd797;
    --legend-anomalia-dark: #d4b86a;
    --legend-anomalia-text: #a07800;

    --legend-cancelada:     #800000;
    --legend-cancelada-dark:#5c0000;

    --legend-tecnico:       #d32f2f;
    --legend-tecnico-dark:  #a02323;


    /* ── 10. Tokens de botones ── */

    /* · Estandar (primary) */
    --btn-estandar-bg:          var(--color-primary);
    --btn-estandar-border:      var(--color-primary);
    --btn-estandar-color:       var(--color-white);
    --btn-estandar-bg-hover:    var(--color-primary-dark);
    --btn-estandar-border-hover:var(--color-primary-dark);

    /* · Secondary (gris) */
    --btn-secondary-bg:         var(--util-gray);
    --btn-secondary-border:     var(--util-gray);
    --btn-secondary-bg-hover:   var(--util-gray-hover);
    --btn-secondary-border-hover:var(--util-gray-hover);

    /* · Success — versión WHITE (outline) */
    --btn-success-white-color:      #2E7D32;
    --btn-success-white-border:     #2E7D32;
    --btn-success-white-bg-hover:   #2E7D32;

    /* · Success — versión FILLED */
    --btn-success-filled-bg:        #2E7D32;
    --btn-success-filled-border:    #2E7D32;
    --btn-success-filled-bg-hover:  #1b5e20;

    /* · Danger — versión WHITE (outline) */
    --btn-danger-white-color:       #D32F2F;
    --btn-danger-white-border:      #D32F2F;
    --btn-danger-white-bg-hover:    var(--util-red);

    /* · Danger — versión FILLED */
    --btn-danger-filled-bg-hover:   var(--util-red-hover);

    /* · Circle (azul marino) */
    --btn-circle-bg:            #30415b;
    --btn-circle-border:        #30415b;
    --btn-circle-bg-hover:      #384D6D;
}


/* ============================================================ */
/*  9. CLASES UTILITARIAS DE COLOR                             */
/*                                                              */
/*  Clases helper reutilizables en toda la aplicación.         */
/*  Referencian las variables :root para mantener consistencia. */
/* ============================================================ */

/* ── Fondos con borde ── */

.background-blue {
    background: var(--util-blue) !important;
    border: 1px solid var(--util-blue) !important;
}
.background-blue:hover {
    background: var(--util-blue-hover) !important;
    border: 1px solid var(--util-blue-hover) !important;
}
.background-blue.ui-state-focus,
.background-blue.ui-state-active {
    outline: 2px solid var(--util-blue) !important;
    outline-offset: 2px;
}

.background-red {
    background-color: var(--util-red) !important;
    border: 1px solid var(--util-red) !important;
}
.background-red:hover {
    background-color: var(--util-red-hover) !important;
    border: 1px solid var(--util-red-hover) !important;
}

.background-lightblue { background: var(--util-blue-light); }
.background-yellow    { background: var(--util-yellow);     }
.background-pink      { background: var(--util-pink);       }
.background-black     { background: var(--util-black);      }
.background-white     { background: var(--util-white);      }

/* ── Solo color de texto ── */

.text-blue       { color: var(--util-blue);         }
.text-lightblue  { color: var(--util-blue-light);   }
.text-gray       { color: var(--util-gray);          }
.text-yellow     { color: var(--util-yellow);        }
.text-pink       { color: var(--util-pink);          }
.text-black      { color: var(--util-black-text);    }
.text-white      { color: var(--util-white);         }

.text-success {
    color: var(--util-text-success);
    font-weight: bold;
}
.text-danger {
    color: var(--util-text-danger);
    font-weight: bold;
}