/* ============================================================
   modo_estandar.css — ajustes para renderizar en MODO ESTÁNDAR
   ============================================================
   Hasta 2026-09 toda la app (páginas con encabezado22.php) se renderizaba
   en QUIRKS MODE porque salía contenido antes del <!DOCTYPE>. Este archivo
   se carga SOLO con $modoEstandar = true (encabezado22.php) y compensa las
   diferencias medidas página por página (iframes quirks vs estándar, 390px y
   1280px, 92 páginas — 2026-09-28), para que el paso a modo estándar no mueva
   nada visualmente.

   Diferencias residuales conocidas (CSS no puede reproducir quirks exacto):
   - comercios.php: tarjeta con badge "Nuevo" cuyo rubro es largo (el "Nuevo"
     baja de renglón): ~+8px celular / ~+4px escritorio. Solo esa tarjeta.
   - editactividades.php: tarjetas con dos badges: +1,2px.
   Cambios de HTML hechos para poder cubrir casos: jubilados.php ("Ver más"
   envuelto en <span class="ver-mas">) y mis_entradas.php (class="me-ver-todos").

   Si una página NUEVA se ve distinta: compararla en ambos modos y agregar la
   regla acá, con el mismo criterio. Las diferencias son de estos tipos:
   A) Contenedor con UN SOLO ícono en línea: en estándar la línea reserva el
      alto de línea del contenedor ("strut"); en quirks no.
      → line-height:1 en el contenedor.
   B) Imagen / iframe en línea solo en su renglón: en estándar deja el hueco
      de los descendentes abajo. → vertical-align:top (conserva centrado).
   C) Un único elemento en línea (ícono, badge, span) en su propio renglón
      entre bloques. → display:block (+ width:fit-content si tiene fondo).
   D) <form> que solo envuelve un botón. → display:flex.
   E) Renglón con uno o varios elementos en línea pero sin texto directo, que
      no se pueden pasar a bloque. → line-height:0 en el contenedor y
      :where(hijos) con el line-height que heredaban.

   ":root" delante de cada selector sube la especificidad para ganarle al CSS
   propio de cada página sin usar !important.
   ============================================================ */

/* ── A) Contenedores con un solo ícono ─────────────────────── */
:root .stat-mini-icon,                 /* resumen.php */
:root .evento-arrow,                   /* calendario_completo.php, feriados.php */
:root .header-icon,                    /* kitescolar.php, kitescolar1.php */
:root .card-foto-wrap .foto-icon,      /* familia.php */
:root .family-tab,                     /* familia.php (pestañas solo ícono) */
:root .ccv-view-toggle > .ccv-view-btn,   /* convenio.php (botones lista/cuadrícula) */
:root #themeToggle {                   /* Voucher.php (botón de tema, solo ícono) */
    line-height: 1;
}

/* ── B) Imágenes / iframes solos en su renglón ─────────────── */
:root .commerce-image-wrapper > img,   /* beneficios.php */
:root .page-container > img,           /* convenio22.php */
:root .frente-header > img,            /* tarjeta.php (logo) */
:root .w-map iframe,                   /* Mbaradero/Mcunuelas/Mmoreno/Mzarate */
:root .activity-image-wrapper > img,   /* editactividades.php */
:root .form-group > textarea,          /* crear_emprendimiento.php (y formularios con .form-group) */
:root .asis-iw > textarea {            /* chat2.php (caja de mensaje del ASIS) */
    vertical-align: top;
}

/* ── C) Un solo elemento en línea en su renglón ────────────── */
:root .quick-link > span,              /* resumen.php */
:root .info-text > span,               /* vigilia_24marzo.php */
:root .location-text > span,           /* dondevoto.php */
:root .alert-success > div > span {    /* missalones.php (texto tras el <br>) */
    display: block;
}
:root .tramite-content > .tramite-estado,  /* resumen.php (badge) */
:root .event-card-body > i {               /* jubilados.php (flecha, alineada a la izq.) */
    display: block;
    width: fit-content;
}
:root .info-box-verde > i {                /* pedirvale.php (ícono centrado) */
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-right: 8px;   /* reemplaza su margin-right:8px, que en quirks entraba en el centrado */
}
/* misactividades.php: ícono + texto. Si entran, van en la misma línea; si
   no ("Recordando"), el ícono queda solo arriba y esa línea debe medir lo
   que mide el ícono (como en quirks), no el alto de línea del texto.
   Flex con wrap reproduce justo eso; el gap reemplaza al espacio. */
:root .btn-accion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: .28em;
}

/* ── E) Renglones con VARIOS elementos en línea y sin texto directo ──
   (no se puede pasar ninguno a bloque). Se imita a quirks: sin "strut"
   en el contenedor (line-height:0) y los hijos recuperan el line-height
   que heredaban. :where() = especificidad 0, así las reglas propias de la
   página (p. ej. .cc-name{line-height:1.22}) siguen ganando. */
:root .cc-info { line-height: 0; }             /* comercios.php (badge + "Nuevo") */
:where(.cc-info > *) { line-height: normal; }
/* Con "Nuevo" quirks SÍ reserva ~3,6px cuando badge y "Nuevo" comparten
   renglón (caso común), pero no cuando "Nuevo" baja al renglón siguiente
   (badge de texto largo). CSS no puede distinguir los dos casos: se imita el
   común; el otro queda ~8px más alto (ver residuales en la cabecera). */
:root .cc-info:has(> .cc-nuevo) { line-height: normal; }
:root .norma { line-height: 0; }               /* CODIGODECONDUCTA.php (número + texto) */
:where(.norma > *) { line-height: 1.6; }
:root .proximo-info { line-height: 0; }        /* feriados.php (badge de categoría solo) */
:where(.proximo-info > *) { line-height: normal; }
:root .commerce-info { line-height: 0; }       /* beneficios.php (badge arriba) */
:where(.commerce-info > *) { line-height: normal; }
:root .activity-info { line-height: 0; }       /* editactividades.php (badges arriba) */
:where(.activity-info > *) { line-height: normal; }
/* Con DOS badges en el renglón pasa lo mismo que en comercios: quirks queda
   entre medio. normal = +1,2px (imperceptible) vs line-height:0 = -2,6px. */
:root .activity-info:has(> .activity-badge + .activity-badge) { line-height: normal; }
:root .asis-dsep { line-height: 0; }           /* chat2.php (separador de fecha, píldora) */
:where(.asis-dsep > *) { line-height: normal; }
:root .me-ver-todos { line-height: 0; }           /* mis_entradas.php ("← Ver todos los eventos") */
:where(.me-ver-todos > *) { line-height: normal; }
:root .emp-data,                               /* inscripcion_guarderia.php */
:root .nino { line-height: 0; }
:where(.emp-data > *, .nino > *) { line-height: 1.5; }   /* lo que heredaban del body */
/* entrenamiento.php: celdas que solo tienen un badge o un botón */
:root .admin-card td:has(> .badge:only-child),
:root .admin-card td:has(> .btn:only-child) { line-height: 0; }
:where(.admin-card td > .badge, .admin-card td > .btn) { line-height: normal; }

/* feriados.php — "Sin eventos": <i> + <br> + texto. El renglón del ícono
   (con el <br>) no suma alto de línea en quirks; con el ícono en bloque el
   <br> sobra (dejaría un renglón vacío). */
:root .sin-eventos > i { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
:root .sin-eventos > br { display: none; }

/* ── D) Formularios que solo envuelven un botón ────────────── */
:root .ic-r2 form {                    /* historial.php */
    display: flex;
}
