/* =====================================================================
   SYNERGY UNIMEX — tokens de marca
   ---------------------------------------------------------------------
   Se carga DESPUES de cuba/assets/css/color-synergy.css.

   Division de tareas, para no acabar con el color en dos lados:

     color-synergy.css  -> repinta el template entero (generado, no editar)
     este archivo       -> lo que el template no tiene: el degradado de la
                           marca, el navy del wordmark, y los componentes
                           propios (login, botones de marca).

   Los colores salen del logotipo: el recorrido azul -> teal -> verde que
   hace la flecha. Ese orden importa, es lo que da la sensacion de avance.
   ===================================================================== */

:root {
    /* --- Paleta de marca ------------------------------------------- */
    --syn-navy:       #12385C;  /* wordmark, titulos sobre claro        */
    --syn-navy-soft:  #1D4E7A;
    --syn-blue-dark:  #17568C;  /* hover de primario                    */
    --syn-blue:       #1F6FB5;  /* PRIMARIO. 5.3:1 con texto blanco     */
    --syn-blue-soft:  #3E93D6;  /* para fondos oscuros                  */
    --syn-teal:       #12A08F;  /* secundario / acento                  */
    --syn-teal-dark:  #0C7F72;
    --syn-green:      #57BB5C;  /* la flecha. Acento, NO texto          */
    --syn-green-dark: #3F9E52;

    /* --- Degradado de marca ---------------------------------------- */
    --syn-gradient:      linear-gradient(120deg, #1B5E9C 0%, #2278BE 38%, #12A08F 70%, #57BB5C 100%);
    --syn-gradient-soft: linear-gradient(120deg, rgba(31,111,181,.10) 0%, rgba(18,160,143,.10) 60%, rgba(87,187,92,.12) 100%);

    /* --- Tintes claros, para fondos de badge/tarjeta ---------------- */
    --syn-blue-tint:  rgba(31, 111, 181, .10);
    --syn-teal-tint:  rgba(18, 160, 143, .12);
    --syn-green-tint: rgba(87, 187, 92, .14);
}

/* ---------------------------------------------------------------------
   Bootstrap
   ---------------------------------------------------------------------
   El template repinta sus propias clases, pero los componentes NATIVOS de
   Bootstrap (checkboxes, radios, focus, .link-primary) leen --bs-primary
   y se quedaban azul #0d6efd, que no es nuestro azul. Se ven juntos en la
   misma pantalla y la diferencia se nota.
--------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary:            #1F6FB5;
    --bs-primary-rgb:        31, 111, 181;
    --bs-link-color:         #1F6FB5;
    --bs-link-color-rgb:     31, 111, 181;
    --bs-link-hover-color:   #17568C;
    --bs-link-hover-color-rgb: 23, 86, 140;
}

.form-check-input:checked {
    background-color: var(--syn-blue);
    border-color: var(--syn-blue);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--syn-blue-soft);
    box-shadow: 0 0 0 .2rem rgba(31, 111, 181, .18);
}

/* ---------------------------------------------------------------------
   Utilidades de marca
--------------------------------------------------------------------- */

.syn-gradient-bg   { background: var(--syn-gradient); }
.syn-gradient-soft { background: var(--syn-gradient-soft); }

/* Texto con el degradado. Necesita el fallback: si el navegador no
   soporta background-clip:text, sin color propio el texto se ve
   transparente, o sea invisible. */
.syn-gradient-text {
    color: var(--syn-blue);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .syn-gradient-text {
        background: var(--syn-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* Filete de marca: la linea de 3-4 px que corona tarjetas y paneles. */
.syn-gradient-bar {
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--syn-gradient);
}

.syn-navy      { color: var(--syn-navy) !important; }
.syn-teal      { color: var(--syn-teal) !important; }
.syn-green     { color: var(--syn-green-dark) !important; }

.syn-bg-navy   { background-color: var(--syn-navy) !important; color: #fff; }
.syn-bg-tint   { background-color: var(--syn-blue-tint) !important; }

/* Boton de marca. El degradado se mueve en hover en vez de cambiar de
   color: con un degradado, oscurecerlo entero lo apaga y se ve apagado,
   no "presionado". */
.btn-syn {
    --syn-btn-shift: 0%;
    border: 0;
    color: #fff;
    font-weight: 600;
    background: var(--syn-gradient);
    background-size: 160% 100%;
    background-position: var(--syn-btn-shift) 0;
    transition: background-position .35s ease, box-shadow .2s ease, transform .1s ease;
}
.btn-syn:hover,
.btn-syn:focus {
    --syn-btn-shift: 100%;
    color: #fff;
    box-shadow: 0 6px 18px rgba(31, 111, 181, .28);
}
.btn-syn:active { transform: translateY(1px); }
.btn-syn:disabled,
.btn-syn.disabled { opacity: .6; box-shadow: none; }

/* ---------------------------------------------------------------------
   Barra lateral y encabezado
--------------------------------------------------------------------- */

/* El logo del sidebar es un SVG con degradado propio: sobre el fondo
   claro del panel se lee bien y no necesita filtro. Solo se le da una
   altura estable para que no salte mientras carga. */
.logo-wrapper a img,
.logo-icon-wrapper a img {
    max-height: 40px;
    width: auto;
}

/* El item activo del menu: filete de marca a la izquierda en vez de solo
   cambiar el color del texto. A media pantalla de modulos, el color solo
   no alcanza para encontrar donde estas parado. */
.sidebar-wrapper .sidebar-main .sidebar-links > li.active > a,
.sidebar-wrapper .sidebar-main .sidebar-links > li > a.active {
    position: relative;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li.active > a::before,
.sidebar-wrapper .sidebar-main .sidebar-links > li > a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--syn-gradient);
}

/* ---------------------------------------------------------------------
   Tarjetas
--------------------------------------------------------------------- */

/* Las cabeceras .bg-primary de las tarjetas ya salen azules por el tema.
   Aqui solo se les pone el degradado, que es lo que las hace de marca y
   no "una tarjeta azul mas". */
.card-header.bg-primary {
    background: var(--syn-gradient) !important;
    border-bottom: 0;
}

.card.syn-card {
    border: 1px solid rgba(18, 56, 92, .08);
    border-radius: 14px;
    overflow: hidden;
}