/**
 * Identidad visual — Skill Path (Piso Cinco)
 * ---------------------------------------------------------------------------
 * Estilos base y variables. La paleta de Tailwind vive en /js/marca.js; acá
 * están las mismas variables en CSS para lo que no pasa por Tailwind.
 */

:root {
    --marca-600: #0D3C74;
    --marca-700: #0B3260;
    --marca-100: #DFE9F4;
    --marca-50:  #F1F5FA;
    --enlace:    #1F7CEC;
    --tinta:     #112337;
    --acento:    #C02B0A;
    --gris-texto: #64748B;
    --gris-fondo: #F8FAFC;
    --borde:     #E2E8F0;
}

/* -------------------------------------------------------------------------
   Tipografía
   La marca usa Figtree. Se declara una única vez acá en lugar de repetir un
   `font-family` con !important en cada plantilla, como estaba antes.
   ------------------------------------------------------------------------- */
body {
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--gris-fondo);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

/* Los íconos necesitan su propia familia; sin esto heredan Figtree y no se ven */
i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.015em;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Marca denominativa
   Se usa hasta que haya un archivo de logo. Para poner el logo real, dejar la
   imagen en /static/img/logo.png: el encabezado la toma automáticamente.
   ------------------------------------------------------------------------- */
.logotipo {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.logotipo .primera { color: var(--marca-600); }
.logotipo .segunda { color: var(--enlace); font-weight: 400; }

/* Sobre fondo oscuro */
.encabezado-oscuro .logotipo .primera { color: #FFFFFF; }
.encabezado-oscuro .logotipo .segunda { color: #8DAED4; }

/* -------------------------------------------------------------------------
   Superficies
   Estética contenida: fondo claro, tarjetas blancas, un borde de 1px y sombra
   apenas perceptible. Sin degradados de color, que es lo que más envejecía la
   interfaz anterior.
   ------------------------------------------------------------------------- */
.tarjeta {
    background: #FFFFFF;
    border: 1px solid var(--borde);
    border-radius: .75rem;
    box-shadow: 0 1px 3px 0 rgb(17 35 55 / .06);
}

.tarjeta-interactiva {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tarjeta-interactiva:hover {
    border-color: var(--marca-300, #8DAED4);
    box-shadow: 0 4px 12px 0 rgb(17 35 55 / .08);
    transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Detalle técnico
   Una retícula muy tenue sobre las superficies oscuras. Es el único gesto
   "tecnológico" de la interfaz: se nota sin competir con el contenido.
   ------------------------------------------------------------------------- */
.reticula {
    background-color: var(--tinta);
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* -------------------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--enlace);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}