/* =====================================================================================
   FEDEHACEB · Área "asociados" (sistema de diseño 2026)
   Vistas: Associateds/Index (inscripción de aspirantes a Delegado), Associateds/Inscritos,
           Associateds/DelegadosInscritos20242026Resultados, Beneficiaries/*,
           FeriaEmprendimiento2026/*, EvaluacionSeminarioSiarAnalfe/Index.
   Se carga con @section Styles después de fedehaceb.css y solo usa sus tokens. Prefijo de clases: as-
   Guía: docs/rediseno-2026/LineaGrafica.md
   ===================================================================================== */

/* ------------------------------------------------------------------ 1. Formularios */
/* El span de asp-validation-for sin error no ocupa espacio (ni hueco) en la grilla de .fh-field */
.fh-field .field-validation-valid { display: none; }

/* Grupo de campos con leyenda (Datos del colaborador, Emprendedor 1, Preguntas…) */
.as-fieldset { min-width: 0; margin: 0 0 8px; padding: 0; border: 0; }
.as-fieldset + .as-fieldset { margin-top: 12px; padding-top: 26px; border-top: 2px dashed var(--linea); }

/* La leyenda flota para no quedar montada sobre el borde punteado del fieldset */
.as-fieldset > legend {
    float: left;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--ink);
}

.as-fieldset > legend::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: var(--petalo);
    background: var(--c, var(--lima));
}

.as-fieldset > legend + * { clear: both; }
.as-fieldset__help { margin: -10px 0 18px; font-size: 14px; color: var(--muted); }

/* Nota de campos obligatorios */
.as-note { margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.as-note .fh-req { margin-right: 2px; }

/* Las preguntas largas (Evaluación, Feria) se leen mejor con su texto normal, no en negrita compacta */
.as-question > label { font-size: 15px; line-height: 1.45; }

.as-form textarea { min-height: 170px; }

/* Botonera final del formulario */
.as-form__actions { margin-top: 12px; padding-top: 22px; border-top: 2px dashed var(--linea); }

/* Selector de archivos dentro de .fh-file: botón con la forma de .fh-btn */
.fh-file > svg.i { color: var(--verde-d); }

/* .fh-field es una grilla de una columna "auto": sin min-width 0 el ancho intrínseco del input file
   (botón + "Ningún archivo seleccionado") desborda la tarjeta a 390 px */
.fh-field > * { min-width: 0; }
.fh-file { min-width: 0; }

.fh-file input[type="file"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font: 400 14px/1.4 var(--body);
    color: var(--ink-2);
}

.fh-file input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 12px;
    padding: 0 18px;
    border: 2px solid var(--ink);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink);
    font: 600 14px/1 var(--body);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.fh-file input[type="file"]::file-selector-button:hover { background: var(--ink); color: #fff; }
.fh-file:focus-within { border-color: var(--verde-d); }

/* ------------------------------------------------------------------ 2. Datos clave (dl) */
.as-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin: 0;
}

.as-data > div { min-width: 0; padding: 14px 18px; border-radius: var(--r-sm); background: var(--crema); }

.as-data dt {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.as-data dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }

/* Una sola columna (columnas laterales) */
.as-data--stack { grid-template-columns: minmax(0, 1fr); }

/* Rótulos largos (preguntas): sin mayúsculas sostenidas */
.as-data--q dt { font-size: 13.5px; letter-spacing: 0; text-transform: none; line-height: 1.4; }

.as-empty-val { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------------ 3. Inscripción de aspirantes a Delegado */
.as-state > .fh-card__ico { margin-bottom: 18px; }
.as-state .fh-card__title { margin-bottom: 10px; }
.as-state p { max-width: 64ch; }

.as-lead { margin: 0 0 20px; font-weight: 600; color: var(--ink); max-width: 68ch; }

.as-block { margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--linea); }
.as-block > .fh-notice { margin-bottom: 0; }

.as-photo { display: inline-flex; flex-direction: column; gap: 10px; margin: 22px 0 0; }

.as-photo img {
    display: block;
    width: auto;
    max-width: 160px;
    height: auto;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--lima);
}

.as-photo figcaption { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Columna lateral (pasos y documentos) */
.as-aside .fh-card__title { margin: 0 0 16px; font-size: 1.3rem; }
.as-aside .fh-steps { margin: 0 0 24px; gap: 10px; }
.as-aside .fh-step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 12px 10px 10px; }
.as-aside .fh-step__n { width: 44px; height: 44px; font-size: 19px; }
.as-aside .fh-step h3 { font-size: 16px; }
.as-aside .fh-step p { font-size: 13.5px; }
.as-aside__sub { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-d); }
.as-aside .fh-links a { min-height: 48px; font-size: 14px; }
/* .fh-main li a:not([class]) subraya los enlaces de texto y le gana a .fh-links a: en la píldora no hace falta */
.fh-main .as-aside .fh-links a { text-decoration: none; }
.as-aside .fh-links .ar { width: 36px; height: 36px; }

/* Cifras (panel del administrador, resumen de inscritos) */
.as-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 14px;
    margin: 4px 0 24px;
}

.as-stats .fh-stat { padding: 18px 20px; border-radius: var(--r-md); background: var(--cs, var(--lima-s)); }
.as-stats .fh-stat b { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.as-stats .fh-stat span { color: var(--ink-2); }
.as-stats--col { grid-template-columns: minmax(0, 1fr); margin: 0 0 16px; }

/* ------------------------------------------------------------------ 4. Tablas */
.as-scroll { overflow-x: auto; }
.as-gap { margin-top: 28px; }
.as-table-card { padding: 22px; }
.as-table-card .fh-card__head { margin-bottom: 14px; }

.as-zone { margin: 0; }
.as-zone tfoot td {
    background: var(--crema);
    border-top: 2px solid var(--linea);
    border-bottom: 0;
    font-weight: 800;
}

.as-zone .as-hl { font-weight: 800; }

.as-table-empty { padding: 28px 14px !important; text-align: center; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------------ 5. Resultados de Delegados electos */
.as-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-result { margin: 0; }

.as-result a {
    display: block;
    overflow: hidden;
    border-radius: 24px 24px 24px 6px;
    background: var(--c, var(--lima));
    box-shadow: var(--sh-1);
    transition: transform .3s ease, box-shadow .3s ease;
}

.as-result a:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.as-result a:focus-visible { outline-offset: 4px; }

.as-result img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }

.as-result figcaption {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 4px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.as-result figcaption::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: none;
    margin-top: .3em;
    border-radius: var(--petalo);
    background: var(--c, var(--lima));
}

@media (max-width: 560px) {
    .as-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .as-result a { border-radius: 18px 18px 18px 4px; }
    .as-result figcaption { font-size: 13px; }
}

/* ------------------------------------------------------------------ 6. Feria de Emprendimiento */
/* Banner del evento (decorativo: el título ya está en el h1) */
.as-banner { margin: 0 0 28px; overflow: hidden; border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); }
.as-banner img { display: block; width: 100%; height: auto; }

/* Fotos del emprendimiento */
.as-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-photos a { display: block; overflow: hidden; border-radius: 20px 20px 20px 4px; background: var(--crema); }
.as-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.as-photos a:hover img { transform: scale(1.05); }

.as-stack > * + * { margin-top: 20px; }

/* Título de las tarjetas de la columna lateral (datos del colaborador, emprendedores) */
.as-side-title { margin: 0 0 16px; font-size: 1.2rem; }

/* ------------------------------------------------------------------ 7. Celular */
/* .fh-card--lg conserva 40px de relleno en celular: a 390 px deja el texto en ~270 px de ancho */
@media (max-width: 760px) {
    .fh-card--lg { padding: 26px 22px; border-radius: 32px 32px 32px 6px; }
    .as-table-card { padding: 16px; }
    .as-data > div { padding: 12px 14px; }
    .as-fieldset > legend { font-size: 1.15rem; }
}

/* ------------------------------------------------------------------ 8. Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .as-result a:hover { transform: none; }
    .as-photos a:hover img { transform: none; }
}