:root {
    /*
    |--------------------------------------------------------------------------
    | PALETA FORMAL · NUEVO INGRESO 2026
    |--------------------------------------------------------------------------
    |
    | Azul institucional dominante
    | Turquesa sobrio como acento
    | Verde oliva únicamente para estados completados
    | Fondos neutros y alto contraste
    |
    */

    --azul: #0B2E4F;
    --azul-oscuro: #071F36;
    --azul-medio: #234F73;

    --turquesa: #1C6F73;
    --turquesa-oscuro: #14575A;
    --turquesa-claro: #EAF3F3;

    --verde: #6F8F32;
    --verde-oscuro: #557126;
    --verde-claro: #F0F4E7;

    --dorado: #9B8353;

    --naranja: #9A5B1B;
    --morado: #5D5373;
    --rojo: #9A3434;

    --texto: #202B36;
    --gris: #64707D;
    --gris-oscuro: #46515D;
    --fondo: #F5F7F9;
    --fondo-secundario: #EEF1F4;
    --borde: #D7DDE4;
    --blanco: #FFFFFF;

    --sombra: 0 7px 20px rgba(11, 46, 79, .065);
    --sombra-suave: 0 3px 11px rgba(11, 46, 79, .05);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--texto);
    background: var(--fondo);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    transition:
        color .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

/*
|--------------------------------------------------------------------------
| ENCABEZADO
|--------------------------------------------------------------------------
*/

.topbar-oficial {
    position: relative;
    z-index: 10;
    background: var(--blanco);
    border-bottom: 3px solid var(--turquesa);
    box-shadow: 0 2px 8px rgba(11, 46, 79, .06);
}

.topbar-contenido {
    width: 100%;
    max-width: 1180px;
    min-height: 67px;
    margin: 0 auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.logos-oficiales {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.logo-box {
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.logo-box img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-box-educacion {
    width: 142px;
}

.logo-box-dgeti {
    width: 176px;
}

.logo-box-cbtis {
    width: 42px;
}

.separador-logo {
    display: none;
}

.portal-identidad {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.portal-icono {
    display: none;
}

.portal-identidad span,
.portal-identidad strong {
    display: block;
}

.portal-identidad span {
    margin-bottom: 1px;
    color: var(--gris);
    font-size: .59rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.portal-identidad strong {
    color: var(--azul);
    font-size: .75rem;
}

/*
|--------------------------------------------------------------------------
| PORTADA Y CONSULTA
|--------------------------------------------------------------------------
*/

.hero {
    padding: 23px 13px 22px;
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F3F5F7 100%
        );
    border-bottom: 1px solid #E0E5EA;
}

.hero::before {
    display: none;
}

.hero-contenido {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.hero-principal {
    min-width: 0;
}

.hero-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 5px 8px;
    border-left: 3px solid var(--turquesa);
    color: var(--turquesa-oscuro);
    background: var(--turquesa-claro);
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hero h1 {
    max-width: 700px;
    margin: 0;
    color: var(--azul);
    font-size: 1.72rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.hero h1 span {
    display: block;
    color: var(--turquesa);
}

.hero-descripcion {
    max-width: 700px;
    margin: 10px 0 14px;
    color: var(--gris-oscuro);
    font-size: .85rem;
    line-height: 1.46;
}

.consulta-card {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--blanco);
    box-shadow: var(--sombra);
}

.consulta-label {
    display: block;
    margin-bottom: 6px;
    color: var(--texto);
    font-size: .69rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.consulta-controles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.curp-input-wrap {
    position: relative;
    min-width: 0;
}

.curp-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    transform: translateY(-50%);
    color: #778492;
    font-size: 14px;
    pointer-events: none;
}

.curp-input {
    height: 46px;
    padding: 0 42px 0 36px;
    border: 1px solid #AEB8C3;
    border-radius: 6px;
    color: var(--azul);
    background: #FFFFFF;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .018em;
    text-transform: uppercase;
}

.curp-input::placeholder {
    color: #9CA5AF;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
}

.curp-input:focus {
    border-color: var(--turquesa);
    box-shadow: 0 0 0 .16rem rgba(28, 111, 115, .12);
}

.curp-input.input-error {
    animation: sacudir .25s linear 2;
    border-color: var(--rojo);
    box-shadow: 0 0 0 .16rem rgba(154, 52, 52, .11);
}

@keyframes sacudir {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

.contador-curp {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--gris);
    background: #F0F2F4;
    font-size: .57rem;
    font-weight: 800;
}

.contador-curp.completo {
    color: var(--verde-oscuro);
    background: var(--verde-claro);
}

.btn-consultar {
    min-height: 44px;
    padding: 8px 13px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--azul);
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--azul);
    box-shadow: 0 4px 10px rgba(11, 46, 79, .15);
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
}

.btn-consultar:hover {
    color: #FFFFFF;
    background: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}

.consulta-ayuda {
    margin-top: 6px;
    color: #737E89;
    font-size: .67rem;
    line-height: 1.35;
}

.alerta-consulta {
    width: 100%;
    margin-top: 10px;
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid #DFC8A9;
    border-radius: 7px;
    color: #744511;
    background: #FBF7F0;
}

.alerta-icono {
    width: 29px;
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 29px;
    border-radius: 5px;
    color: #FFFFFF;
    background: var(--naranja);
    font-size: 12px;
}

.alerta-consulta strong,
.alerta-consulta span {
    display: block;
}

.alerta-consulta strong {
    margin-bottom: 1px;
    font-size: .75rem;
}

.alerta-consulta span {
    font-size: .7rem;
    line-height: 1.35;
}

/*
|--------------------------------------------------------------------------
| TARJETA DE PREPARACIÓN
|--------------------------------------------------------------------------
*/

.preparacion-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--borde);
    border-top: 3px solid var(--turquesa);
    border-radius: 8px;
    color: var(--texto);
    background: var(--blanco);
    box-shadow: var(--sombra-suave);
}

.preparacion-encabezado {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E2E6EA;
}

.preparacion-icono {
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 34px;
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--turquesa);
    font-size: 14px;
}

.preparacion-encabezado span,
.preparacion-encabezado strong {
    display: block;
}

.preparacion-encabezado span {
    margin-bottom: 1px;
    color: var(--gris);
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.preparacion-encabezado strong {
    color: var(--azul);
    font-size: .79rem;
}

.preparacion-lista {
    margin-top: 4px;
}

.preparacion-item {
    display: grid;
    grid-template-columns: 23px 1fr;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #E7EAEE;
}

.preparacion-item:last-child {
    border-bottom: 0;
}

.preparacion-item > span {
    width: 21px;
    height: 21px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #CCD4DD;
    border-radius: 4px;
    color: var(--azul);
    background: #F5F7F9;
    font-size: .6rem;
    font-weight: 900;
}

.preparacion-item strong,
.preparacion-item small {
    display: block;
}

.preparacion-item strong {
    margin-bottom: 1px;
    color: var(--texto);
    font-size: .72rem;
}

.preparacion-item small {
    color: var(--gris);
    font-size: .63rem;
    line-height: 1.32;
}

.preparacion-nota {
    margin-top: 8px;
    padding: 8px 9px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border-left: 3px solid var(--dorado);
    color: #66532E;
    background: #FAF8F3;
    font-size: .63rem;
    font-weight: 700;
    line-height: 1.35;
}

/*
|--------------------------------------------------------------------------
| RESULTADO DE ASIGNACIÓN
|--------------------------------------------------------------------------
*/

.resultado-seccion {
    padding: 20px 13px 10px;
    background: #FFFFFF;
}

.resultado-contenedor,
.tramite-contenedor,
.informacion-contenedor {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.resultado-contenedor {
    padding: 15px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: var(--sombra);
}

.resultado-encabezado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borde);
}

.resultado-titulo {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.resultado-check {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 36px;
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--verde);
    font-size: 14px;
}

.resultado-titulo span {
    display: block;
    margin-bottom: 2px;
    color: var(--verde-oscuro);
    font-size: .59rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.resultado-titulo h2 {
    margin: 0;
    color: var(--azul);
    font-size: 1.05rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.resultado-titulo p {
    margin: 2px 0 0;
    color: var(--gris);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.ciclo-badge {
    width: 100%;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #DCD3C0;
    border-radius: 6px;
    color: #67542F;
    background: #FAF8F3;
}

.ciclo-badge > i {
    font-size: 13px;
}

.ciclo-badge span,
.ciclo-badge strong {
    display: block;
}

.ciclo-badge span {
    margin-bottom: 1px;
    font-size: .54rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ciclo-badge strong {
    font-size: .7rem;
}

.asignacion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}

.asignacion-item {
    min-width: 0;
    min-height: 58px;
    padding: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #E0E5EA;
    border-radius: 6px;
    background: #F8F9FA;
}

.asignacion-icono {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    border-radius: 5px;
    color: var(--azul);
    background: #E9EEF3;
    font-size: 13px;
}

.asignacion-item span,
.asignacion-item strong {
    display: block;
}

.asignacion-item span {
    margin-bottom: 2px;
    color: var(--gris);
    font-size: .57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.asignacion-item strong {
    color: var(--azul);
    font-size: .81rem;
    font-weight: 900;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.asignacion-especialidad {
    border-left: 3px solid var(--turquesa);
    background: #F5F8F8;
}

.asignacion-especialidad strong {
    font-size: .77rem;
}

.asignacion-aviso {
    margin-top: 9px;
    padding: 8px 9px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-left: 3px solid var(--dorado);
    color: #66532E;
    background: #FAF8F3;
    font-size: .64rem;
    line-height: 1.35;
}


/*
|--------------------------------------------------------------------------
| CITA DE INSCRIPCIÓN
|--------------------------------------------------------------------------
*/

.cita-inscripcion {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #D8E0E5;
    border-left: 3px solid var(--turquesa);
    border-radius: 7px;
    background: #F7F9FA;
}

.cita-encabezado {
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #E1E6EA;
}

.cita-icono {
    width: 31px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 31px;
    border-radius: 5px;
    color: #FFFFFF;
    background: var(--turquesa);
    font-size: 12px;
}

.cita-encabezado span,
.cita-encabezado strong {
    display: block;
}

.cita-encabezado span {
    color: var(--gris);
    font-size: .53rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cita-encabezado strong {
    margin-top: 1px;
    color: var(--azul);
    font-size: .7rem;
}

.cita-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.cita-dato {
    min-width: 0;
    padding: 8px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border: 1px solid #E0E5EA;
    border-radius: 5px;
    background: #FFFFFF;
}

.cita-dato > i {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 25px;
    border-radius: 4px;
    color: var(--azul);
    background: #E9EEF3;
    font-size: 10px;
}

.cita-dato span,
.cita-dato strong {
    display: block;
}

.cita-dato span {
    color: var(--gris);
    font-size: .52rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cita-dato strong {
    margin-top: 1px;
    color: var(--azul);
    font-size: .67rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

/*
|--------------------------------------------------------------------------
| APORTACIÓN
|--------------------------------------------------------------------------
*/

.aportacion-seccion {
    padding: 1px 13px 10px;
    background: #FFFFFF;
}

.aportacion-contenedor {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.aportacion-card {
    padding: 14px;
    border: 1px solid var(--borde);
    border-top: 4px solid var(--azul);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: var(--sombra);
}

.aportacion-encabezado {
    padding-bottom: 11px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #E1E6EA;
}

.aportacion-titulo {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.aportacion-icono {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 36px;
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--azul);
    font-size: 14px;
}

.aportacion-titulo span {
    display: block;
    color: var(--turquesa-oscuro);
    font-size: .55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.aportacion-titulo h2 {
    margin: 2px 0 3px;
    color: var(--azul);
    font-size: .91rem;
    font-weight: 900;
}

.aportacion-titulo p {
    margin: 0;
    color: var(--gris-oscuro);
    font-size: .65rem;
    line-height: 1.4;
}

.aportacion-monto {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #DCD3C0;
    border-radius: 6px;
    color: #66522E;
    background: #FAF8F3;
}

.aportacion-monto span,
.aportacion-monto strong,
.aportacion-monto small {
    display: block;
}

.aportacion-monto span {
    font-size: .52rem;
    font-weight: 900;
    text-transform: uppercase;
}

.aportacion-monto strong {
    margin-top: 2px;
    color: var(--azul);
    font-size: 1.1rem;
    font-weight: 900;
}

.aportacion-monto small {
    margin-top: 1px;
    color: var(--gris);
    font-size: .55rem;
}

.aportacion-ruta {
    margin-top: 10px;
    padding: 9px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    border: 1px solid #D9E1E5;
    border-radius: 7px;
    background: #F5F8F8;
}

.ruta-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 7px;
    align-items: flex-start;
}

.ruta-item > span {
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--turquesa);
    font-size: .57rem;
    font-weight: 900;
}

.ruta-item strong,
.ruta-item small {
    display: block;
}

.ruta-item strong {
    color: var(--azul);
    font-size: .67rem;
}

.ruta-item small {
    margin-top: 1px;
    color: var(--gris);
    font-size: .58rem;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.ruta-flecha {
    display: none;
}

.aportacion-datos {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.aportacion-dato {
    min-width: 0;
    min-height: 58px;
    padding: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: 1px solid #DEE4E8;
    border-radius: 6px;
    background: #FFFFFF;
}

.aportacion-dato span,
.aportacion-dato strong {
    display: block;
}

.aportacion-dato > div {
    min-width: 0;
}

.aportacion-dato > div > span {
    color: var(--gris);
    font-size: .52rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.aportacion-dato > div > strong {
    margin-top: 2px;
    color: var(--azul);
    font-size: .73rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aportacion-dato-monto {
    border-left: 3px solid var(--verde);
    background: var(--verde-claro);
}

.aportacion-dato-monto > i {
    color: var(--verde-oscuro);
    font-size: 16px;
}

.btn-copiar {
    min-height: 29px;
    padding: 5px 7px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    border: 1px solid #C7D2DA;
    border-radius: 5px;
    color: var(--azul);
    background: #F7F9FA;
    font-size: .56rem;
    font-weight: 900;
    cursor: pointer;
}

.btn-copiar:hover,
.btn-copiar.copiado {
    color: #FFFFFF;
    border-color: var(--turquesa);
    background: var(--turquesa);
}

.aportacion-avisos {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.aviso-hermanos,
.aviso-comprobante {
    padding: 9px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 6px;
}

.aviso-hermanos {
    border-left: 3px solid var(--dorado);
    color: #66522E;
    background: #FAF8F3;
}

.aviso-comprobante {
    border-left: 3px solid var(--turquesa);
    color: var(--turquesa-oscuro);
    background: var(--turquesa-claro);
}

.aviso-hermanos > i,
.aviso-comprobante > i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.aviso-hermanos p,
.aviso-comprobante p {
    margin: 0;
    font-size: .61rem;
    line-height: 1.38;
}

.confirmacion-aportacion {
    margin-top: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    border: 1px solid #CBD8DD;
    border-radius: 7px;
    background: #F7FAFA;
}

.confirmacion-aportacion-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.confirmacion-aportacion-check input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    flex: 0 0 17px;
    accent-color: var(--turquesa);
}

.confirmacion-aportacion-check span {
    color: var(--gris-oscuro);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.4;
}

.btn-continuar-solicitud {
    min-height: 41px;
    padding: 8px 11px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--azul);
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--azul);
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

.btn-continuar-solicitud:hover:not(:disabled) {
    background: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}

.btn-continuar-solicitud:disabled {
    color: #7B858F;
    border-color: #D3D9DE;
    background: #E9EDF0;
    cursor: not-allowed;
}

.aportacion-incompleta,
.aportacion-disponible {
    margin-top: 10px;
    padding: 9px 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 6px;
}

.aportacion-incompleta {
    border: 1px solid #E1B8B8;
    color: #7F2929;
    background: #FBF1F1;
}

.aportacion-disponible {
    border: 1px solid #CBD8DD;
    color: var(--turquesa-oscuro);
    background: var(--turquesa-claro);
}

.aportacion-incompleta > i,
.aportacion-disponible > i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.aportacion-incompleta strong {
    display: block;
    font-size: .67rem;
}

.aportacion-incompleta p {
    margin: 2px 0 0;
    font-size: .61rem;
    line-height: 1.35;
}

.aportacion-disponible span {
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.35;
}


/*
|--------------------------------------------------------------------------
| HOJA DE AYUDA PARA PAGO
|--------------------------------------------------------------------------
*/

.hoja-pago-card {
    margin-top: 9px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    border: 1px solid #CAD6DF;
    border-left: 4px solid var(--azul);
    border-radius: 7px;
    background: #F7F9FB;
}

.hoja-pago-contenido {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hoja-pago-icono {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    border-radius: 5px;
    color: #FFFFFF;
    background: var(--azul);
    font-size: 12px;
}

.hoja-pago-contenido span {
    display: block;
    color: var(--turquesa-oscuro);
    font-size: .53rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hoja-pago-contenido h3 {
    margin: 2px 0 2px;
    color: var(--azul);
    font-size: .72rem;
    font-weight: 900;
}

.hoja-pago-contenido p {
    margin: 0;
    color: var(--gris-oscuro);
    font-size: .61rem;
    line-height: 1.35;
}

.btn-hoja-pago {
    min-height: 38px;
    padding: 7px 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--azul);
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--azul);
    font-size: .65rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.btn-hoja-pago:hover {
    color: #FFFFFF;
    background: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}

/*
|--------------------------------------------------------------------------
| ESTADO Y ACCIONES
|--------------------------------------------------------------------------
*/

.tramite-seccion {
    padding: 1px 13px 22px;
    background: #FFFFFF;
}

.estado-card {
    margin-top: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: var(--sombra-suave);
}

.estado-informacion {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.estado-icono {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 36px;
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 14px;
}

.estado-texto {
    min-width: 0;
}

.estado-texto > span {
    display: block;
    margin-bottom: 2px;
    color: var(--gris);
    font-size: .56rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.estado-texto h3 {
    margin: 0;
    color: var(--azul);
    font-size: .96rem;
    font-weight: 900;
}

.estado-texto > p {
    margin: 4px 0 0;
    color: var(--gris-oscuro);
    font-size: .69rem;
    line-height: 1.4;
}

.estado-folio {
    display: inline-flex;
    margin-top: 7px;
    padding: 4px 7px;
    border-radius: 4px;
    color: var(--azul);
    background: #EEF2F5;
    font-size: .62rem;
}

.observaciones-box {
    margin-top: 8px;
    padding: 9px;
    border: 1px solid #E0C8A8;
    border-radius: 6px;
    color: #744511;
    background: #FBF7F0;
}

.observaciones-box strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .67rem;
}

.observaciones-box p {
    margin: 4px 0 0;
    font-size: .64rem;
    line-height: 1.35;
}

.estado-acciones {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.btn-proceso-principal,
.btn-proceso-documentos,
.btn-proceso-secundario {
    min-height: 40px;
    padding: 8px 11px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border-radius: 6px;
    font-size: .69rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.btn-proceso-principal {
    border: 1px solid var(--azul);
    color: #FFFFFF;
    background: var(--azul);
}

.btn-proceso-principal:hover {
    color: #FFFFFF;
    background: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}

.btn-proceso-documentos {
    border: 1px solid var(--turquesa);
    color: #FFFFFF;
    background: var(--turquesa);
}

.btn-proceso-documentos:hover {
    color: #FFFFFF;
    background: var(--turquesa-oscuro);
    border-color: var(--turquesa-oscuro);
}

.btn-proceso-secundario {
    border: 1px solid var(--borde);
    color: var(--azul);
    background: #FFFFFF;
}

.btn-proceso-secundario:hover {
    color: var(--azul);
    background: #F4F6F8;
}

.estado-sin-iniciar .estado-icono {
    background: var(--azul);
}

.estado-borrador .estado-icono {
    background: #8D631F;
}

.estado-observaciones .estado-icono {
    background: var(--naranja);
}

.estado-enviada .estado-icono {
    background: var(--turquesa);
}

.estado-revision .estado-icono {
    background: var(--morado);
}

.estado-validada .estado-icono {
    background: var(--verde);
}

.estado-cancelada .estado-icono {
    background: var(--rojo);
}

/*
|--------------------------------------------------------------------------
| AVANCE DEL PROCESO
|--------------------------------------------------------------------------
*/

.avance-card {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #F7F8FA;
}

.avance-encabezado span,
.avance-encabezado strong {
    display: block;
}

.avance-encabezado span {
    color: var(--gris);
    font-size: .55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.avance-encabezado strong {
    margin-top: 1px;
    color: var(--azul);
    font-size: .75rem;
}

.avance-pasos {
    margin-top: 11px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.avance-paso {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 7px;
    align-items: center;
    opacity: .55;
}

.avance-numero {
    width: 27px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #C8D0D8;
    border-radius: 50%;
    color: var(--gris);
    background: #FFFFFF;
    font-size: .61rem;
    font-weight: 900;
}

.avance-paso strong,
.avance-paso span {
    display: block;
}

.avance-paso strong {
    color: var(--azul);
    font-size: .66rem;
}

.avance-paso span {
    margin-top: 1px;
    color: var(--gris);
    font-size: .57rem;
    line-height: 1.28;
}

.avance-paso.activo,
.avance-paso.completado {
    opacity: 1;
}

.avance-paso.activo .avance-numero {
    border-color: var(--turquesa);
    color: #FFFFFF;
    background: var(--turquesa);
}

.avance-paso.completado .avance-numero {
    border-color: var(--verde);
    color: #FFFFFF;
    background: var(--verde);
}

.avance-linea {
    width: 2px;
    height: 14px;
    margin-left: 13px;
    background: #C8D0D8;
}

.avance-linea.completada {
    background: var(--verde);
}

/*
|--------------------------------------------------------------------------
| INFORMACIÓN DE APOYO
|--------------------------------------------------------------------------
*/

.informacion-seccion {
    padding: 17px 13px;
    border-top: 1px solid #E0E5EA;
    background: var(--fondo-secundario);
}

.informacion-contenedor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.informacion-item {
    min-width: 0;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #FFFFFF;
}

.informacion-icono {
    width: 31px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 31px;
    border: 1px solid #D8E0E7;
    border-radius: 5px;
    color: var(--azul);
    background: #F5F7F8;
    font-size: 12px;
}

.informacion-item strong,
.informacion-item span {
    display: block;
}

.informacion-item strong {
    margin-bottom: 2px;
    color: var(--azul);
    font-size: .69rem;
}

.informacion-item span {
    color: var(--gris);
    font-size: .61rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/*
|--------------------------------------------------------------------------
| PIE DE PÁGINA
|--------------------------------------------------------------------------
*/

.footer {
    color: #FFFFFF;
    background: var(--azul);
    border-top: 3px solid var(--verde);
}

.footer-contenido {
    width: 100%;
    max-width: 1080px;
    min-height: 61px;
    margin: 0 auto;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.footer strong,
.footer span {
    display: block;
}

.footer strong {
    margin-bottom: 1px;
    font-size: .73rem;
}

.footer span {
    color: rgba(255, 255, 255, .74);
    font-size: .61rem;
}

.footer-enlaces {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.footer-enlaces a {
    color: #FFFFFF;
    font-size: .62rem;
    font-weight: 700;
    text-decoration: none;
}

.footer-enlaces a:hover {
    text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 640px) {
    body {
        font-size: 15px;
    }

    .topbar-contenido {
        min-height: 75px;
        padding: 9px 18px;
        flex-direction: row;
        justify-content: space-between;
        gap: 18px;
    }

    .logos-oficiales {
        width: auto;
        justify-content: flex-start;
        gap: 10px;
    }

    .logo-box {
        height: 45px;
    }

    .logo-box-educacion {
        width: 185px;
    }

    .logo-box-dgeti {
        width: 245px;
    }

    .logo-box-cbtis {
        width: 53px;
    }

    .separador-logo {
        width: 1px;
        height: 32px;
        display: block;
        background: #D9DEE4;
    }

    .portal-identidad {
        justify-content: flex-end;
        text-align: right;
    }

    .portal-identidad span {
        font-size: .62rem;
    }

    .portal-identidad strong {
        font-size: .8rem;
    }

    .hero {
        padding: 30px 18px 28px;
    }

    .hero h1 {
        font-size: 2.15rem;
    }

    .hero-descripcion {
        font-size: .9rem;
    }

    .consulta-card {
        padding: 17px;
    }

    .consulta-controles {
        grid-template-columns: minmax(0, 1fr) 195px;
    }

    .preparacion-card {
        padding: 17px;
    }

    .resultado-encabezado {
        flex-direction: row;
        justify-content: space-between;
    }

    .ciclo-badge {
        width: auto;
        min-width: 145px;
    }

    .asignacion-grid {
        grid-template-columns: .6fr .8fr 1.8fr;
    }

    .cita-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .aportacion-encabezado {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .aportacion-monto {
        width: 170px;
        flex: 0 0 170px;
    }

    .aportacion-ruta {
        grid-template-columns:
            minmax(0, 1fr)
            20px
            minmax(0, 1fr)
            20px
            minmax(0, 1.7fr);
        align-items: center;
    }

    .ruta-flecha {
        display: flex;
        justify-content: center;
        color: #8B98A4;
        font-size: 10px;
    }

    .aportacion-datos {
        grid-template-columns: repeat(2, 1fr);
    }

    .aportacion-avisos {
        grid-template-columns: 1fr 1fr;
    }

    .hoja-pago-card {
        grid-template-columns: minmax(0, 1fr) 190px;
        align-items: center;
    }

    .confirmacion-aportacion {
        grid-template-columns: 1fr 205px;
        align-items: center;
    }

    .estado-informacion {
        flex-direction: row;
    }

    .estado-acciones {
        grid-template-columns: repeat(3, 1fr);
    }

    .informacion-contenedor {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-contenido {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-enlaces {
        width: auto;
        justify-content: flex-end;
    }
}

/*
|--------------------------------------------------------------------------
| ESCRITORIO
|--------------------------------------------------------------------------
*/

@media (min-width: 900px) {
    .topbar-contenido {
        min-height: 80px;
        padding: 10px 24px;
    }

    .logo-box {
        height: 50px;
    }

    .logo-box-educacion {
        width: 220px;
    }

    .logo-box-dgeti {
        width: 310px;
    }

    .logo-box-cbtis {
        width: 61px;
    }

    .portal-icono {
        width: 38px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 38px;
        border: 1px solid #D8E0E7;
        border-radius: 6px;
        color: var(--azul);
        background: #F6F8F9;
        font-size: 16px;
    }

    .hero {
        padding: 36px 20px 34px;
    }

    .hero-contenido {
        grid-template-columns: minmax(0, 1.55fr) minmax(285px, .72fr);
        gap: 23px;
        align-items: stretch;
    }

    .hero h1 {
        font-size: 2.55rem;
    }

    .hero-descripcion {
        font-size: .94rem;
    }

    .consulta-card {
        max-width: 740px;
    }

    .alerta-consulta {
        max-width: 740px;
    }

    .resultado-seccion {
        padding: 26px 20px 14px;
    }

    .resultado-contenedor {
        padding: 20px;
    }

    .cita-inscripcion {
        padding: 12px;
    }

    .aportacion-card {
        padding: 18px;
    }

    .aportacion-datos {
        grid-template-columns: repeat(4, 1fr);
    }

    .resultado-titulo h2 {
        font-size: 1.38rem;
    }

    .asignacion-item {
        min-height: 67px;
        padding: 11px;
    }

    .estado-card {
        padding: 18px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .estado-acciones {
        width: 210px;
        flex: 0 0 210px;
        grid-template-columns: 1fr;
    }

    .avance-card {
        padding: 17px;
    }

    .avance-pasos {
        grid-template-columns:
            minmax(0, 1fr)
            28px
            minmax(0, 1fr)
            28px
            minmax(0, 1fr)
            28px
            minmax(0, 1fr)
            28px
            minmax(0, 1fr);
        align-items: center;
    }

    .avance-linea {
        width: auto;
        height: 2px;
        margin: 0 5px;
    }

    .informacion-seccion {
        padding: 20px;
    }
}