/* =====================================================================
   PORTAL DE MATRICULA - estilos propios
   Se apoya en la rejilla de Bootstrap 4 del panel (row / col-md-*).
   ===================================================================== */

:root {
    --mat-azul: #2f6fb0;         /* derivado del azul del panel (#407BB9), con mas contraste */
    --mat-azul-oscuro: #1d4b7c;
    --mat-azul-suave: #e8f1fa;
    --mat-tinta: #17253a;
    --mat-gris: #5b6b80;
    --mat-linea: #d9e2ec;
    --mat-fondo: #f3f6fa;
    --mat-ok: #1c7c4a;
    --mat-ok-suave: #e4f5eb;
    --mat-error: #b3261e;
    --mat-error-suave: #fdeceb;
    --mat-aviso: #8a5a00;
    --mat-aviso-suave: #fff4d6;
    --mat-radio: 16px;
    --mat-sombra: 0 1px 2px rgba(23, 37, 58, .06), 0 8px 24px rgba(23, 37, 58, .06);
}

body {
    background: var(--mat-fondo);
    color: var(--mat-tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--mat-azul); }
a:hover { color: var(--mat-azul-oscuro); }

:focus-visible {
    outline: 3px solid #ffb703;
    outline-offset: 2px;
}

.mat-saltar {
    position: absolute;
    left: -999px;
    top: 8px;
    background: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 10;
}
.mat-saltar:focus { left: 8px; }

.mat-icono { flex: none; vertical-align: -4px; }

/* ---------- Barra superior ---------- */
.mat-barra {
    background: #fff;
    border-bottom: 1px solid var(--mat-linea);
}
.mat-barra__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
}
.mat-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--mat-tinta);
    text-decoration: none;
    line-height: 1.2;
}
.mat-marca:hover { color: var(--mat-tinta); text-decoration: none; }
.mat-marca strong { display: block; font-size: 1rem; }
.mat-marca small { color: var(--mat-gris); }
.mat-marca__icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mat-azul);
    color: #fff;
}
.mat-barra__usuario { display: flex; align-items: center; gap: 12px; margin: 0; }
.mat-barra__hola { color: var(--mat-gris); font-size: .925rem; }

/* ---------- Estructura ---------- */
.mat-main { flex: 1; padding: 32px 0 48px; }
.mat-contenedor { max-width: 720px; }
.mat-contenedor--ancho { max-width: 1040px; }

.mat-pie {
    padding: 20px 0;
    color: var(--mat-gris);
    font-size: .85rem;
    text-align: center;
    border-top: 1px solid var(--mat-linea);
    background: #fff;
}

.mat-tarjeta {
    background: #fff;
    border: 1px solid var(--mat-linea);
    border-radius: var(--mat-radio);
    box-shadow: var(--mat-sombra);
    padding: 28px;
    margin-bottom: 24px;
}
.mat-tarjeta--angosta { max-width: 460px; margin-left: auto; margin-right: auto; }
.mat-centro { text-align: center; }

.mat-titulo { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.mat-subtitulo { font-size: 1.1rem; font-weight: 700; margin: 28px 0 12px; }
.mat-sub { color: var(--mat-gris); margin-bottom: 22px; }
.mat-nota { color: var(--mat-gris); font-size: .875rem; margin: 12px 0 0; }
.mat-enlaces { text-align: center; margin: 18px 0 0; font-size: .95rem; }
.mat-enlaces span { margin: 0 6px; color: var(--mat-linea); }

/* ---------- Botones ---------- */
.mat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.mat-btn:hover { text-decoration: none; }
.mat-btn:active { transform: translateY(1px); }
.mat-btn[disabled] { opacity: .55; cursor: not-allowed; }
.mat-btn--primario { background: var(--mat-azul); color: #fff; }
.mat-btn--primario:hover { background: var(--mat-azul-oscuro); color: #fff; }
.mat-btn--secundario { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-btn--secundario:hover { background: #d6e6f6; color: var(--mat-azul-oscuro); }
.mat-btn--fantasma { background: transparent; color: var(--mat-azul-oscuro); border-color: var(--mat-linea); }
.mat-btn--fantasma:hover { background: #fff; border-color: var(--mat-azul); }
.mat-btn--bloque { width: 100%; }
.mat-btn--chico { min-height: 40px; padding: 6px 14px; font-size: .925rem; }

/* ---------- Formularios ---------- */
.mat-campo { margin-bottom: 18px; }
.mat-campo label { font-weight: 600; font-size: .925rem; margin-bottom: 6px; }
.mat-input.form-control {
    height: 48px;
    border-radius: 12px;
    border-color: #b8c4d2;
    font-size: 1rem;
    color: var(--mat-tinta);
}
.mat-input.form-control:focus {
    border-color: var(--mat-azul);
    box-shadow: 0 0 0 3px rgba(47, 111, 176, .2);
}
.mat-input.is-invalid { border-color: var(--mat-error); }
.mat-ayuda { display: block; color: var(--mat-gris); margin-top: 6px; }
.mat-error { color: var(--mat-error); font-size: .875rem; font-weight: 600; margin-top: 6px; }

/* Lista con buscador (departamento, ciudad): matricula.js, data-buscable */
.mat-combo { position: relative; }
.mat-combo select[hidden] { display: none !important; }
.mat-combo__lista {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--mat-linea);
    border-radius: 12px;
    box-shadow: var(--mat-sombra);
}
.mat-combo__lista li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mat-combo__lista li:hover,
.mat-combo__lista li[aria-selected="true"] { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-combo__lista .mat-combo__vacio { color: var(--mat-gris); cursor: default; }

.mat-clave { position: relative; }
.mat-clave .mat-input { padding-right: 64px; }
.mat-clave__ver {
    position: absolute;
    right: 6px;
    top: 6px;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mat-azul-oscuro);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
}
.mat-clave__ver:hover { background: var(--mat-azul-suave); }

.mat-medidor { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; min-height: 20px; }
.mat-medidor__barra {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--mat-medidor-color, var(--mat-linea)) var(--mat-medidor-ancho, 0%), var(--mat-linea) 0);
}
.mat-medidor__txt { font-size: .8rem; color: var(--mat-gris); min-width: 76px; text-align: right; }
.mat-medidor[data-nivel="1"] { --mat-medidor-ancho: 25%; --mat-medidor-color: var(--mat-error); }
.mat-medidor[data-nivel="2"] { --mat-medidor-ancho: 50%; --mat-medidor-color: #d98a00; }
.mat-medidor[data-nivel="3"] { --mat-medidor-ancho: 75%; --mat-medidor-color: #4a9b3f; }
.mat-medidor[data-nivel="4"] { --mat-medidor-ancho: 100%; --mat-medidor-color: var(--mat-ok); }

.mat-check { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 20px; }
.mat-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--mat-azul); }
.mat-check label { margin: 0; font-size: .925rem; color: var(--mat-gris); }

/* Campo trampa para robots: fuera de la vista y del foco. */
.mat-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Alertas e insignias ---------- */
.mat-alerta {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .95rem;
    border: 1px solid transparent;
}
.mat-alerta--error { background: var(--mat-error-suave); color: var(--mat-error); border-color: #f5c6c2; }
.mat-alerta--ok { background: var(--mat-ok-suave); color: var(--mat-ok); border-color: #bfe5cd; }
.mat-alerta--info { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); border-color: #c9def3; }

.mat-insignia {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.mat-insignia--neutro { background: #eef1f5; color: var(--mat-gris); }
.mat-insignia--aviso { background: var(--mat-aviso-suave); color: var(--mat-aviso); }
.mat-insignia--info { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-insignia--ok { background: var(--mat-ok-suave); color: var(--mat-ok); }
.mat-insignia--error { background: var(--mat-error-suave); color: var(--mat-error); }

/* ---------- Indicador de pasos ---------- */
.mat-pasos {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    counter-reset: paso;
}
.mat-pasos__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    color: var(--mat-gris);
    font-size: .85rem;
    text-align: center;
}
.mat-pasos__item + .mat-pasos__item::before {
    content: "";
    position: absolute;
    top: 17px;
    right: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--mat-linea);
}
.mat-pasos__item.is-hecho::before,
.mat-pasos__item.is-actual::before { background: var(--mat-azul); }
.mat-pasos__num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mat-linea);
    font-weight: 700;
}
.mat-pasos__item.is-actual { color: var(--mat-tinta); font-weight: 700; }
.mat-pasos__item.is-actual .mat-pasos__num { border-color: var(--mat-azul); color: var(--mat-azul); box-shadow: 0 0 0 4px var(--mat-azul-suave); }
.mat-pasos__item.is-hecho .mat-pasos__num { background: var(--mat-azul); border-color: var(--mat-azul); color: #fff; }

/* ---------- Inicio ---------- */
.mat-hero { text-align: center; max-width: 680px; margin: 16px auto 36px; }
.mat-etiqueta {
    display: inline-block;
    background: var(--mat-azul-suave);
    color: var(--mat-azul-oscuro);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.mat-hero__titulo { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px; }
.mat-hero__texto { color: var(--mat-gris); font-size: 1.1rem; margin: 0; }

.mat-opcion { height: calc(100% - 24px); display: flex; flex-direction: column; }
.mat-opcion h2, .mat-opcion h3 { font-size: 1.25rem; font-weight: 700; margin: 14px 0 6px; }
.mat-opcion--destacada { border-color: var(--mat-azul); box-shadow: 0 0 0 3px var(--mat-azul-suave), var(--mat-sombra); }

/* ---------- Pagina de aterrizaje (index.php) ---------- */
.mat-portada {
    --mat-portada-fondo: #0f2747;
    --mat-acento: #ffb703;          /* el mismo amarillo del foco */
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 48px;
    margin-bottom: 56px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(64, 123, 185, .55) 0%, rgba(64, 123, 185, 0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(255, 183, 3, .16) 0%, rgba(255, 183, 3, 0) 50%),
        var(--mat-portada-fondo);
    box-shadow: 0 30px 60px -30px rgba(15, 39, 71, .55);
}
/* Trama sutil de puntos: textura sin imagenes (la CSP solo admite recursos propios). */
.mat-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
    pointer-events: none;
}
.mat-portada > * { position: relative; }
.mat-portada__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 18px;
}
.mat-portada__etiqueta .mat-icono { color: var(--mat-acento); }
.mat-portada__titulo {
    font-size: clamp(2rem, 1.3rem + 2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin-bottom: 18px;
}
.mat-portada__titulo span { display: block; color: var(--mat-acento); }
.mat-portada__lead { font-size: 1.1rem; color: rgba(255, 255, 255, .82); max-width: 34em; margin-bottom: 28px; }
.mat-portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 32px; }
.mat-btn--claro { background: var(--mat-acento); color: #1b1300; padding-left: 26px; padding-right: 26px; }
.mat-btn--claro:hover { background: #ffc933; color: #1b1300; }
.mat-btn--claro .mat-icono { transition: transform .2s ease; }
.mat-btn--claro:hover .mat-icono { transform: translateX(3px); }
.mat-portada__enlace { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mat-portada__enlace:hover { color: var(--mat-acento); }
.mat-portada__datos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
}
.mat-portada__datos strong { display: block; color: #fff; font-size: 1.35rem; line-height: 1.2; }
.mat-portada__video { margin: 0; }
.mat-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 48px -12px rgba(0, 0, 0, .55);
}
.mat-video iframe, .mat-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mat-portada__video figcaption { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: rgba(255, 255, 255, .75); font-size: .9rem; }

.mat-seccion { margin-bottom: 56px; }
.mat-seccion__titulo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.mat-seccion__sub { color: var(--mat-gris); margin: -12px 0 22px; }

/* Ruta de 5 pasos: una linea que los une en pantallas anchas. */
.mat-ruta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    position: relative;
}
.mat-ruta::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 10%;
    right: 10%;
    border-top: 2px dashed var(--mat-linea);
}
.mat-ruta__paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.mat-ruta__num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--mat-azul);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 0 0 6px var(--mat-fondo);
    margin-bottom: 6px;
}
.mat-ruta__paso:last-child .mat-ruta__num { background: var(--mat-ok); }
.mat-ruta__paso strong { font-size: 1rem; }
.mat-ruta__paso span:last-child { color: var(--mat-gris); font-size: .875rem; line-height: 1.45; }

.mat-requisito {
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--mat-linea);
    border-radius: var(--mat-radio);
    box-shadow: var(--mat-sombra);
}
.mat-requisito h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.mat-requisito--mano { background: var(--mat-azul-suave); border-color: #cfe0f2; box-shadow: none; }
.mat-requisito__nota { color: var(--mat-gris); font-size: .875rem; margin-bottom: 14px; }
.mat-requisito__nota:last-child { margin: 14px 0 0; }
.mat-lista-check { list-style: none; padding: 0; margin: 0; }
.mat-lista-check li { display: flex; gap: 10px; padding: 7px 0; }
.mat-lista-check .mat-icono { color: var(--mat-ok); margin-top: 3px; vertical-align: 0; }
.mat-lista-docs { list-style: none; padding: 0; margin: 0; counter-reset: doc; }
.mat-lista-docs li {
    counter-increment: doc;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 9px 0 9px 38px;
    position: relative;
    border-top: 1px solid var(--mat-linea);
}
.mat-lista-docs li:first-child { border-top: 0; }
.mat-lista-docs li::before {
    content: counter(doc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 9px;
    font-weight: 800;
    font-size: .85rem;
    color: var(--mat-azul);
}
.mat-lista-docs small { color: var(--mat-gris); }

/* Tarifas del anio: tabla en escritorio, tarjetas en celular. */
.mat-tarifas__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 20px; }
.mat-tarifas__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: var(--mat-ok-suave);
    color: #14532d;
    font-size: .9rem;
}
.mat-tarifas__chips strong {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mat-ok);
    color: #fff;
    font-size: .85rem;
}
.mat-tarifas {
    background: #fff;
    border: 1px solid var(--mat-linea);
    border-radius: 20px;
    box-shadow: var(--mat-sombra);
    overflow: hidden;
}
.mat-tarifas__tabla { width: 100%; border-collapse: collapse; }
.mat-tarifas__tabla thead th {
    background: #0f2747;
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 14px 18px;
    text-align: left;
    vertical-align: bottom;
}
.mat-tarifas__tabla thead th:last-child { background: #16345c; color: #ffb703; }
.mat-tarifas__tabla tbody th, .mat-tarifas__tabla td { padding: 18px; vertical-align: top; border-top: 1px solid var(--mat-linea); }
.mat-tarifas__tabla tbody tr:first-child > * { border-top: 0; }
.mat-tarifas__tabla tbody tr:hover > * { background: #f8fbfe; }
.mat-tarifas__tabla tbody th { font-weight: 800; color: var(--mat-azul-oscuro); width: 22%; }
.mat-tarifas__tabla tbody th span { display: inline-block; padding-left: 12px; border-left: 4px solid var(--mat-azul); font-size: 1.05rem; line-height: 1.3; }
.mat-tarifas__tabla tbody tr:nth-child(2) th span { border-color: #4a9b3f; }
.mat-tarifas__tabla tbody tr:nth-child(3) th span { border-color: #ffb703; }
.mat-tarifas__tabla tbody tr:nth-child(4) th span { border-color: #c2410c; }
.mat-tarifas__tabla td strong { display: block; font-size: 1.08rem; color: var(--mat-tinta); }
.mat-tarifas__tabla td del { display: block; color: var(--mat-gris); font-size: .85rem; }
.mat-tarifas__tabla td small { display: block; color: var(--mat-gris); font-size: .8rem; line-height: 1.4; }
.mat-tarifas__tabla .mat-tarifas__ahorro { color: var(--mat-ok); font-weight: 600; }
.mat-tarifas__tabla td.mat-tarifas__total { background: #fffaeb; }
.mat-tarifas__tabla tbody tr:hover td.mat-tarifas__total { background: #fff4d1; }
.mat-tarifas__tabla .mat-tarifas__total strong { font-size: 1.3rem; color: var(--mat-azul-oscuro); }
.mat-tarifas__tabla .mat-tarifas__total small { color: var(--mat-ok); font-weight: 700; }
.mat-tarifas__nota { color: var(--mat-gris); font-size: .875rem; margin: 14px 0 0; }

@media (max-width: 767.98px) {
    .mat-tarifas { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .mat-tarifas__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mat-tarifas__tabla, .mat-tarifas__tabla tbody, .mat-tarifas__tabla tr { display: block; }
    .mat-tarifas__tabla tr {
        background: #fff;
        border: 1px solid var(--mat-linea);
        border-radius: 16px;
        box-shadow: var(--mat-sombra);
        margin-bottom: 14px;
        overflow: hidden;
    }
    .mat-tarifas__tabla tbody th, .mat-tarifas__tabla td {
        display: grid;
        grid-template-columns: 42% 1fr;
        gap: 2px 10px;
        width: auto;
        padding: 12px 16px;
        border-top: 1px solid var(--mat-linea);
    }
    .mat-tarifas__tabla tbody th { display: block; background: var(--mat-azul-suave); border-top: 0; font-size: 1.05rem; }
    .mat-tarifas__tabla td::before {
        content: attr(data-etiqueta);
        color: var(--mat-gris);
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding-top: 3px;
    }
    .mat-tarifas__tabla td > * { grid-column: 2; }
    .mat-tarifas__tabla tbody tr:hover > * { background: inherit; }
}

@media (max-width: 991.98px) {
    .mat-portada { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
    .mat-ruta { grid-template-columns: 1fr; gap: 0; }
    .mat-ruta::before { top: 23px; bottom: 23px; left: 22px; right: auto; border-top: 0; border-left: 2px dashed var(--mat-linea); }
    .mat-ruta__paso { display: grid; grid-template-columns: 46px 1fr; align-items: start; text-align: left; column-gap: 16px; row-gap: 2px; padding-bottom: 18px; }
    .mat-ruta__num { grid-row: span 2; margin: 0; }
    .mat-ruta__paso strong { padding-top: 2px; }
}
@media (max-width: 575.98px) {
    .mat-portada { padding: 28px 18px; border-radius: 20px; margin-bottom: 40px; }
    .mat-portada__lead { font-size: 1rem; }
    .mat-portada__acciones .mat-btn { width: 100%; }
    .mat-requisito { padding: 20px 16px; }
    .mat-seccion { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .mat-btn--claro .mat-icono { transition: none; }
}
.mat-opcion p { color: var(--mat-gris); flex: 1; }
.mat-opcion__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--mat-azul-suave);
    color: var(--mat-azul-oscuro);
}

.mat-garantias {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    color: var(--mat-gris);
    font-size: .925rem;
}
.mat-garantias .mat-icono { color: var(--mat-ok); margin-right: 4px; }

/* ---------- Registro ---------- */
.mat-buscador { display: flex; gap: 10px; }
.mat-buscador .mat-input { flex: 1; }

.mat-resultados { list-style: none; padding: 0; margin: 0; }
.mat-resultados li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--mat-linea);
    border-radius: 12px;
    margin-bottom: 10px;
}
.mat-resultados strong { display: block; letter-spacing: .03em; }
.mat-resultados span { color: var(--mat-gris); font-size: .875rem; }
.mat-resultados form { margin: 0; }

.mat-alternativas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--mat-linea);
}
.mat-alternativas form { margin: 0; flex: 1 1 260px; }
.mat-alternativas .mat-btn { width: 100%; }

.mat-radios { border: 0; padding: 0; margin: 0 0 22px; }
.mat-radio { position: relative; margin-bottom: 10px; }
.mat-radio input { position: absolute; top: 20px; left: 16px; width: 20px; height: 20px; accent-color: var(--mat-azul); }
.mat-radio label {
    display: block;
    margin: 0;
    padding: 14px 16px 14px 50px;
    border: 2px solid var(--mat-linea);
    border-radius: 12px;
    cursor: pointer;
}
.mat-radio label strong { display: block; }
.mat-radio label span { color: var(--mat-gris); font-size: .875rem; }
.mat-radio input:checked + label { border-color: var(--mat-azul); background: var(--mat-azul-suave); }
.mat-radio input:focus-visible + label { outline: 3px solid #ffb703; outline-offset: 2px; }

.mat-volver { display: flex; justify-content: space-between; gap: 10px; margin: 0; }

/* ---------- Panel ---------- */
.mat-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.mat-hijo { height: calc(100% - 24px); display: flex; flex-direction: column; align-items: flex-start; }
.mat-hijo h2 { font-size: 1.15rem; font-weight: 700; margin: 12px 0 4px; }
.mat-hijo__curso { color: var(--mat-gris); flex: 1; margin-bottom: 16px; }

/* ---------- Pantallas pequenas ---------- */
@media (max-width: 575.98px) {
    .mat-main { padding: 20px 0 32px; }
    .mat-tarjeta { padding: 20px 16px; border-radius: 14px; }
    .mat-titulo { font-size: 1.35rem; }
    .mat-hero__titulo { font-size: 1.7rem; }
    .mat-hero__texto { font-size: 1rem; }
    .mat-buscador { flex-direction: column; }
    .mat-pasos__txt { font-size: .72rem; }
    .mat-barra__hola { display: none; }
    .mat-resultados li { flex-direction: column; align-items: stretch; }
    .mat-resultados .mat-btn { width: 100%; }
    .mat-cabecera .mat-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mat-btn { transition: none; }
}

/* ---------- Formulario de matricula por pasos ---------- */
.mat-subtitulo--primero { margin-top: 4px; }
.mat-edad { color: var(--mat-azul-oscuro); font-weight: 600; font-size: .9rem; margin: -10px 0 18px; min-height: 1.3em; }
.mat-nota--caja {
    background: var(--mat-fondo);
    border: 1px solid var(--mat-linea);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0 0;
    align-self: stretch;
}
.mat-acciones {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--mat-linea);
}
.mat-cabecera .mat-etiqueta { margin-bottom: 8px; }
.mat-hijo__accion { margin: 0; align-self: stretch; }
.mat-hijo--nuevo { border-style: dashed; box-shadow: none; background: transparent; }

/* ---------- Costos del acudiente ---------- */
/* Acceso destacado en el panel: se distingue de las tarjetas de hijos. */
.mat-banner-costos { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--mat-azul-oscuro), var(--mat-azul)); color: #fff; border-radius: var(--mat-radio); padding: 18px 22px; margin-bottom: 24px; box-shadow: var(--mat-sombra); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.mat-banner-costos:hover, .mat-banner-costos:focus-visible { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 37, 58, .18); }
.mat-banner-costos__icono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #ffd166; color: var(--mat-azul-oscuro); font-size: 1.6rem; font-weight: 800; }
.mat-banner-costos__texto { flex: 1; min-width: 0; }
.mat-banner-costos__texto strong { display: block; font-size: 1.15rem; }
.mat-banner-costos__texto b { font-size: 1.1rem; white-space: nowrap; }
.mat-banner-costos__btn { flex: none; background: #fff; color: var(--mat-azul-oscuro); }
.mat-banner-costos:hover .mat-banner-costos__btn { background: #ffd166; color: var(--mat-azul-oscuro); }
@media (max-width: 575.98px) {
    .mat-banner-costos { flex-wrap: wrap; padding: 16px; }
    .mat-banner-costos__btn { width: 100%; justify-content: center; }
}
/* Costo del anio dentro de la tarjeta de cada hijo. */
.mat-hijo__costo { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); text-decoration: none; }
.mat-hijo__costo:hover { background: #d6e6f6; color: var(--mat-azul-oscuro); text-decoration: none; }
.mat-hijo__costo span { font-size: .85rem; }
.mat-hijo__costo span::after { content: " ›"; }
.mat-costo-hijo { background: #fff; border: 1px solid var(--mat-linea); border-top: 5px solid var(--mat-azul); border-radius: var(--mat-radio); box-shadow: var(--mat-sombra); padding: 18px 18px 0; margin-bottom: 24px; display: flex; flex-direction: column; height: calc(100% - 24px); }
.mat-costo-hijo header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.mat-costo-hijo h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.mat-costo-hijo dl { margin: 0; flex: 1; }
.mat-costo-hijo dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--mat-linea); }
.mat-costo-hijo dt { font-weight: 500; color: var(--mat-gris); }
.mat-costo-hijo dt small, .mat-costo-hijo dd small { display: block; font-weight: 400; font-size: .78rem; }
.mat-costo-hijo dd { margin: 0; text-align: right; white-space: nowrap; }
.mat-costo-hijo dd small { display: inline; color: var(--mat-gris); }
.mat-costo-hijo del { color: var(--mat-gris); font-size: .85rem; margin-right: 4px; }
.mat-costo-hijo__opcion dt { padding-left: 12px; font-size: .9rem; }
.mat-costo-hijo footer { margin: 12px -18px 0; padding: 14px 18px; background: var(--mat-azul-suave); border-radius: 0 0 var(--mat-radio) var(--mat-radio); }
.mat-costo-hijo footer span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mat-azul-oscuro); font-weight: 600; }
.mat-costo-hijo footer strong { font-size: 1.5rem; color: var(--mat-azul-oscuro); }
.mat-costo-hijo footer small { display: block; color: var(--mat-ok); font-weight: 600; }
.mat-costos-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; background: var(--mat-azul-oscuro); color: #fff; border-radius: var(--mat-radio); padding: 20px 24px; margin-bottom: 24px; }
.mat-costos-total__cifra span { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.mat-costos-total__cifra strong { display: block; font-size: 2rem; line-height: 1.15; }
.mat-costos-total__cifra small { display: block; color: #9be3b8; font-weight: 600; }
.mat-costos-total dl { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.mat-costos-total dt { font-weight: 400; font-size: .85rem; opacity: .85; }
.mat-costos-total dd { margin: 0; font-size: 1.2rem; font-weight: 700; }
select.mat-input:disabled { background: var(--mat-fondo); color: var(--mat-gris); }

@media (max-width: 767.98px) {
    /* Con siete pasos solo cabe el nombre del paso actual. */
    .mat-pasos--largo .mat-pasos__item:not(.is-actual) .mat-pasos__txt { display: none; }
    .mat-pasos--largo .mat-pasos__num { width: 30px; height: 30px; font-size: .85rem; }
    .mat-pasos--largo .mat-pasos__item + .mat-pasos__item::before { top: 14px; right: calc(50% + 18px); width: calc(100% - 36px); }
}
@media (max-width: 575.98px) {
    .mat-acciones { flex-direction: column-reverse; }
    .mat-acciones .mat-btn { width: 100%; }
}

/* Datos que el sistema pone solo (no se preguntan). */
.mat-resumen {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.mat-resumen li {
    flex: 1 1 180px;
    background: var(--mat-fondo);
    border: 1px solid var(--mat-linea);
    border-radius: 12px;
    padding: 10px 14px;
}
.mat-resumen span { display: block; color: var(--mat-gris); font-size: .8rem; }
.mat-resumen strong { font-size: 1rem; }

/* Aviso en vivo de si el dato cumple la regla. */
.mat-estado { font-size: .85rem; font-weight: 600; margin-top: 6px; min-height: 1.2em; }
.mat-estado.is-ok { color: var(--mat-ok); }
.mat-estado.is-mal { color: var(--mat-aviso); }
[hidden] { display: none !important; }

/* Paso de familia. */
.mat-bloque { border: 1px solid var(--mat-linea); border-radius: 14px; padding: 18px 18px 2px; margin: 0 0 18px; min-width: 0; }
.mat-bloque legend { width: auto; padding: 0 8px; margin: 0; font-size: 1.05rem; font-weight: 700; }
.mat-bloque legend .mat-insignia { margin-left: 6px; vertical-align: middle; }
.mat-radios--fila { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mat-radios--fila legend { width: 100%; }
.mat-radios--fila .mat-radio { flex: 1 1 170px; margin: 0; }

/* Paso de documentos. */
.mat-docs { list-style: none; padding: 0; margin: 0; }
.mat-doc { border: 1px solid var(--mat-linea); border-left: 4px solid var(--mat-linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; scroll-margin-top: 16px; }
.mat-doc__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mat-doc__ayuda { color: var(--mat-gris); font-size: .875rem; margin: 2px 0 10px; }
.mat-doc__archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--mat-fondo); border-radius: 10px; padding: 6px 6px 6px 12px; margin-bottom: 8px; }
.mat-doc__archivo a { flex: 1 1 160px; font-weight: 600; overflow-wrap: anywhere; }
.mat-doc__archivo span { color: var(--mat-gris); font-size: .8rem; }
.mat-doc__archivo form { margin: 0; }
.mat-doc__subir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.mat-doc__subir input[type=file] { flex: 1 1 200px; min-width: 0; font-size: .9rem; }

/* Paso final: resumen de la solicitud. */
.mat-resumen-sec { border: 1px solid var(--mat-linea); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.mat-resumen-sec__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mat-resumen-sec h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.mat-resumen-sec__cabeza a { font-weight: 600; font-size: .9rem; }
.mat-resumen-sec dl { margin: 0; }
.mat-resumen-sec dl > div { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--mat-fondo); }
.mat-resumen-sec dt { flex: 0 0 38%; color: var(--mat-gris); font-weight: 400; font-size: .9rem; }
.mat-resumen-sec dd { flex: 1; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mat-pendientes { margin: 0 0 20px; padding-left: 20px; }
.mat-pendientes li { margin-bottom: 4px; }
.mat-aceptar { border: 1px solid var(--mat-linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mat-aceptar .mat-check { margin: 0; }
.mat-aceptar label { color: var(--mat-tinta); }
@media (max-width: 575.98px) {
    .mat-resumen-sec dl > div { flex-direction: column; gap: 0; }
    .mat-resumen-sec dt { flex: none; }
}

.mat-acciones__grupo { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .mat-acciones__grupo { flex-direction: column-reverse; width: 100%; }
}

/* Lado del colegio. */
.mat-pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mat-pestanas a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--mat-linea); background: #fff; color: var(--mat-tinta); font-weight: 600; font-size: .925rem; text-decoration: none; }
.mat-pestanas a:hover { border-color: var(--mat-azul); }
.mat-pestanas a.is-activa { background: var(--mat-azul-oscuro); border-color: var(--mat-azul-oscuro); color: #fff; }
.mat-tabla-caja { overflow-x: auto; }
.mat-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mat-tabla th { text-align: left; color: var(--mat-gris); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 2px solid var(--mat-linea); white-space: nowrap; }
.mat-tabla td { padding: 12px 10px; border-bottom: 1px solid var(--mat-linea); vertical-align: middle; }
.mat-tabla tr:last-child td { border-bottom: 0; }
.mat-tabla small { color: var(--mat-gris); }
/* Costos del colegio: muchas columnas con campos; en movil se desplaza a lo ancho. */
.mat-tabla--costos input, .mat-tabla--costos select { min-width: 130px; }
.mat-tabla--costos td { padding: 8px 6px; }
/* Tabla con desplegables: en movil cada fila se apila para que el nombre se lea. */
.mat-tabla--form select { min-width: 220px; }
@media (max-width: 575.98px) {
    .mat-tabla--form thead { display: none; }
    .mat-tabla--form tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--mat-linea); }
    .mat-tabla--form tr:last-child { border-bottom: 0; }
    .mat-tabla--form td { display: block; padding: 2px 0; border-bottom: 0; }
    .mat-tabla--form td:nth-child(2)::before { content: "Horas: "; color: var(--mat-gris); }
    .mat-tabla--form select { min-width: 0; width: 100%; margin-top: 6px; }
}
.mat-cambios { border-left: 4px solid #d98a00; background: var(--mat-aviso-suave); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.mat-cambios dl { margin: 0; }
.mat-cambios dl > div { display: flex; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.mat-cambios dt { flex: 0 0 200px; color: var(--mat-gris); font-weight: 400; }
.mat-cambios dd { margin: 0; overflow-wrap: anywhere; }
.mat-cambios del { color: var(--mat-error); }
.mat-input--area.form-control { height: auto; min-height: 96px; }
.mat-acciones--sola { margin: 0; padding: 0; border: 0; align-items: center; }

/* Paso 2 del registro: formas de verificarse (acordeon nativo) */
.mat-via { border: 1px solid var(--mat-linea); border-radius: 12px; margin: 0 0 12px; background: #fff; }
.mat-via > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--mat-azul-oscuro); list-style-position: inside; }
.mat-via[open] > summary { border-bottom: 1px solid var(--mat-linea); background: var(--mat-azul-suave); border-radius: 12px 12px 0 0; }
.mat-via > form { padding: 16px; }

/* Panel: quitar un borrador de aspirante nuevo (pide confirmar) */
.mat-btn--peligro { background: var(--mat-error); color: #fff; border-color: var(--mat-error); }
.mat-btn--peligro:hover, .mat-btn--peligro:focus { background: #8f1e18; color: #fff; }
.mat-quitar { margin-top: 12px; font-size: .875rem; }
.mat-quitar > summary { cursor: pointer; color: var(--mat-gris); text-decoration: underline; text-align: center; }
.mat-quitar[open] > summary { color: var(--mat-error); }
.mat-quitar p { color: var(--mat-gris); margin: 8px 0; }
.mat-quitar form { margin: 0; }

/* Revision de documentos (estado por archivo) */
.mat-doc__revision { margin-bottom: 10px; }
.mat-doc__decision { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 4px; }
.mat-doc__decision .mat-input { flex: 1 1 220px; min-height: 36px; padding: 6px 10px; }

.mat-doc__decision .mat-estado { flex-basis: 100%; margin-top: 0; }

/* Estado de cada documento: el color dice de un vistazo que falta.
   P por revisar (azul), A aprobado (verde), R rechazado (rojo),
   falta = obligatorio sin archivo (ambar). */
.mat-doc--P { border-left-color: var(--mat-azul); }
.mat-doc--A { border-left-color: var(--mat-ok); }
.mat-doc--R { border-left-color: var(--mat-error); border-color: #f5c6c2; background: #fffafa; }
.mat-doc--falta { border-left-color: #d98a00; }
.mat-doc--R .mat-doc__cabeza strong { color: var(--mat-error); }
.mat-doc__archivo--A { background: var(--mat-ok-suave); }
.mat-doc__archivo--R { background: var(--mat-error-suave); border: 1px solid #f5c6c2; }
.mat-doc__archivo--R .mat-insignia { background: var(--mat-error); color: #fff; }
.mat-doc__archivo--A .mat-insignia { background: var(--mat-ok); color: #fff; }
.mat-doc__motivo { flex-basis: 100%; background: #fff; border: 1px solid #f5c6c2; border-left: 4px solid var(--mat-error); border-radius: 8px; padding: 8px 12px; margin: 4px 6px 4px 0; color: var(--mat-error); font-size: .9rem; }
.mat-doc__motivo strong { margin-right: 4px; }

/* Colegio: pestanas Documentos / Formulario sin JavaScript (radios + CSS). */
.mat-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.mat-tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin: 0 6px 0 0; border: 1px solid var(--mat-linea); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--mat-fondo); color: var(--mat-gris); font-weight: 700; cursor: pointer; }
.mat-tabs__tab:hover { color: var(--mat-azul-oscuro); }
.mat-tabs__radio:checked + .mat-tabs__tab { background: #fff; color: var(--mat-azul-oscuro); box-shadow: inset 0 3px 0 var(--mat-azul); }
.mat-tabs__radio:focus-visible + .mat-tabs__tab { outline: 3px solid var(--mat-azul); outline-offset: 2px; }
.mat-tabs__panel { display: none; border-top-left-radius: 0; }
#vista-docs:checked ~ .mat-tabs__panel--docs,
#vista-form:checked ~ .mat-tabs__panel--form { display: block; }
/* Formulario en dos columnas para que no sea tan largo. */
.mat-resumen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.mat-resumen-grid .mat-resumen-sec { margin: 0; }
@media (max-width: 480px) {
    .mat-tabs__tab { padding: 8px 12px; font-size: .9rem; }
    .mat-resumen-grid { grid-template-columns: 1fr; }
}

/* Colegio: obligatorio frente a opcional */
.mat-docs__grupo { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 10px; }
.mat-docs__grupo span { font-size: .8rem; font-weight: 600; color: var(--mat-gris); }
.mat-docs__grupo--oblig { color: var(--mat-aviso); }
.mat-docs__grupo--opc { color: var(--mat-gris); }
.mat-insignia--obligatorio { background: #d98a00; color: #fff; }
.mat-insignia--opcional { background: transparent; color: var(--mat-gris); border: 1px dashed var(--mat-linea); }
.mat-doc--opcional { border-style: dashed; border-left-style: solid; background: #fcfdfe; }
.mat-doc--opcional .mat-doc__cabeza strong { font-weight: 600; color: var(--mat-gris); }

/* Bandeja del colegio: resumen de documentos por solicitud */
.mat-docs-resumen { min-width: 150px; }
.mat-docs-resumen .mat-insignia { display: inline-block; margin: 2px 4px 2px 0; white-space: nowrap; }
.mat-doc__archivo a.mat-doc__ver { flex: 0 0 auto; font-weight: 600; }
.mat-retomar { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.mat-retomar small { color: var(--mat-gris); font-size: .8rem; max-width: 320px; text-align: right; }
.mat-correcciones { border-left: 4px solid var(--mat-azul); }
.mat-correcciones del { color: var(--mat-error); }
.mat-correcciones small { color: var(--mat-gris); font-size: .78rem; }

/* ---------- Cartera: estado de cuenta, pagos y recibo ---------- */
.mat-resumen li.is-alerta { background: var(--mat-error-suave); border-color: #f2b8b5; }
.mat-resumen li.is-alerta strong { color: var(--mat-error); }
.mat-tarjeta--destacada { border: 2px solid var(--mat-azul); box-shadow: 0 12px 32px rgba(29, 75, 124, .14); }
.mat-costo-hijo footer .mat-btn { margin-top: 12px; }
.mat-cargos td:first-child { width: 1%; }
.mat-cargos input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
.mat-cargos label { margin: 0; cursor: pointer; }
.mat-cargos tr.is-cerrado td { color: var(--mat-gris); }
.mat-cargos del, .mat-tabla del { color: var(--mat-gris); font-size: .85rem; margin-right: 4px; }
.mat-cargos__total td { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-pagar-fila { align-items: flex-end; margin-top: 12px; }
.mat-pagar-fila__btn { padding-bottom: 18px; }
.mat-instrucciones { background: var(--mat-aviso-suave); border-left: 4px solid #d98a00; border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.mat-instrucciones p { margin: 4px 0 0; }
.mat-buscar { display: flex; gap: 8px; margin-bottom: 16px; }
.mat-buscar input { flex: 1; }
.mat-pago { border: 1px solid var(--mat-linea); border-left: 5px solid var(--mat-linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.mat-pago--ok { border-left-color: var(--mat-ok); }
.mat-pago--aviso { border-left-color: #d98a00; background: #fffcf3; }
.mat-pago--error { border-left-color: var(--mat-error); }
.mat-pago--neutro { opacity: .75; }
.mat-pago header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mat-pago__valor { font-size: 1.2rem; }
.mat-pago__meta { color: var(--mat-gris); font-size: .9rem; margin: 6px 0; }
.mat-pago__lineas { list-style: none; padding: 0; margin: 0 0 8px; font-size: .9rem; }
.mat-pago__lineas li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--mat-linea); padding: 3px 0; }
.mat-pago__acciones, .mat-pago__decision { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mat-pago .mat-quitar { margin-top: 8px; }
.mat-pago .mat-quitar form { display: block; }
.mat-pago .mat-quitar .mat-btn { margin-top: 8px; }
.mat-recibo { max-width: 760px; margin: 0 auto; }
.mat-recibo__cabeza { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--mat-azul-oscuro); padding-bottom: 12px; margin-bottom: 16px; }
.mat-recibo__cabeza strong { display: block; font-size: 1.3rem; }
.mat-recibo__cabeza span { color: var(--mat-gris); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.mat-recibo__numero { text-align: right; }
.mat-recibo__numero strong { font-size: 1.6rem; color: var(--mat-azul-oscuro); font-variant-numeric: tabular-nums; }
.mat-recibo__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; margin-bottom: 16px; }
.mat-recibo__datos dt { color: var(--mat-gris); font-weight: 500; font-size: .8rem; }
.mat-recibo__datos dd { margin: 0; font-weight: 600; }
.mat-recibo__anulado { color: var(--mat-error); font-weight: 800; font-size: 1.2rem; border: 2px solid var(--mat-error); border-radius: 8px; padding: 6px 12px; text-align: center; }
.mat-recibo__pie { color: var(--mat-gris); font-size: .85rem; margin: 16px 0 0; }
@media print {
    .mat-barra, .mat-pie, .mat-saltar, .mat-no-imprimir, .mat-alerta { display: none !important; }
    body { background: #fff; }
    .mat-tarjeta { box-shadow: none; border: 0; padding: 0; }
}

/* ---------------------------------------------------------------
   Cartera fase 3: menu del colegio, estado de cuenta por grupos,
   formas de pago, caja y otros cobros.
   --------------------------------------------------------------- */
.mat-menu { display: flex; gap: 4px; overflow-x: auto; margin: -8px 0 20px; padding: 6px; background: #fff; border: 1px solid var(--mat-linea); border-radius: 14px; scrollbar-width: thin; }
.mat-menu a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; color: var(--mat-tinta); font-weight: 600; font-size: .925rem; text-decoration: none; white-space: nowrap; }
.mat-menu a:hover { background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-menu a.is-activa { background: var(--mat-azul-oscuro); color: #fff; }
.mat-menu a:focus-visible { outline: 3px solid var(--mat-azul); outline-offset: 2px; }

.mat-proximo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; margin: -4px 0 18px; border-radius: 12px; background: var(--mat-azul-suave); color: var(--mat-azul-oscuro); }
.mat-proximo span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mat-proximo small { color: var(--mat-gris); }
.mat-proximo--vencido { background: var(--mat-error-suave); color: var(--mat-error); }
.mat-proximo--ok { background: var(--mat-ok-suave); color: var(--mat-ok); }

.mat-grupo-cargos { border: 1px solid var(--mat-linea); border-radius: 14px; margin-bottom: 12px; background: #fff; }
.mat-grupo-cargos > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.mat-grupo-cargos > summary::-webkit-details-marker { display: none; }
.mat-grupo-cargos > summary::before { content: "›"; font-size: 1.3rem; line-height: 1; color: var(--mat-gris); transition: transform .15s; }
.mat-grupo-cargos[open] > summary::before { transform: rotate(90deg); }
.mat-grupo-cargos > summary:focus-visible { outline: 3px solid var(--mat-azul); outline-offset: 2px; border-radius: 14px; }
.mat-grupo-cargos__titulo { flex: 1; display: flex; flex-direction: column; }
.mat-grupo-cargos__titulo small { color: var(--mat-gris); font-size: .85rem; }
.mat-grupo-cargos .mat-tabla-caja { margin: 0 12px 12px; }
.mat-grupo-cargos--inicio { border-left: 5px solid var(--mat-azul); }
.mat-grupo-cargos--pension { border-left: 5px solid #6a4fb3; }
.mat-grupo-cargos--extra { border-left: 5px solid #d98a00; }

.mat-pagar-barra { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; background: #fff; border-top: 1px solid var(--mat-linea); }
.mat-seleccion { margin: 0; color: var(--mat-azul-oscuro); }

.mat-formas-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; align-items: start; }
.mat-forma-pago { border: 1px solid var(--mat-linea); border-radius: 14px; padding: 16px; background: #fff; }
.mat-forma-pago h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.mat-forma-pago > p { color: var(--mat-gris); font-size: .925rem; }
.mat-forma-pago--principal { border: 2px solid var(--mat-azul); background: var(--mat-azul-suave); }
.mat-reportar > summary { list-style: none; }
.mat-reportar > summary::-webkit-details-marker { display: none; }
.mat-reportar[open] > summary { display: none; }
.mat-reportar form { margin-top: 8px; }

.mat-cambio { font-weight: 700; color: var(--mat-azul-oscuro); margin: -8px 0 12px; min-height: 1.5em; }
.mat-caja-dia { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.mat-caja-dia .mat-subtitulo { margin: 0; }
.mat-caja-grupo { border: 1px solid var(--mat-linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.mat-caja-grupo h3 { font-size: .95rem; font-weight: 700; margin: 0 0 6px; }
.mat-caja-grupo dl { margin: 0; }
.mat-caja-grupo dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--mat-fondo); }
.mat-caja-grupo dt { font-weight: 400; color: var(--mat-gris); }
.mat-caja-grupo dd { margin: 0; font-weight: 700; }

.mat-lista-extras { list-style: none; padding: 0; margin: 0 0 14px; }
.mat-lista-extras li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mat-linea); }
.mat-grado-extra { border: 1px solid var(--mat-linea); border-radius: 12px; padding: 4px 14px 8px; margin-bottom: 12px; }
.mat-grado-extra legend { width: auto; font-size: 1rem; padding: 0 6px; margin: 0; }
.mat-celda-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-celda-acciones form { margin: 0; }
.mat-texto-error { color: var(--mat-error); font-weight: 700; }
.mat-hijo__costo small { display: block; color: var(--mat-gris); }
.mat-hijo__costo.is-alerta { background: var(--mat-error-suave); color: var(--mat-error); }
@media (max-width: 480px) {
    .mat-pagar-barra .mat-btn { width: 100%; }
    .mat-grupo-cargos > summary { flex-wrap: wrap; }
}
@media print {
    .mat-menu, .mat-pagar-barra, .mat-lateral, .mat-lateral__abrir { display: none !important; }
    body.mat-con-lateral { padding-left: 0 !important; }
}

/* Barra lateral del colegio: mismos colores del menu del panel (panel/css/panel.css) */
.mat-con-lateral { --lat-ancho: 208px; --lat-plegada: 64px; --lat-fondo: #0f172a; --lat-hover: #1e293b; --lat-texto: #a5b0c2; --lat-acento: #0b8fd6; }
.mat-lateral { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--lat-ancho); display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--lat-fondo); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; transition: width .2s ease, transform .2s ease; }
.mat-lateral__item, .mat-lateral__plegar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--lat-texto); font: inherit; font-size: .9rem; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mat-lateral__item .mat-icono, .mat-lateral__plegar .mat-icono { flex: 0 0 20px; }
.mat-lateral__item:hover, .mat-lateral__plegar:hover { background: var(--lat-hover); color: #fff; text-decoration: none; }
.mat-lateral__item:hover .mat-icono { color: var(--lat-acento); }
.mat-lateral__item.is-activa { background: var(--lat-acento); color: #fff; }
.mat-lateral__item.is-activa .mat-icono { color: #fff; }
.mat-lateral__item:focus-visible, .mat-lateral__plegar:focus-visible { outline: 3px solid #ffb703; outline-offset: -3px; }
.mat-lateral__item .mat-insignia { margin-left: auto; }
.mat-lateral__volver { margin-bottom: 6px; border: 1px solid #334155; }
.mat-lateral__grupo { margin: 14px 12px 4px; color: #64748b; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mat-lateral__plegar { margin-top: auto; }
.mat-lateral__plegar .mat-icono { transition: transform .2s ease; }
.mat-lateral__abrir { display: none; }
body.mat-con-lateral { padding-left: var(--lat-ancho); transition: padding-left .2s ease; }
/* El menu horizontal anterior ya no se usa con la barra lateral. */
.mat-con-lateral .mat-menu { display: none; }

@media (min-width: 992px) {
    body.mat-con-lateral.is-plegada { padding-left: var(--lat-plegada); }
    .is-plegada .mat-lateral { width: var(--lat-plegada); }
    .is-plegada .mat-lateral__item span, .is-plegada .mat-lateral__plegar span { display: none; }
    .is-plegada .mat-lateral__item, .is-plegada .mat-lateral__plegar { justify-content: center; padding: 8px 0; }
    .is-plegada .mat-lateral__grupo { height: 1px; margin: 10px 8px; overflow: hidden; background: #334155; color: transparent; }
    .is-plegada .mat-lateral__plegar .mat-icono { transform: rotate(180deg); }
    /* Plegada, la insignia de pagos queda como un punto sobre el icono. */
    .is-plegada .mat-lateral__item { position: relative; }
    .is-plegada .mat-lateral__item .mat-insignia { display: block; position: absolute; top: 4px; right: 8px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; }
}

/* Celular y tableta: la barra se esconde y se abre con el boton "Menu". */
@media (max-width: 991.98px) {
    body.mat-con-lateral { padding-left: 0; }
    .mat-lateral { transform: translateX(-100%); visibility: hidden; }
    .mat-lateral.is-abierta { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); }
    .mat-lateral__plegar { display: none; }
    .mat-lateral__abrir { position: fixed; left: 12px; bottom: 16px; z-index: 1039; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--lat-fondo); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(15, 23, 42, .3); }
}
@media (prefers-reduced-motion: reduce) {
    .mat-lateral, body.mat-con-lateral, .mat-lateral__plegar .mat-icono { transition: none; }
}
.mat-demo { background: var(--mat-aviso-suave); border: 2px dashed #d98a00; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.mat-demo p { margin: 4px 0 0; }
.mat-acciones form { display: inline-block; margin: 0; }

/* Tablero de cartera (colegio_cartera.php) */
.mat-tablero__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mat-cifra { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--mat-linea); border-radius: 14px; background: #fff; color: var(--mat-tinta); text-decoration: none; box-shadow: var(--mat-sombra); }
.mat-cifra strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mat-cifra span { color: var(--mat-gris); font-size: .85rem; }
a.mat-cifra:hover { border-color: var(--mat-azul); color: var(--mat-tinta); text-decoration: none; }
a.mat-cifra:focus-visible { outline: 3px solid var(--mat-azul); outline-offset: 2px; }
.mat-cifra.is-alerta { background: var(--mat-error-suave); border-color: #f2b8b5; }
.mat-cifra.is-alerta strong { color: var(--mat-error); }
.mat-tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.mat-tablero__tarjeta { background: #fff; border: 1px solid var(--mat-linea); border-top: 5px solid var(--mat-azul); border-radius: 16px; padding: 16px 18px; box-shadow: var(--mat-sombra); }
.mat-tablero__tarjeta--pension { border-top-color: #6a4fb3; }
.mat-tablero__tarjeta--extra { border-top-color: #d98a00; }
.mat-tablero__tarjeta header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mat-tablero__tarjeta h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.mat-tablero__tarjeta header span { color: var(--mat-gris); font-size: .85rem; }
.mat-tablero__barra { width: 100%; height: 10px; margin-top: 12px; }
.mat-tablero__pct { color: var(--mat-gris); font-size: .85rem; margin: 2px 0 8px; }
.mat-tablero__tarjeta dl { margin: 0 0 12px; }
.mat-tablero__tarjeta dl > div { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--mat-fondo); }
.mat-tablero__tarjeta dt { font-weight: 400; color: var(--mat-gris); }
.mat-tablero__tarjeta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mat-tablero__enlaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mat-tablero__enlaces .mat-cifra { padding: 8px 10px; box-shadow: none; }
.mat-tablero__enlaces .mat-cifra strong { font-size: 1rem; }
.mat-tablero__sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mat-gris); margin: 16px 0 8px; }
.mat-atraso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mat-atraso__nivel { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; text-decoration: none; text-align: center; }
.mat-atraso__nivel strong { font-size: 1.3rem; }
.mat-atraso__nivel span { font-size: .8rem; }
.mat-atraso__nivel:hover { text-decoration: none; filter: brightness(.96); }
.mat-atraso__nivel--0 { background: var(--mat-ok-suave); color: var(--mat-ok); }
.mat-atraso__nivel--1 { background: var(--mat-aviso-suave); color: var(--mat-aviso); }
.mat-atraso__nivel--2 { background: #ffe6cc; color: #9a4a00; }
.mat-atraso__nivel--3 { background: var(--mat-error-suave); color: var(--mat-error); }
.mat-tablero__cobros { list-style: none; padding: 0; margin: 0; }
.mat-tablero__cobros a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--mat-fondo); text-decoration: none; }
.mat-tablero__cobros small { color: var(--mat-gris); }
@media (max-width: 480px) {
    .mat-atraso { grid-template-columns: repeat(2, 1fr); }
}

/* Pagar todo y otros costos (cuenta.php) */
.mat-pagar-todo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--mat-azul-oscuro), var(--mat-azul)); color: #fff; box-shadow: var(--mat-sombra); }
.mat-pagar-todo .mat-etiqueta { background: rgba(255, 255, 255, .16); color: #fff; }
.mat-pagar-todo strong { display: block; font-size: 1.8rem; line-height: 1.2; }
.mat-pagar-todo small { display: block; color: #e8f1fa; }
.mat-pagar-todo small b { color: #fff; background: rgba(255, 255, 255, .18); padding: 1px 8px; border-radius: 999px; }
.mat-pagar-todo p { margin: 6px 0 0; color: #e8f1fa; font-size: .9rem; }
.mat-pagar-todo .mat-btn--primario { background: #fff; color: var(--mat-azul-oscuro); border-color: #fff; }
.mat-plan-otros { border: 2px solid #d98a00; border-radius: 16px; padding: 16px 18px; margin: 16px 0; background: var(--mat-aviso-suave); }
.mat-plan-otros h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; }
.mat-plan-otros__lista { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.mat-plan-otros__lista li { background: #fff; border: 1px solid #f0d49b; border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: .9rem; }
.mat-plan-otros__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.mat-plan-otros__opciones form { margin: 0; }
.mat-plan-otros__opcion { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--mat-linea); border-radius: 12px; background: #fff; color: var(--mat-tinta); text-align: left; cursor: pointer; }
.mat-plan-otros__opcion:hover { border-color: var(--mat-azul); }
.mat-plan-otros__opcion span { color: var(--mat-gris); font-size: .85rem; }
.mat-plan-otros__opcion em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--mat-ok); }
.mat-plan-otros__opcion.is-elegido { border: 2px solid var(--mat-ok); background: var(--mat-ok-suave); cursor: default; }
.mat-grupo-cargos--otros { border-left: 5px solid #d98a00; }
.mat-grupo-cargos--extra { border-left-color: #b3407a; }
.mat-tablero__tarjeta--otros { border-top-color: #d98a00; }
.mat-tablero__tarjeta--extra { border-top-color: #b3407a; }
.mat-plan-otros { box-shadow: var(--mat-sombra); margin: 0 0 18px; }
.mat-plan-otros__paso { display: inline-block; background: #d98a00; color: #fff; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.mat-plan-otros__opcion { min-height: 72px; }
.mat-plan-otros__opcion strong { font-size: 1.05rem; }
.mat-grupo-cargos__nota { margin: 0 16px 10px; padding: 8px 12px; border-radius: 10px; background: var(--mat-aviso-suave); font-size: .9rem; }
.mat-plan-otros__opcion b { margin-top: 4px; color: var(--mat-azul-oscuro); font-size: .9rem; }
.mat-plan-otros__opcion--contado { border: 2px solid var(--mat-azul); }
.mat-plan-otros__opcion--contado.is-elegido { border-color: var(--mat-ok); }
.mat-plan-otros__opcion--contado:hover { background: var(--mat-azul-suave); }

/* Costos adicionales (viajes, derechos de grado, Preicfes): aparte del total */
.mat-costo-hijo__cuerpo { flex: 1; }
.mat-costo-hijo .mat-costo-hijo__detalle { grid-column: 1 / -1; text-align: left; white-space: normal; }
.mat-costo-hijo__detalle summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--mat-azul); }
.mat-costo-hijo__detalle p { margin: 6px 0 0; font-size: .82rem; color: var(--mat-gris); }
.mat-costo-hijo__sub { margin: 14px 0 0; font-weight: 700; font-size: .9rem; color: var(--mat-azul-oscuro); }
.mat-costo-hijo__sub small { display: block; font-weight: 400; font-size: .78rem; color: var(--mat-gris); }
.mat-por-definir { color: var(--mat-gris); font-style: italic; }
@media (min-width: 992px) {
    .mat-costo-hijo--ancha .mat-costo-hijo__cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .mat-costo-hijo--ancha .mat-costo-hijo__adic .mat-costo-hijo__sub { margin-top: 0; }
}

/* Estado de cuenta: grandes eventos del anio */
.mat-eventos { margin-bottom: 18px; padding: 22px; border-radius: var(--mat-radio); background: linear-gradient(135deg, #fff8e6, #fdecc8); border: 1px solid #f1d58f; box-shadow: var(--mat-sombra); }
.mat-eventos__cabeza h2 { font-size: 1.3rem; font-weight: 800; margin: 8px 0 4px; color: var(--mat-tinta); }
.mat-eventos__cabeza p { margin: 0; color: #6b4a00; }
.mat-eventos .mat-etiqueta { background: #fff; color: var(--mat-aviso); }
.mat-eventos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.mat-evento { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(23, 37, 58, .06); }
.mat-evento__icono { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mat-azul-suave); color: var(--mat-azul); }
.mat-evento h3 { font-size: .95rem; font-weight: 700; margin: 0 0 2px; }
.mat-evento p { font-size: .82rem; color: var(--mat-gris); margin: 0 0 8px; }
.mat-evento__valor { display: inline-block; font-weight: 700; font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: var(--mat-ok-suave); color: var(--mat-ok); }
.mat-evento__valor--pendiente { background: var(--mat-aviso-suave); color: var(--mat-aviso); }
.mat-eventos__nota { margin: 12px 0 0; font-size: .8rem; color: #6b4a00; }

/* Paso 1: pago del formulario de inscripcion */
.mat-paso-formulario { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; margin-bottom: 18px; border-radius: var(--mat-radio); background: linear-gradient(135deg, #fff8e6, #fdecc8); border: 1px solid #f1d58f; box-shadow: var(--mat-sombra); }
.mat-paso-formulario > div { flex: 1 1 320px; }
.mat-paso-formulario .mat-etiqueta { background: #fff; color: var(--mat-aviso); }
.mat-paso-formulario h2 { font-size: 1.3rem; font-weight: 800; margin: 8px 0 2px; }
.mat-paso-formulario strong { display: block; font-size: 1.8rem; color: var(--mat-tinta); }
.mat-paso-formulario p { margin: 6px 0 0; color: #6b4a00; }
.mat-paso-formulario--listo { background: linear-gradient(135deg, #eaf7ef, #d4f0df); border-color: #9fd8b6; }
.mat-paso-formulario--listo .mat-etiqueta { color: var(--mat-ok); }
.mat-paso-formulario--listo p { color: #1f5c3b; }

/* Nequi, Daviplata y Bre-B */
.mat-forma-pago--ancha { grid-column: 1 / -1; }
.mat-billetera { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 14px 0; padding: 16px 18px; border-radius: 14px; background: #fff; border: 2px solid var(--mat-linea); }
.mat-billetera__logos { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-billetera__logos img { height: 40px; width: auto; }
.mat-billetera__numero { flex: 1 1 200px; }
.mat-billetera__numero small { display: block; color: var(--mat-gris); font-size: .8rem; }
.mat-billetera__numero strong { font-size: 1.6rem; letter-spacing: .03em; color: var(--mat-tinta); }
.mat-billetera__marca { display: inline-block; font-weight: 800; font-size: 1.15rem; padding: 6px 14px; border-radius: 10px; color: #fff; }
.mat-billetera__marca--nequi { background: #200020; color: #fff; box-shadow: inset -6px 0 0 #da0081; }
.mat-billetera__marca--daviplata { background: #e30613; }
.mat-billetera__marca--breb { background: #003f87; }

/* Recibo con datos de facturacion, firma y QR */
.mat-recibo { max-width: 860px; }
.mat-recibo__marca { display: flex; align-items: center; gap: 14px; }
.mat-recibo__marca img { height: 64px; width: auto; }
.mat-recibo__numero span { display: block; }
.mat-recibo__numero strong { font-size: 1.25rem; letter-spacing: .02em; }
.mat-recibo__numero small { display: block; color: var(--mat-gris); font-size: .8rem; }
.mat-recibo__bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mat-recibo__bloque { border: 1px solid var(--mat-linea); border-radius: 10px; padding: 10px 14px; }
.mat-recibo__bloque h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mat-azul-oscuro); font-weight: 800; margin: 0 0 6px; }
.mat-recibo__bloque dl { margin: 0; }
.mat-recibo__bloque dl > div { padding: 2px 0; }
.mat-recibo__bloque dt { color: var(--mat-gris); font-weight: 500; font-size: .75rem; }
.mat-recibo__bloque dd { margin: 0 0 4px; font-weight: 600; font-size: .9rem; word-break: break-word; }
.mat-recibo__validacion { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--mat-linea); }
.mat-recibo__qr svg { display: block; width: 110px; height: 110px; }
.mat-recibo__validacion span { display: block; color: var(--mat-gris); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.mat-recibo__validacion strong { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .08em; color: var(--mat-azul-oscuro); }
.mat-recibo__validacion p { margin: 4px 0 0; font-size: .78rem; color: var(--mat-gris); }
@media print {
    .mat-recibo__bloque, .mat-recibo__validacion { break-inside: avoid; }
}

/* Validacion publica de recibos */
.mat-validar { max-width: 640px; margin: 0 auto; }
.mat-validar__sello { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; padding: 12px 16px; border-radius: 12px; margin: 14px 0; }
.mat-validar__sello--ok { background: var(--mat-ok-suave); color: var(--mat-ok); }
.mat-validar__sello--error { background: var(--mat-error-suave); color: var(--mat-error); }

/* Firmas dibujadas al enviar la solicitud */
.mat-firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 12px 0 16px; }
.mat-firma { border: 2px solid var(--mat-linea); border-radius: 14px; padding: 12px; background: #fff; }
.mat-firma.is-firmada { border-color: var(--mat-ok); }
.mat-firma.is-falta { border-color: var(--mat-error); }
.mat-firma__cabeza strong { display: block; }
.mat-firma__cabeza span { display: block; color: var(--mat-gris); font-size: .82rem; }
.mat-firma__lienzo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; margin-top: 8px; border: 1px dashed #b8c4d4; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.mat-firma__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mat-firma__pie small { color: var(--mat-gris); }
.mat-firma__falta { display: none; color: var(--mat-error); font-weight: 700; font-size: .85rem; }
.mat-firma.is-falta .mat-firma__falta { display: inline; }

/* Firma de la rectoria */
.mat-firma-rectoria { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.mat-firma-rectoria img { max-width: 260px; max-height: 110px; border: 1px dashed #b8c4d4; border-radius: 10px; padding: 6px; background: #fff; }

/* Tablero de cartera: color por grupo, icono, porcentaje y barra */
.mat-tablero__tarjeta { --grupo: var(--mat-azul); --grupo-suave: var(--mat-azul-suave); border-top-color: var(--grupo); transition: box-shadow .15s ease, transform .15s ease; }
.mat-tablero__tarjeta:hover { box-shadow: 0 2px 4px rgba(23, 37, 58, .06), 0 14px 32px rgba(23, 37, 58, .1); transform: translateY(-1px); }
.mat-tablero__tarjeta--formulario { --grupo: #b8860b; --grupo-suave: #fff4d6; border-top-color: #b8860b; }
.mat-tablero__tarjeta--inicio { --grupo: var(--mat-azul); --grupo-suave: var(--mat-azul-suave); }
.mat-tablero__tarjeta--otros { --grupo: #d98a00; --grupo-suave: #ffefd6; }
.mat-tablero__tarjeta--pension { --grupo: #6a4fb3; --grupo-suave: #eee8fa; }
.mat-tablero__tarjeta--extra { --grupo: #b3407a; --grupo-suave: #f9e6ef; }
.mat-tablero__tarjeta header { justify-content: flex-start; align-items: center; gap: 12px; }
.mat-tablero__tarjeta header span { display: block; }
.mat-tablero__icono { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grupo-suave); color: var(--grupo); }
.mat-tablero__avance { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.mat-tablero__avance strong { font-size: 1.9rem; line-height: 1; color: var(--grupo); font-variant-numeric: tabular-nums; }
.mat-tablero__avance span { color: var(--mat-gris); font-size: .85rem; }
.mat-tablero__barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; margin: 8px 0 14px; border: 0; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.mat-tablero__barra::-webkit-meter-bar { background: #eef2f7; border: 0; border-radius: 999px; height: 10px; }
.mat-tablero__barra::-webkit-meter-optimum-value { background: var(--grupo); border-radius: 999px; }
.mat-tablero__barra::-moz-meter-bar { background: var(--grupo); border-radius: 999px; }
.mat-atraso--tres { grid-template-columns: repeat(3, 1fr); }
.mat-tablero__cifras .mat-cifra { border-left: 4px solid var(--mat-azul); }
.mat-tablero__cifras .mat-cifra strong { font-size: 1.35rem; }
.mat-tablero__cifras .mat-cifra.is-alerta { border-left-color: var(--mat-error); }
@media (max-width: 575.98px) {
    .mat-atraso--tres { grid-template-columns: repeat(3, 1fr); }
}