/* =============================================================
   Inscripciones — Colegio COMFACESAR Rodolfo Campo Soto
   Paleta tomada del logotipo institucional y del sitio oficial.
   ============================================================= */

:root {
    /* Gama institucional */
    --amarillo:        #e9c22a;
    --naranja:         #e08421;
    --naranja-oscuro:  #cc6a16;
    --rojo:            #c1332f;
    --vino:            #9b1c2e;
    --vino-oscuro:     #7d1626;

    /* Neutros */
    --gris-texto:      #4a4a4c;
    --gris-medio:      #76777a;
    --gris-suave:      #9a9b9e;
    --borde:           #e2e0dc;
    --borde-fuerte:    #cfcdc8;
    --fondo:           #f7f5f2;
    --superficie:      #ffffff;
    --superficie-alt:  #fbfaf8;

    /* Estados */
    --exito:           #2e7d52;
    --exito-fondo:     #eaf5ee;
    --aviso:           #b07d12;
    --aviso-fondo:     #fdf6e3;
    --error:           #c1332f;
    --error-fondo:     #fcecea;
    --info:            #1f6f8b;
    --info-fondo:      #ecf5f8;

    /* Tipografía y medidas */
    --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --radio:        10px;
    --radio-chico:  6px;
    --sombra:       0 1px 2px rgba(31, 27, 20, .06), 0 4px 16px rgba(31, 27, 20, .05);
    --sombra-alta:  0 2px 6px rgba(31, 27, 20, .08), 0 12px 32px rgba(31, 27, 20, .08);
    --ancho:        980px;
}

/* ── Base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gris-texto);
    background: var(--fondo);
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; color: #37373a; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }

a { color: var(--naranja-oscuro); }
a:hover { color: var(--vino); }

/* ── Encabezado ────────────────────────────────────────────── */

.encabezado {
    background: var(--superficie);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--amarillo) 0%,
        var(--naranja) 35%,
        var(--rojo) 70%,
        var(--vino) 100%) 1;
    padding: 1.1rem 1rem;
}

.encabezado__interior {
    max-width: var(--ancho);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.encabezado__banner {
    max-width: 100%;
    height: auto;
    max-height: 72px;
}

/* ── Estructura ────────────────────────────────────────────── */

.contenedor {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 1.75rem 1rem 3rem;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.tarjeta--centrada { text-align: center; padding: 2.5rem 1.5rem; }

.titulo-pagina {
    text-align: center;
    margin-bottom: 1.5rem;
}

.titulo-pagina h1 { margin-bottom: .25rem; }

.titulo-pagina p {
    color: var(--gris-medio);
    margin: 0;
    font-size: .95rem;
}

/* ── Secciones del formulario ──────────────────────────────── */

.seccion { margin-bottom: 1.5rem; }

.seccion__titulo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .6rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--borde);
}

.seccion__numero {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vino);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seccion__titulo h2 { margin: 0; font-size: 1.1rem; }

/* ── Rejilla y campos ──────────────────────────────────────── */

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

.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-completa { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; }

.campo__etiqueta {
    font-size: .875rem;
    font-weight: 600;
    color: #55555a;
    margin-bottom: .35rem;
}

.campo__obligatorio { color: var(--rojo); margin-left: .15rem; }

.campo__ayuda {
    font-size: .8rem;
    color: var(--gris-suave);
    margin-top: .3rem;
}

.campo__error {
    font-size: .8rem;
    color: var(--error);
    margin-top: .3rem;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: .6rem .7rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--gris-texto);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(224, 132, 33, .16);
}

input:disabled, select:disabled, input[readonly] {
    background: var(--superficie-alt);
    color: var(--gris-medio);
    cursor: not-allowed;
}

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--error); }

.campo--error input:focus,
.campo--error select:focus,
.campo--error textarea:focus { box-shadow: 0 0 0 3px rgba(193, 51, 47, .14); }

/* La etiqueta en rojo: el borde solo no se ve al repasar la página. */
.campo--error .campo__etiqueta { color: var(--error); }

.campo--error input[type="file"] { border-color: var(--error); border-style: solid; }

input[type="file"] {
    width: 100%;
    padding: .55rem;
    font-size: .9rem;
    background: var(--superficie-alt);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-chico);
}

/* ── Casilla de verificación ───────────────────────────────── */

.casilla {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem;
    background: var(--superficie-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}

.casilla.campo--error {
    border-color: var(--error);
    background: rgba(193, 51, 47, .04);
}

.casilla input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .18rem;
    accent-color: var(--vino);
}

.casilla label {
    font-size: .875rem;
    line-height: 1.55;
    text-align: justify;
}

/* ── Botones ───────────────────────────────────────────────── */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1.5rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.boton:active { transform: translateY(1px); }

.boton--principal { background: var(--vino); color: #fff; }
.boton--principal:hover { background: var(--vino-oscuro); color: #fff; }

.boton--secundario {
    background: var(--superficie);
    color: var(--gris-texto);
    border-color: var(--borde-fuerte);
}
.boton--secundario:hover { background: var(--superficie-alt); color: var(--gris-texto); }

.boton--encuesta {
    background: var(--naranja);
    color: #fff;
}
.boton--encuesta:hover { background: var(--naranja-oscuro); color: #fff; }

.boton:disabled { opacity: .55; cursor: not-allowed; }

/* Resumen de la confirmacion: etiqueta y valor en dos columnas */
.resumen {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: .55rem 1.25rem;
    margin: 0;
}

.resumen dt {
    font-size: .875rem;
    font-weight: 600;
    color: #55555a;
}

.resumen dd {
    margin: 0;
    font-size: .95rem;
    color: var(--gris-texto);
}

@media (max-width: 640px) {
    .resumen { grid-template-columns: 1fr; gap: .15rem; }
    .resumen dd { margin-bottom: .6rem; }
}

.acciones {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--borde);
}

/* ── Avisos ────────────────────────────────────────────────── */

.aviso {
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radio-chico);
    border-left: 4px solid;
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.aviso p:last-child { margin-bottom: 0; }

.aviso--info    { background: var(--info-fondo);  border-color: var(--info);  color: #1b5668; }
.aviso--exito   { background: var(--exito-fondo); border-color: var(--exito); color: #255f41; }
.aviso--atencion{ background: var(--aviso-fondo); border-color: var(--aviso); color: #7a5709; }
.aviso--error   { background: var(--error-fondo); border-color: var(--error); color: #8e2622; }

.aviso__titulo { font-weight: 700; display: block; margin-bottom: .2rem; }

/* ── Estado vacío / páginas de corte ───────────────────────── */

.estado {
    text-align: center;
    padding: 3rem 1.5rem;
}

.estado__icono {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--aviso-fondo);
    color: var(--aviso);
}

.estado__icono--error { background: var(--error-fondo); color: var(--error); }
.estado__icono--info  { background: var(--info-fondo);  color: var(--info); }

.estado h1 { margin-bottom: .6rem; }

.estado p {
    color: var(--gris-medio);
    max-width: 52ch;
    margin: 0 auto 1rem;
}

.datos-periodo {
    display: inline-flex;
    flex-direction: column;
    gap: .35rem;
    margin: 1.25rem auto 0;
    padding: 1rem 1.5rem;
    background: var(--superficie-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-size: .9rem;
}

.datos-periodo strong { color: #37373a; }

/* ── Pie ───────────────────────────────────────────────────── */

.pie {
    border-top: 1px solid var(--borde);
    background: var(--superficie);
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: .82rem;
    color: var(--gris-suave);
}

.pie p { margin: 0 0 .25rem; }

/* ── Utilidades ────────────────────────────────────────────── */

.oculto { display: none !important; }
.centrado { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.insignia {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--superficie-alt);
    border: 1px solid var(--borde-fuerte);
    color: var(--gris-medio);
}

.insignia--categoria { background: var(--aviso-fondo); border-color: #e8d49a; color: #7a5709; }

/* ── Adaptación a móvil ────────────────────────────────────── */

@media (max-width: 760px) {
    .rejilla,
    .rejilla--3 { grid-template-columns: 1fr; }

    .contenedor { padding: 1.25rem .9rem 2.5rem; }
    .tarjeta { padding: 1.15rem; }
    .acciones { flex-direction: column-reverse; }
    .acciones .boton { width: 100%; }
    .encabezado__banner { max-height: 54px; }
    h1 { font-size: 1.35rem; }
}

@media (max-width: 400px) {
    body { font-size: 15px; }
}

/* ── Impresión ─────────────────────────────────────────────── */

@media print {
    body { background: #fff; }
    .acciones, .pie { display: none; }
    .tarjeta { box-shadow: none; border-color: #ccc; }
}

/* ── Clases que reemplazan estilos en línea ────────────────── */
/* La CSP no permite el atributo style="…" (los nonces no aplican a
   atributos de estilo), así que todo va en hojas de estilo. */

.aviso--bloque      { text-align: left; }
.aviso--con-margen  { margin: 1.25rem auto; max-width: 60ch; }
.aviso--separado    { margin-top: 2rem; }

.detalle-error      { display: block; word-break: break-word; }

.traza {
    margin-top: .75rem;
    font-size: .72rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

.resultado-categoria { padding-top: .45rem; }

.nota-seccion {
    margin-top: -.6rem;
    margin-bottom: 1rem;
}