/* ==========================================================================
   Conecta Juventud — Componentes base (fase 0)

   Cinco componentes: encabezado de sección, botón, campo, tarjeta y aviso.
   Sin sombras y sin degradados: la separación se logra con bordes de 1 px y
   espacio en blanco (manual de marca 10.5).
   ========================================================================== */


/* ==========================================================================
   1. Encabezado de sección
   Patrón obligatorio: etiqueta → barra azul → título (marca 9.5 y 10.1).
   ========================================================================== */

.encabezado-seccion {
    margin-bottom: var(--e-4);
}

.encabezado-seccion__etiqueta {
    display: block;
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: var(--e-2);
}

.encabezado-seccion__barra {
    width: var(--barra-azul-ancho);
    height: var(--barra-azul-alto);
    background: var(--azul-600);
    margin-bottom: var(--e-2);
}

.encabezado-seccion__titulo {
    margin: 0;
    font-size: var(--t-titulo-2);
    line-height: var(--lh-titulo);
    color: var(--azul-900);
}

.encabezado-seccion__descripcion {
    margin: var(--e-2) 0 0;
    color: var(--texto-suave);
    max-width: var(--ancho-lectura);
}


/* ==========================================================================
   2. Botón
   Un solo botón principal por pantalla (UX/UI 11.3).
   ========================================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: var(--alto-boton);
    min-width: var(--toque-min);
    padding: 0 var(--e-4);
    border: var(--borde-grosor) solid transparent;
    border-radius: var(--radio-control);
    font-family: var(--fuente);
    font-size: var(--t-cuerpo);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--d-rapida) var(--curva-ambas),
                border-color var(--d-rapida) var(--curva-ambas),
                color var(--d-rapida) var(--curva-ambas);
}

.boton:focus-visible {
    outline: var(--foco-grosor) solid var(--foco);
    outline-offset: var(--foco-desplazamiento);
}

/* Principal */
.boton--principal {
    background: var(--primario);
    color: var(--texto-inverso);
    border-color: var(--primario);
}

.boton--principal:hover:not(:disabled) {
    background: var(--primario-hover);
    border-color: var(--primario-hover);
    color: var(--texto-inverso);
}

/* Secundario */
.boton--secundario {
    background: var(--blanco);
    color: var(--primario);
    border-color: var(--primario);
}

.boton--secundario:hover:not(:disabled) {
    background: var(--azul-50);
    color: var(--primario-hover);
}

/* Solo texto */
.boton--texto {
    background: transparent;
    color: var(--primario);
    padding: 0 var(--e-2);
}

.boton--texto:hover:not(:disabled) {
    color: var(--primario-hover);
    text-decoration: underline;
}

/* Ancho completo: es la forma habitual en móvil */
.boton--ancho {
    width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
    background: var(--gris-300);
    border-color: var(--gris-300);
    color: var(--gris-600);
    cursor: not-allowed;
}

.boton--texto:disabled {
    background: transparent;
    border-color: transparent;
}

/* Estado de envío: el texto cambia y el botón se bloquea (UX/UI 4.1) */
.boton[data-estado="enviando"] {
    cursor: progress;
}

.grupo-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    align-items: center;
}


/* ==========================================================================
   3. Campo de formulario
   Etiqueta siempre visible sobre el campo, nunca solo texto interno.
   ========================================================================== */

.campo {
    display: block;
    margin-bottom: var(--e-3);
    max-width: var(--ancho-lectura);
}

.campo__etiqueta {
    display: block;
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: var(--e-1);
}

.campo__requerido {
    color: var(--error);
}

.campo__control {
    display: block;
    width: 100%;
    min-height: var(--alto-campo);
    padding: var(--e-2) var(--e-3);
    background: var(--blanco);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: var(--t-cuerpo);   /* 16 px evita el zoom automático en móvil */
    line-height: var(--lh-cuerpo);
    border: var(--borde-grosor) solid var(--borde-campo);
    border-radius: var(--radio-control);
    transition: border-color var(--d-rapida) var(--curva-ambas);
}

.campo__control::placeholder {
    color: var(--gris-600);
}

.campo__control:focus {
    border-color: var(--azul-600);
    border-width: var(--foco-grosor);
    outline: var(--foco-grosor) solid var(--foco);
    outline-offset: var(--foco-desplazamiento);
}

textarea.campo__control {
    min-height: calc(var(--alto-campo) * 2.5);
    resize: vertical;
}

select.campo__control {
    appearance: none;
    background-image: none;
    padding-right: var(--e-4);
}

.campo__ayuda {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-cuerpo-sm);
    color: var(--texto-suave);
}

/* Error: símbolo además de color (marca 8.7 y 15.2) */
.campo--error .campo__control {
    border-color: var(--error);
    border-width: var(--foco-grosor);
}

.campo__error {
    display: flex;
    align-items: flex-start;
    gap: var(--e-1);
    margin-top: var(--e-1);
    font-size: var(--t-cuerpo-sm);
    color: var(--error);
}

.campo__error::before {
    content: "✕";
    font-weight: 700;
    line-height: var(--lh-cuerpo);
}

/* Correcto */
.campo--exito .campo__control {
    border-color: var(--exito);
    border-width: var(--foco-grosor);
}

.campo__exito {
    display: flex;
    align-items: flex-start;
    gap: var(--e-1);
    margin-top: var(--e-1);
    font-size: var(--t-cuerpo-sm);
    color: var(--exito);
}

.campo__exito::before {
    content: "✓";
    font-weight: 700;
    line-height: var(--lh-cuerpo);
}

.campo__control:disabled {
    background: var(--gris-100);
    color: var(--texto-suave);
    cursor: not-allowed;
}

/* Casilla de verificación: nunca premarcada en el registro (UX/UI 4.1).
   Toda la fila es <label>, de modo que el área tocable es la fila completa
   y no solo el cuadrito de 22 px. */
.campo-casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    min-height: var(--toque-min);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-3);
    cursor: pointer;
}

.campo-casilla__control {
    width: var(--casilla);
    height: var(--casilla);
    margin-top: 2px;   /* alineación óptica con la primera línea de texto */
    accent-color: var(--azul-600);
    flex-shrink: 0;
}

.campo-casilla__texto {
    font-size: var(--t-cuerpo);
    line-height: var(--lh-cuerpo);
}

.leyenda-requerido {
    font-size: var(--t-cuerpo-sm);
    color: var(--texto-suave);
}


/* ==========================================================================
   4. Tarjeta
   ========================================================================== */

.tarjeta {
    background: var(--blanco);
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-tarjeta);
    padding: var(--e-3);
}

.tarjeta--secundaria {
    background: var(--azul-50);
}

.tarjeta--llena {
    background: var(--azul-600);
    border-color: var(--azul-600);
    color: var(--texto-inverso);
}

.tarjeta--llena .tarjeta__titulo,
.tarjeta--llena .tarjeta__texto {
    color: var(--texto-inverso);
}

.tarjeta__titulo {
    margin: 0 0 var(--e-2);
    font-size: var(--t-titulo-3);
    color: var(--azul-900);
}

.tarjeta__texto {
    margin: 0;
    color: var(--texto);
}

.tarjeta__pie {
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: var(--borde-grosor) solid var(--borde);
}

.tarjeta--llena .tarjeta__pie {
    border-top-color: rgba(255, 255, 255, 0.32);
}

/* Bloque de cita: borde izquierdo de 4 px en lugar de sombra (marca 10.2) */
.bloque-cita {
    background: var(--azul-100);
    border-left: var(--borde-destacado) solid var(--azul-600);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
    padding: var(--e-3);
    margin: 0 0 var(--e-3);
    color: var(--azul-900);
    font-style: italic;   /* cursiva reservada a citas y reflexiones */
    max-width: var(--ancho-lectura);
}

.bloque-cita__referencia {
    display: block;
    margin-top: var(--e-2);
    font-style: normal;
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    color: var(--azul-600);
}


/* ==========================================================================
   5. Aviso
   Borde izquierdo de 4 px, símbolo además de color.
   ========================================================================== */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    padding: var(--e-3);
    border-radius: var(--radio-chico);
    border-left: var(--borde-destacado) solid var(--gris-400);
    background: var(--gris-100);
    color: var(--texto);
    margin-bottom: var(--e-3);
    max-width: var(--ancho-lectura);
}

.aviso__simbolo {
    font-weight: 700;
    line-height: var(--lh-cuerpo);
    flex-shrink: 0;
}

.aviso__cuerpo {
    min-width: 0;
}

.aviso__titulo {
    margin: 0 0 var(--e-1);
    font-size: var(--t-titulo-4);
    font-weight: 700;
    color: inherit;
    line-height: var(--lh-cuerpo);
}

.aviso__texto {
    margin: 0;
    /* Una dirección de correo larga (notificaciones@conectajuventudca.com) es
       una sola «palabra» y, sin esto, empuja la pantalla más allá de 360 px.
       Se parte solo cuando no cabe (Fase 10). */
    overflow-wrap: anywhere;
}

.aviso--informacion {
    background: var(--azul-100);
    border-left-color: var(--azul-600);
    color: var(--azul-900);
}

.aviso--exito {
    background: var(--exito-fondo);
    border-left-color: var(--exito);
    color: var(--exito);
}

.aviso--exito .aviso__texto {
    color: var(--texto);
}

.aviso--error {
    background: var(--error-fondo);
    border-left-color: var(--error);
    color: var(--error);
}

.aviso--error .aviso__texto {
    color: var(--texto);
}

.aviso--advertencia {
    background: var(--aviso-fondo);
    border-left-color: var(--oro-600);
    color: var(--texto);
}

/* El título va en tinta, no en oro-700.
   El manual autoriza oro-700 para títulos en negrita de 16 px, pero esa
   combinación mide 3.66 : 1 sobre el fondo de aviso y WCAG AA exige 4.5 : 1
   a ese tamaño. La advertencia se sigue distinguiendo por el borde dorado de
   4 px, el símbolo y el fondo, así que no se pierde identidad ni semántica.
   El dorado permanece como color del borde: sigue siendo el acento. */
.aviso--advertencia .aviso__titulo,
.aviso--advertencia .aviso__simbolo {
    color: var(--texto);
}

.aviso--advertencia .aviso__texto {
    color: var(--texto);
}


/* ==========================================================================
   6. Panel del liderazgo (fase 1)

   Cambia el contexto: pantalla grande, uso frecuente, más densidad. El menú
   lateral queda fijo en escritorio y se despliega por debajo de 900 px.
   ========================================================================== */

.panel {
    display: flex;
    align-items: flex-start;
    gap: var(--e-4);
    width: 100%;
    max-width: var(--ancho-panel);
    margin: 0 auto;
    padding-left: var(--margen-lateral);
    padding-right: var(--margen-lateral);
}

.panel__menu {
    flex: 0 0 220px;
    position: sticky;
    top: var(--e-3);
}

.panel__contenido {
    flex: 1 1 auto;
    min-width: 0;   /* sin esto, una tabla ancha estira el contenedor */
}

.menu-lateral {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-tarjeta);
    overflow: hidden;
}

.menu-lateral__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    min-height: var(--toque-min);
    padding: var(--e-2) var(--e-3);
    color: var(--texto);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-bottom: var(--borde-grosor) solid var(--borde);
}

.menu-lateral > li:last-child .menu-lateral__enlace {
    border-bottom: 0;
}

.menu-lateral__enlace:hover {
    background: var(--azul-50);
    color: var(--texto);
}

.menu-lateral__enlace[aria-current="page"] {
    border-left-color: var(--azul-600);
    background: var(--azul-50);
    color: var(--azul-900);
    font-weight: 700;
}

.menu-lateral__cuenta {
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
    font-size: var(--t-cuerpo-sm);
    font-weight: 700;
    color: var(--texto-inverso);
    background: var(--azul-600);
    border-radius: var(--radio-chico);
    padding: 0 var(--e-1);
}

.menu-lateral__cuenta--atencion {
    background: var(--oro-700);
}

/* Cifras del panel */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--e-2);
    list-style: none;
    margin: 0 0 var(--e-4);
    padding: 0;
}

.cifra {
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-tarjeta);
    padding: var(--e-3);
}

.cifra--atencion {
    background: var(--aviso-fondo);
    border-color: var(--oro-200);
}

.cifra__numero {
    display: block;
    font-size: var(--t-titulo-1);
    font-weight: 700;
    line-height: var(--lh-titulo);
    color: var(--azul-900);
}

.cifra__etiqueta {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    color: var(--texto-suave);
}

/* Tabla del panel: radio 8 px, encabezado azul, filas alternas */
.tabla-envoltorio {
    overflow-x: auto;
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-chico);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-cuerpo-sm);
}

.tabla th,
.tabla td {
    padding: var(--e-2) var(--e-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: var(--borde-grosor) solid var(--borde);
}

.tabla thead th {
    background: var(--azul-600);
    color: var(--texto-inverso);
    font-size: var(--t-etiqueta);
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla tbody tr:nth-child(even) {
    background: var(--azul-50);
}

.tabla tbody tr:last-child td {
    border-bottom: 0;
}

.tabla__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1);
    align-items: center;
}

/* Etiqueta de estado: símbolo además de color */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 2px var(--e-2);
    border-radius: var(--radio-chico);
    font-size: var(--t-cuerpo-sm);
    font-weight: 700;
    white-space: nowrap;
    border: var(--borde-grosor) solid transparent;
}

.etiqueta--activa {
    background: var(--exito-fondo);
    color: var(--exito);
    border-color: var(--exito);
}

.etiqueta--pendiente {
    background: var(--aviso-fondo);
    color: var(--oro-700);
    border-color: var(--oro-700);
}

.etiqueta--rechazada,
.etiqueta--desactivada {
    background: var(--error-fondo);
    color: var(--error);
    border-color: var(--error);
}

.etiqueta--neutra {
    background: var(--gris-100);
    color: var(--texto-suave);
    border-color: var(--gris-400);
}

/* Botón pequeño para las filas de una tabla */
.boton--chico {
    min-height: var(--toque-min);
    padding: 0 var(--e-2);
    font-size: var(--t-cuerpo-sm);
    border-radius: var(--radio-chico);
}

/* Barra de filtros */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    align-items: flex-end;
    margin-bottom: var(--e-3);
}

.filtros .campo {
    margin-bottom: 0;
    flex: 1 1 160px;
    min-width: 0;
    max-width: none;
}

/* Bloque donde se muestra una contraseña temporal, una sola vez */
.clave-temporal {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--t-titulo-2);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--azul-900);
    background: var(--blanco);
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-chico);
    padding: var(--e-2) var(--e-3);
    display: inline-block;
    margin: var(--e-2) 0;
    user-select: all;
}

/* Estado vacío */
.vacio {
    text-align: center;
    padding: var(--e-5) var(--e-3);
    border: var(--borde-grosor) dashed var(--borde);
    border-radius: var(--radio-tarjeta);
    color: var(--texto-suave);
}

.vacio__emblema {
    height: var(--emblema-estado);
    width: auto;
    opacity: 0.35;
    margin: 0 auto var(--e-3);
}

.vacio__titulo {
    color: var(--azul-900);
    margin-bottom: var(--e-2);
}

/* Lista de definiciones de la ficha */
.datos {
    margin: 0;
}

.datos > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-2);
    padding: var(--e-2) 0;
    border-bottom: var(--borde-grosor) solid var(--borde);
}

.datos dt {
    flex: 0 0 180px;
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: var(--track-etiqueta);
    text-transform: uppercase;
    color: var(--texto-suave);
    padding-top: 3px;
}

.datos dd {
    flex: 1 1 200px;
    margin: 0;
}

@media (max-width: 900px) {
    .panel {
        display: block;
    }

    .panel__menu {
        position: static;
        margin-bottom: var(--e-4);
    }

    .datos dt {
        flex: 1 1 100%;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Tablas en pantalla angosta

   El manual UX/UI pide que ninguna tabla obligue a desplazarse hacia los
   lados. Por debajo de 700 px cada fila se convierte en un bloque y cada
   celda muestra su encabezado delante, tomado de data-etiqueta.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .tabla-envoltorio {
        border: 0;
        border-radius: 0;
        overflow-x: visible;
    }

    .tabla thead {
        /* Fuera de la vista, pero sigue leyéndose con lector de pantalla */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabla,
    .tabla tbody,
    .tabla tr,
    .tabla td {
        display: block;
        width: 100%;
    }

    .tabla tbody tr {
        border: var(--borde-grosor) solid var(--borde);
        border-radius: var(--radio-chico);
        margin-bottom: var(--e-2);
        padding: var(--e-1) 0;
        background: var(--blanco);
    }

    .tabla tbody tr:nth-child(even) {
        background: var(--azul-50);
    }

    .tabla td {
        border-bottom: 0;
        padding: var(--e-1) var(--e-3);
    }

    .tabla td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: var(--t-etiqueta);
        font-weight: 700;
        letter-spacing: var(--track-etiqueta);
        text-transform: uppercase;
        color: var(--texto-suave);
        margin-bottom: 2px;
    }

    /* Una celda vacía no deja un encabezado suelto */
    .tabla td:empty {
        display: none;
    }
}


/* ── El área tocable de un <details> (corregido en la Fase 9) ──────────────

   Un <summary> sin más es una línea de texto de 22 px de alto. El proyecto fija
   44 px como mínimo para cualquier cosa que se pulse, y la auditoría encontró
   tres en la pantalla de congregaciones —los «Editar ...»— que se quedaban a la
   mitad: en un celular hay que apuntar con la punta del dedo.

   La regla va aquí, en la hoja general, y no en cada pantalla: así cualquier
   <details> que se escriba mañana nace ya con su área tocable. Las pantallas
   que ya le daban un tratamiento propio —el banco de mensajes, la tabla de la
   gráfica— lo conservan, porque definen su propio padding y este min-height no
   se lo quita. */
summary {
    min-height: var(--toque-min);
    display: flex;
    align-items: center;
    cursor: pointer;
}