/* ============================================================
   _tema.css — FNN.Monitor
   Fichero ÚNICO de tokens de diseño (docs/CONVENIOS.md).
   Mismos tokens que FNN.Public (misma identidad Figma "Nadar es
   vida"), con overrides de "modo piscina" (alto contraste, mobile
   -first, elementos táctiles ≥44px) descritos al final del fichero,
   tal como pide docs/ESTRUCTURA_SOLUCION.md para FNN.Monitor.

   Los tokens de color de este fichero son oficiales del proyecto y
   están sincronizados con FNN.Public (2026-07-01): son la misma
   fuente de verdad del sistema de diseño, no una copia pendiente de
   validar por separado (ver docs/DESIGN_SYSTEM.md). Los tokens de
   layout específicos de Monitor (--ancho-contenido más estrecho,
   --sombra-dropdown/-modal, --ancho-minimo-touch, --transicion-normal)
   NO se han tocado: son decisiones ya documentadas para esta app
   (mobile-first, objetivo táctil obligatorio), no colores a corregir.
   --color-categoria-infantiles sigue [ESTIMADO] (sin pantalla propia
   en ninguna referencia disponible todavía). Esta pasada NO toca
   ninguna vista de Monitor.
   ============================================================ */

@font-face {
    font-family: 'Rules';
    src: url('/fonts/Rules-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rules';
    src: url('/fonts/Rules-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 'Cactus Jack' no se declara aquí: solo se usa en el diploma PDF
   generado en servidor (QuestPDF). Ver guía de componentes. */

:root {
    color-scheme: light;

    /* --- Colores principales --- */
    --color-primario:          #BBF4FF;
    --color-primario-oscuro:   #7DCBE3;   /* [ESTIMADO] ninguna referencia disponible muestra el estado hover/active */
    --color-primario-claro:    #E6F7FC;   /* [ESTIMADO] */
    --color-sobre-primario:    #10202B;

    --color-acento:            #0C8F7A;
    --color-acento-oscuro:     #086b5c;
    --color-sobre-acento:      #ffffff;

    --color-peligro:           #A33B2F;
    --color-peligro-fondo:     #F6E5E2;
    --color-aviso:             #9A6400;
    --color-aviso-fondo:       #FCEFD6;
    --color-exito:             #1F8A58;
    --color-exito-fondo:       #E1F2E8;
    --color-info:              #0067B1;
    --color-neutro-fondo:      #EFF1F3;
    --color-sobre-oscuro:      #FFFFFF;
    --anillo-foco:             0 0 0 3px rgba(125, 203, 227, 0.45);
    --color-fondo-translucido: rgba(253, 248, 243, 0.94);

    /* --- Neutros --- */
    --color-fondo:             #FDF8F3;
    --color-superficie:        #FFFFFF;
    --color-superficie-fondo:  #FDF8F3;
    --color-superficie-suave:  #F3EFE6;   /* [ESTIMADO] */
    --color-borde:             #1A1A1A;
    --color-borde-suave:       #E4D9C7;
    --color-texto:             #171717;
    --color-texto-suave:       #5D6678;
    --color-texto-muy-suave:   #9AA0AC;

    /* --- Colores por PISCINA --- */
    --color-piscina-azul:       #DBE1F9;
    --color-piscina-verde:      #E5FBD6;
    --color-piscina-naranja:    #FEECD6;
    --color-piscina-amarillo:   #F7E9A8;
    --color-piscina-rosa:       #F7DDE8;
    --color-piscina-violeta:    #E8DDF7;
    --color-piscina-turquesa:   #D8F3EC;
    --color-piscina-celeste:    #DDF4FA;
    --color-piscina-salmon:     #F8DDD6;
    --color-piscina-lima:       #EEF7C8;
    --color-piscina-naranja-intenso: #FFE1BB;

    /* --- Colores por CATEGORÍA de curso --- */
    --color-categoria-adultos:      #FFE1BB;
    --color-categoria-adultos-suave: #FEECD6;
    --color-categoria-infantiles:   #7FB8D9;   /* [ESTIMADO] sin pantalla propia todavía */
    --color-categoria-infantiles-suave: #DCEEF6; /* [ESTIMADO] */
    --color-categoria-escolar:      #EFD03A;
    --color-categoria-escolar-suave: #F5E396;

    /* --- Colores por FASE de evaluación ---
       Pantalla "Campaña escolar > Evaluación": mismo orden que en
       Items objetivos y actitudinal.docx. */
    --color-fase-1-adaptacion:      #CB671E;
    --color-fase-2-descubrimiento:  #6BAF40;
    --color-fase-3-confianza:       #1E8DCC;
    --color-fase-4-autonomia:       #B862A2;
    --color-fase-5-dominio:         #E34343;
    --color-fase-6-tecnica:         #704895;
    --color-fase-7-competicion:     #EFD03A;  /* amarillo de fase, deliberadamente más intenso que la paleta pastel de piscinas */
    --color-sobre-fase:             #FFFFFF;

    /* --- Tipografía --- */
    --fuente-principal:        'Rules', system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-mono:              'SFMono-Regular', Consolas, monospace;
    --tamano-base:              16px;
    --tamano-sm:                13px;
    --tamano-lg:                18px;
    --tamano-xl:                22px;
    --tamano-titulo:            32px;
    --tamano-titulo-lg:         clamp(2rem, 5vw, 3rem);
    --peso-normal:              400;
    --peso-bold:                700;
    --altura-linea:             1.5;

    /* --- Espaciado --- */
    --espaciado-xs:             4px;
    --espaciado-sm:             8px;
    --espaciado-md:             16px;
    --espaciado-lg:             24px;
    --espaciado-xl:             32px;
    --espaciado-xxl:            48px;

    /* --- Bordes --- */
    --radio-sm:                 4px;
    --radio-md:                 8px;
    --radio-lg:                 14px;
    --radio-pastilla:           8px;
    --radio-boton:              10px;
    --radio-card:               var(--radio-lg);

    /* --- Sombras --- */
    --sombra-card:              0 1px 2px rgba(23, 23, 23, .06);
    --sombra-dropdown:          0 4px 12px rgba(23, 23, 23, .12);
    --sombra-modal:             0 8px 32px rgba(23, 23, 23, .18);

    /* --- Transiciones --- */
    --transicion-rapida:        150ms ease;
    --transicion-normal:        250ms ease;

    /* --- Layout / rejilla --- */
    --ancho-contenido:          960px;   /* FNN.Monitor es mobile-first: contenedor más estrecho que Public */
    --ancho-contenido-lg:       1080px;

    /* --- Touch targets: en Monitor son obligatorios, no opcionales --- */
    --alto-minimo-touch:        44px;
    --ancho-minimo-touch:       44px;
}

/* ============================================================
   Modo piscina — alto contraste
   Activar con <body class="modo-piscina"> cuando el monitor está
   junto al vaso (pantalla mojada, luz cenital, guantes/dedos
   húmedos). Aumenta contraste y tamaño de objetivo táctil por
   encima del mínimo de accesibilidad.
   Propuesta de mecanismo: toggle guardado en localStorage desde
   _FiltrosLista.cshtml o Perfil/Index.cshtml (a implementar junto
   con la pantalla piloto, no en esta pasada de infraestructura).
   ============================================================ */
body.modo-piscina {
    --color-fondo:              #FFFFFF;
    --color-borde:              #000000;
    --color-texto:              #000000;
    --color-texto-suave:        #1A1A1A;
    --color-superficie-fondo:   #FFFFFF;
    --alto-minimo-touch:        56px;
    --ancho-minimo-touch:       56px;
}