/* =========================================================================
   Estilos base de SomaTrack (mobile-first).
   Los colores se definen como variables para cambiarlos en un solo lugar.
   ========================================================================= */
:root {
    --st-primario: #0f5f5c;        /* verde azulado: asociado a salud, buen contraste */
    --st-primario-oscuro: #0a4442;
    --st-fondo-footer: #f1f4f4;
    --bs-primary: var(--st-primario);
    --bs-primary-rgb: 15, 95, 92;
}

/* Tamaño base de 16 px: evita que iOS haga zoom al enfocar un campo de texto. */
html {
    font-size: 16px;
}

.st-navbar {
    background-color: var(--st-primario);
}

.btn-primary {
    --bs-btn-bg: var(--st-primario);
    --bs-btn-border-color: var(--st-primario);
    --bs-btn-hover-bg: var(--st-primario-oscuro);
    --bs-btn-hover-border-color: var(--st-primario-oscuro);
    --bs-btn-active-bg: var(--st-primario-oscuro);
}

/* Objetivos táctiles de al menos 44 px de alto (guía de accesibilidad móvil). */
.btn,
.nav-link,
.form-control,
.form-select {
    min-height: 44px;
}

.st-footer {
    background-color: var(--st-fondo-footer);
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* En celular los enlaces legales van en columna; en pantallas medianas, en línea. */
.st-footer-links li {
    padding: .25rem 0;
}

.st-footer-links a {
    color: inherit;
}

@media (min-width: 768px) {
    .st-footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem 1.25rem;
    }
}

/* -------------------------------------------------------------------------
   Pantallas de acceso (Entrega 3): tarjeta centrada y angosta.
   ------------------------------------------------------------------------- */
.st-auth {
    max-width: 440px;
    margin: 0 auto;
}

.st-auth-amplio {
    max-width: 560px;
}

/* Campos de código: grandes y espaciados, fáciles de leer y teclear en el celular. */
.st-codigo {
    font-size: 1.6rem;
    letter-spacing: .35rem;
    font-variant-numeric: tabular-nums;
}

.st-codigo-generado {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: .3rem;
    background: var(--st-fondo-footer);
    border-radius: .5rem;
    padding: .75rem 1rem;
    user-select: all; /* un toque selecciona todo el código */
}

/* Los formularios dentro del menú desplegable no deben agregar margen. */
.dropdown-menu form {
    margin: 0;
}

/* ---- Entrega 5: sectores ---------------------------------------------------------- */

/* Alpine: oculta elementos x-cloak hasta que Alpine inicializa (evita parpadeos). */
[x-cloak] {
    display: none !important;
}

/* Portadas 16:9 recortadas al centro; fondo neutro mientras carga (lazy). */
.st-portada {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: var(--st-fondo-footer);
}

.st-sector-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.st-sector-card:hover,
.st-sector-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}

/* Los sectores inactivos se ven atenuados pero siguen siendo legibles. */
.st-sector-inactivo .st-portada {
    filter: grayscale(1);
    opacity: .6;
}

/* Alto fijo: Leaflet necesita un contenedor con tamaño. 320 px cabe en un celular
   dejando ver los campos debajo. */
.st-mapa {
    height: 320px;
    width: 100%;
    z-index: 0; /* que el menú desplegable de Bootstrap quede por encima del mapa */
}

@media (min-width: 992px) {
    .st-mapa {
        height: 400px;
    }
}

/* Texto libre del usuario: respeta saltos de línea sin interpretar HTML. */
.st-texto-libre {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---- Entrega 6: cuestionarios ----------------------------------------------------- */

/* Editor de campo: un poco más ancho que los formularios de cuenta. */
.st-editor {
    max-width: 720px;
}

/* Permite que el texto largo se recorte dentro de contenedores flex. */
.min-w-0 {
    min-width: 0;
}

/* Pestañas de versiones: se desplazan horizontalmente en el celular en lugar de saltar de línea. */
.st-versiones {
    scrollbar-width: thin;
}

/* Vista previa: marco tipo celular centrado. */
.st-vista-previa {
    max-width: 420px;
    margin: 0 auto;
    border: 8px solid #1f2933;
    border-radius: 1.5rem;
    padding: 1rem;
    background: var(--bs-body-bg);
}

/* ---- Entrega 7: textos legales ----------------------------------------------------- */

/* Ancho cómodo de lectura (~75 caracteres por línea). */
.st-legal {
    max-width: 820px;
}

.st-legal-texto h2 {
    font-size: 1.15rem;
    margin-top: 1.75rem;
}

.st-legal-texto h3 {
    font-size: 1rem;
    margin-top: 1.25rem;
}

.st-legal-texto li {
    margin-bottom: .25rem;
}

/* En la pantalla de aceptación, cada documento se desplaza dentro de su tarjeta. */
.st-legal-desplazable {
    max-height: 50vh;
    overflow-y: auto;
}

/* Campo trampa anti-robots: fuera de la vista sin display:none (algunos robots lo detectan). */
.st-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media print {
    .st-legal {
        max-width: none;
    }

    .st-legal-texto a::after {
        content: " (" attr(href) ")";
        font-size: .85em;
    }
}

/* ---- Entrega 8: captura ------------------------------------------------------------ */

.st-captura {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 5.5rem; /* espacio para la barra de acciones fija */
}

/* Indicador de pasos: números en círculo; el nombre se oculta en pantallas muy angostas. */
.st-pasos {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.st-pasos li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    border-bottom: 3px solid var(--bs-border-color);
    padding-bottom: .35rem;
}

.st-pasos li.activo {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: 600;
}

.st-pasos li.hecho {
    color: var(--bs-success);
    border-color: var(--bs-success);
    cursor: pointer;
}

.st-paso-num {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    flex-shrink: 0;
}

@media (max-width: 380px) {
    .st-paso-nombre {
        display: none;
    }
}

/* Casillas grandes: se tocan con el dedo sin fallar. */
.st-check-grande {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.st-check-grande .form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: .05em;
}

.st-check-grande .form-check-label {
    padding-left: .35rem;
}

/* Lienzo de firma: alto fijo, fondo blanco aun en modo oscuro (la firma es tinta negra). */
.st-firma {
    display: block;
    width: 100%;
    height: 180px;
    background: #fff;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    touch-action: none;
}

.st-seccion {
    margin-top: 1rem;
}

.st-folio {
    max-width: 360px;
}

/* Barra de acciones fija abajo: el pulgar alcanza "Siguiente" sin desplazarse. */
.st-acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    gap: .5rem;
    padding: .75rem max(1rem, calc((100vw - 640px) / 2));
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .06);
}

/* ---- Entrega 9: productividad ------------------------------------------------------ */

/* Cifra grande de los indicadores. */
.st-cifra {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
}

/* Gráfica de barras por día (HTML + CSS). La altura llega en la variable --alto. */
.st-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    overflow-x: auto;
}

.st-barra {
    flex: 1 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.st-barras-densas .st-barra {
    flex-basis: 8px;
}

.st-barra-relleno {
    display: block;
    width: 100%;
    height: var(--alto);
    min-height: 2px;
    background: var(--bs-primary);
    border-radius: 3px 3px 0 0;
}

.st-barra-finde .st-barra-relleno {
    background: var(--bs-secondary);
    opacity: .7;
}

.st-barra-valor {
    font-size: .7rem;
    line-height: 1.2;
}

.st-barra-dia {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.st-barras-densas .st-barra-dia {
    font-size: 0;
}

/* ---- Entrega 10: dashboard ---------------------------------------------------------- */

/* Paleta categórica validada (skill dataviz, slots 1 y 2: pasa daltonismo y contraste). */
:root {
    --st-serie-1: #2a78d6;   /* hombres */
    --st-serie-2: #eb6834;   /* mujeres */
    --st-serie-unica: var(--st-primario);
}

.st-serie-hombres { background: var(--st-serie-1); }
.st-serie-mujeres { background: var(--st-serie-2); }

/* Celdas suprimidas (<5): rayado gris, nunca un color de serie. */
.st-suprimida {
    background: repeating-linear-gradient(135deg, var(--bs-secondary-bg) 0 3px, var(--bs-border-color) 3px 6px) !important;
}

/* Barras horizontales: etiqueta | pista (barra + valor). */
.st-hbarras {
    display: grid;
    gap: 4px;
}

.st-hbarra {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) 1fr;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.st-hbarra-etiqueta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pista: columna de la barra (escala 0–100 % de su propio ancho) + columna fija del valor,
   así la longitud de la barra es proporcional al dato y no la recorta el texto. */
.st-hbarra-pista {
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.st-hbarra-relleno {
    display: block;
    height: 14px;
    width: max(2px, var(--ancho, 0%));
    background: var(--st-serie-unica);
    border-radius: 0 4px 4px 0; /* extremo de datos redondeado, base recta */
}

/* Cero: no se dibuja barra (un trazo mínimo se leería como "casi nada", no como "nada"). */
.st-cero {
    visibility: hidden;
}

.st-hbarra-relleno.st-suprimida {
    width: 1.25rem;
}

.st-hbarra-valor {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Columnas por mes: reutilizan .st-barras de la Entrega 9 con etiquetas de mes. */
.st-barras-meses .st-barra {
    flex-basis: 34px;
}

.st-barras-meses .st-barra-relleno {
    background: var(--st-serie-unica);
}

.st-barra-mes {
    font-size: .65rem;
    white-space: nowrap;
}

/* Pirámide: mujeres crecen hacia la izquierda, hombres hacia la derecha. */
.st-leyenda {
    display: flex;
    gap: 1rem;
}

.st-muestra {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
    vertical-align: -1px;
}

.st-piramide {
    display: grid;
    gap: 2px;
}

.st-piramide-fila {
    display: grid;
    grid-template-columns: 1fr 3.25rem 1fr;
    align-items: center;
    font-size: .75rem;
}

/* Cada lado: columna fija del valor en el borde exterior + carril de la barra junto al eje. */
.st-piramide-lado {
    display: grid;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.st-piramide-lado.st-izq {
    grid-template-columns: 2.25rem 1fr;
    text-align: right;
}

.st-piramide-lado.st-der {
    grid-template-columns: 1fr 2.25rem;
}

.st-piramide-barra {
    display: block;
    height: 12px;
    width: max(2px, var(--ancho, 0%));
}

.st-izq .st-piramide-barra { justify-self: end; }
.st-der .st-piramide-barra { justify-self: start; }

.st-izq .st-piramide-barra { border-radius: 4px 0 0 4px; }
.st-der .st-piramide-barra { border-radius: 0 4px 4px 0; }

.st-piramide-grupo {
    text-align: center;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.st-piramide-valor {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}