/* =====================================================================
   Presea 2026 — identidad institucional Ecatepec de Morelos
   Paleta 2026: guinda #691C32 · dorado #BC955C · crema #ECD798

   Base de 18px y áreas táctiles de 44px o más: el formulario lo llenan
   ciudadanos de todas las edades, muchos desde el celular.
   ===================================================================== */

:root {
    --guinda:        #691C32;
    --guinda-osc:    #4d1425;
    --guinda-claro:  #8a2a44;
    --dorado:        #BC955C;
    --crema:         #ECD798;
    --texto:         #22242a;
    --texto-suave:   #5b616e;
    --borde:         #d6d9e0;
    --fondo:         #f4f5f7;
    --blanco:        #ffffff;
    --ok:            #1f7a45;
    --error:         #b3261e;
    --aviso:         #8a6100;
    --radio:         12px;
    --sombra:        0 2px 10px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .45rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

.ancho { max-width: 1440px; margin: 0 auto; padding: 0 1.6rem; }
.ancho-angosto { max-width: 1280px; margin: 0 auto; padding: 0 1.6rem; }

/* ---- Encabezado institucional ---- */
.barra-superior {
    background: var(--guinda);
    color: #fff;
    border-bottom: 5px solid var(--dorado);
}
.barra-superior .ancho {
    display: flex; align-items: center; gap: 1rem;
    padding-top: .65rem; padding-bottom: .65rem;
    flex-wrap: wrap;
}
.barra-superior img { height: 44px; width: auto; }
.barra-titulo { flex: 1; min-width: 220px; }
.barra-titulo strong { display: block; font-size: 1.15rem; letter-spacing: .3px; }
.barra-titulo small  { display: block; color: var(--crema); font-size: .92rem; }
.barra-superior a.enlace-panel {
    color: #fff; text-decoration: none; border: 2px solid rgba(255,255,255,.6);
    padding: .55rem 1rem; border-radius: var(--radio); font-weight: 600;
    min-height: 44px; display: inline-flex; align-items: center;
}
.barra-superior a.enlace-panel:hover { background: rgba(255,255,255,.15); }

.cinta-anio {
    background: var(--crema); color: var(--guinda-osc);
    font-size: .86rem; text-align: center; padding: .3rem 1rem; font-weight: 600;
}

/* ---- Portada ----
   En una sola franja horizontal: el texto a la izquierda y el aviso de cierre
   a la derecha. Apilado ocupaba media pantalla de alto y dejaba los costados
   vacíos. */
.portada {
    background: linear-gradient(135deg, var(--guinda) 0%, var(--guinda-osc) 100%);
    color: #fff; padding: 1.1rem 0;
}
.portada .ancho {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.portada-texto { flex: 1; min-width: 300px; }
.portada h1 { font-size: 1.55rem; margin: 0 0 .15rem; }
.portada p  { font-size: .98rem; color: #f2e6ea; max-width: 78ch; margin: 0; }
.contador {
    display: flex; flex-direction: column; gap: .1rem;
    background: rgba(0,0,0,.22); border: 2px solid var(--dorado);
    border-radius: var(--radio); padding: .55rem 1.1rem; white-space: nowrap;
}
.contador strong { font-size: 1.02rem; color: var(--crema); }
.contador small  { color: #e8dde1; font-size: .87rem; }

@media (max-width: 720px) {
    .contador { white-space: normal; }
    .portada h1 { font-size: 1.35rem; }
}

/* ---- Tarjetas y formulario ---- */
.tarjeta {
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra);
    padding: 1.3rem 1.5rem; margin: 1.1rem 0;
}
.tarjeta > h2:first-child { margin-top: 0; color: var(--guinda); }

.campo { display: block; margin-bottom: 1rem; }
.campo > span.etiqueta {
    display: block; font-weight: 700; margin-bottom: .35rem; font-size: 1rem;
}
.campo .ayuda {
    display: block; color: var(--texto-suave); font-size: .92rem; margin-bottom: .5rem;
}
.requerido { color: var(--error); font-weight: 700; }

/* Se estilizan todos los inputs por exclusión y no por lista de tipos: con la
   lista, cada tipo nuevo (email, date, tel...) salía con la apariencia por
   defecto del navegador y desentonaba con el resto del formulario. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
    width: 100%; padding: .75rem .85rem; font-size: 1rem; font-family: inherit;
    border: 2px solid var(--borde); border-radius: 10px; background: #fff;
    min-height: 48px; color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--dorado); outline-offset: 1px; border-color: var(--guinda);
}
input[type="file"] { padding: .55rem; background: #fbfbfc; }
input[type="date"] { min-width: 0; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.4rem; }

/* Los siete documentos apilados generaban un scroll larguísimo. En dos
   columnas la convocatoria completa cabe prácticamente en una pantalla. */
.rejilla-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 0 1.6rem;
}
.rejilla-docs .campo {
    background: #fbfafb; border: 1px solid var(--borde);
    border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1rem;
    border-left: 5px solid var(--borde); transition: background .15s, border-color .15s;
}
.rejilla-docs .ayuda { min-height: 3.2em; }

/* Señal visual por documento: el ciudadano ve de inmediato cuáles ya quedaron
   y cuáles le faltan, sin tener que esperar al envío. */
.rejilla-docs .campo.campo-ok {
    background: #f0f9f4; border-color: var(--ok); border-left-color: var(--ok);
}
.rejilla-docs .campo.campo-error {
    background: #fdf1f0; border-color: var(--error); border-left-color: var(--error);
}
.estado-doc {
    display: block; margin-top: .45rem; font-size: .9rem; font-weight: 700;
    line-height: 1.35;
}
.estado-doc.ok    { color: #14532d; }
.estado-doc.error { color: #7f1d1d; }
.estado-doc small { display: block; font-weight: 400; color: var(--texto-suave); }

@media (max-width: 900px) { .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
    .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
    .rejilla-docs .ayuda { min-height: 0; }
}

/* ---- Botones ---- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .7rem 1.5rem; font-size: 1rem; font-weight: 700;
    border: 2px solid transparent; border-radius: 10px; cursor: pointer;
    text-decoration: none; font-family: inherit;
}
.boton-primario   { background: var(--guinda); color: #fff; }
.boton-primario:hover  { background: var(--guinda-claro); }
.boton-secundario { background: #fff; color: var(--guinda); border-color: var(--guinda); }
.boton-secundario:hover { background: #f6eef1; }
.boton-dorado     { background: var(--dorado); color: #3b2a10; }
.boton-dorado:hover { background: #cdab74; }
.boton-peligro    { background: var(--error); color: #fff; }
.boton:disabled   { opacity: .55; cursor: not-allowed; }
.boton-ancho      { width: 100%; }

/* ---- Avisos ---- */
.aviso { padding: 1rem 1.2rem; border-radius: var(--radio); margin: 1rem 0; border-left: 6px solid; }
.aviso-ok     { background: #e9f6ee; border-color: var(--ok);    color: #14532d; }
.aviso-error  { background: #fdecea; border-color: var(--error); color: #7f1d1d; }
.aviso-info   { background: #eef2fb; border-color: #2b5cb8;      color: #1b3a75; }
.aviso-cerrado{ background: #fff6e5; border-color: var(--aviso); color: #6b4a00; }
.aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ---- Confirmación de registro ---- */
.folio-caja {
    background: var(--crema); border: 3px dashed var(--guinda);
    border-radius: var(--radio); padding: 1.4rem; text-align: center; margin: 1.2rem 0;
}
.folio-caja small  { display: block; color: var(--guinda-osc); font-weight: 600; }
.folio-caja strong { display: block; font-size: 2rem; letter-spacing: 2px; color: var(--guinda); }

/* ---- Tablas del panel ---- */
.tabla-envoltura { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; background: #fff; font-size: .96rem; }
table.datos th, table.datos td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--borde); }
table.datos th { background: var(--guinda); color: #fff; font-weight: 700; white-space: nowrap; }
table.datos tbody tr:nth-child(even) { background: #fafafb; }
table.datos tbody tr:hover { background: #f4eef0; }

.etiqueta-si { background: var(--aviso); color: #fff; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.etiqueta-no { background: #5b616e;     color: #fff; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }

/* ---- Panel ---- */
.panel-encabezado {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; margin: 1.4rem 0 .6rem;
}
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.resumen {
    background: #fff; border: 1px solid var(--borde); border-left: 6px solid var(--guinda);
    border-radius: var(--radio); padding: 1rem 1.2rem;
}
.resumen small  { display: block; color: var(--texto-suave); font-size: .9rem; }
.resumen strong { display: block; font-size: 1.9rem; color: var(--guinda); line-height: 1.2; }

.lista-docs { list-style: none; margin: 0; padding: 0; }
.lista-docs li {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap;
}
.lista-docs li:last-child { border-bottom: 0; }

/* ---- Acceso institucional ---- */
.pantalla-acceso {
    min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.caja-acceso { width: 100%; max-width: 430px; }

/* ---- Pie ---- */
.pie {
    background: var(--guinda-osc); color: #e7dce0; margin-top: 3rem;
    padding: 1.8rem 0; font-size: .93rem;
}
.pie a { color: var(--crema); }
.pie-logos { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .9rem; }
/* El imagotipo dorado ya contrasta contra el guinda del pie: ponerle un
   recuadro blanco lo deslava. Los demás logos sí lo necesitan. */
.pie-logos img { height: 46px; }
.pie-logos img.sobre-blanco { background: #fff; padding: .3rem .5rem; border-radius: 8px; }

.solo-lectores { position: absolute; left: -9999px; }

/* ---- Comprobante imprimible ---- */
.comprobante-encabezado {
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 3px solid var(--dorado); padding-bottom: .8rem; margin-bottom: 1rem;
}
.comprobante-encabezado img { height: 46px; }
.comprobante-encabezado h2 { margin: 0; color: var(--guinda); }

table.datos-comprobante { width: 100%; border-collapse: collapse; margin: 1rem 0; }
table.datos-comprobante th, table.datos-comprobante td {
    padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--borde);
    vertical-align: top;
}
table.datos-comprobante th { width: 34%; color: var(--texto-suave); font-weight: 700; }

.pie-comprobante {
    font-size: .88rem; color: var(--texto-suave);
    border-top: 1px solid var(--borde); padding-top: .8rem; margin: 1rem 0 0;
}

.solo-impresion { display: none; }

/* Al imprimir queda solo el comprobante: sin menús, sin botones y sin la
   franja guinda, que gastaría medio cartucho de tinta. */
@media print {
    body { background: #fff; font-size: 12pt; }
    .no-imprimir, .barra-superior, .cinta-anio, .pie, .portada { display: none !important; }
    .solo-impresion { display: block; }
    main.ancho, main.ancho-angosto { max-width: 100%; padding: 0; }
    .tarjeta.comprobante {
        border: 2px solid #000; box-shadow: none; margin: 0; padding: 1.2rem;
        break-inside: avoid;
    }
    .folio-caja { border: 2px dashed #000; background: #fff; }
    .folio-caja strong { color: #000; }
    a[href]::after { content: ""; }
}

/* ---- Ver / ocultar contraseña ---- */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 3.2rem; }
.ver-clave {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    background: transparent; border: 0; border-radius: 8px;
    font-size: 1.15rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ver-clave:hover { background: #eceef2; }
.ver-clave:focus-visible { outline: 3px solid var(--dorado); outline-offset: 1px; }