*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:#eef7f5;
    color:#1f2937;
}

.pagina{
    width:100%;
    max-width:1100px;
    margin:30px auto;
    padding:0 20px;
}

/*==========================================================
  ENCABEZADO
==========================================================*/

.encabezado{
    background:#ffffff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.10);
    margin-bottom:30px;
    border:1px solid #b9eee1;
}

.encabezado-principal{
    background:#0b9872;
    color:#fff;
    text-align:center;
    padding:35px 25px;
}

.etiqueta{
    display:inline-block;
    background:rgba(255,255,255,.15);
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;
}

.encabezado h1{
    font-size:42px;
    font-weight:700;
    line-height:1.25;
    margin-bottom:18px;
}

.encabezado p{
    font-size:19px;
    max-width:800px;
    margin:auto;
}

.encabezado-aviso{
    padding:18px;
    text-align:center;
    background:#fff;
    color:#5b6472;
    font-size:15px;
}

/*==========================================================
  PANEL
==========================================================*/

.panel-planteles{
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    border:1px solid #d8e3ea;
}

.panel-planteles h2{
    font-size:28px;
    margin-bottom:25px;
    color:#213547;
}

/*==========================================================
  BUSCADOR
==========================================================*/

.buscador-contenedor{
    position:relative;
    margin-bottom:20px;
}

.buscador-contenedor i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#9098a5;
}

.buscador{
    width:100%;
    height:56px;
    border:1px solid #cfd8e3;
    border-radius:15px;
    padding:0 20px 0 50px;
    font-size:17px;
    outline:none;
    transition:.25s;
}

.buscador:focus{
    border-color:#0b9872;
    box-shadow:0 0 0 4px rgba(11,152,114,.15);
}

/*==========================================================
  LISTA
==========================================================*/

.lista-planteles{
    max-height:500px;
    overflow-y:auto;
    padding-right:5px;
}

.lista-planteles::-webkit-scrollbar{
    width:8px;
}

.lista-planteles::-webkit-scrollbar-thumb{
    background:#c7d1db;
    border-radius:10px;
}

.lista-planteles::-webkit-scrollbar-thumb:hover{
    background:#aab7c4;
}

/*==========================================================
  PLANTEL
==========================================================*/

.plantel{
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    background:#fff;
    border:1px solid #dde5ec;
    border-radius:18px;
    padding:16px 20px;
    margin-bottom:15px;
    transition:.25s;
}

.plantel:hover{
    border-color:#0b9872;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.plantel-logo{
    width:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.plantel-logo img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.logo-alternativo{
    display:none;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#0b9872;
    color:#fff;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.plantel-informacion{
    flex:1;
    padding-left:15px;
}

.plantel-nombre{
    font-size:22px;
    font-weight:700;
    color:#1f2937;
}

.plantel-flecha{
    color:#0b9872;
    font-size:22px;
}

/*==========================================================
  SIN RESULTADOS
==========================================================*/

.sin-resultados{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:60px 20px;
    color:#8b96a5;
}

.sin-resultados i{
    font-size:50px;
}

/*==========================================================
  RESPONSIVE
==========================================================*/

@media (max-width:768px){

    .pagina{
        padding:15px;
        margin:15px auto;
    }

    .encabezado h1{
        font-size:30px;
    }

    .encabezado p{
        font-size:16px;
    }

    .panel-planteles{
        padding:20px;
    }

    .panel-planteles h2{
        font-size:24px;
    }

    .plantel{
        padding:15px;
    }

    .plantel-logo{
        width:60px;
    }

    .plantel-logo img{
        width:45px;
        height:45px;
    }

    .plantel-nombre{
        font-size:18px;
    }

}

@media (max-width:576px){

    .encabezado h1{
        font-size:26px;
    }

    .encabezado p{
        font-size:15px;
    }

    .plantel{
        padding:12px;
    }

    .plantel-nombre{
        font-size:17px;
    }

    .buscador{
        font-size:16px;
    }

}


/*==========================================================
  CARGANDO PLANTELES
==========================================================*/

.cargando-planteles{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:#6b7280;
    font-size:16px;
}

.cargando-planteles i{
    color:#0b9872;
    font-size:34px;
}

.sin-resultados.visible{
    display:flex;
}


/*==========================================================
  VISTA DE IDENTIFICACIÓN
==========================================================*/

.vista-identificacion{
    display:none;
}

.seccion-formulario{
    margin-bottom:26px;
}

.seccion-formulario h2{
    font-size:17px;
    font-weight:700;
    color:#15223a;
    margin-bottom:15px;
}


/*==========================================================
  PLANTEL SELECCIONADO
==========================================================*/

.plantel-seleccionado{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 16px;
    background:#edfcf7;
    border:1px solid #64e3b7;
    border-radius:14px;
}

.plantel-seleccionado-informacion{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.plantel-seleccionado-logo{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:10px;
    padding:5px;
    border:1px solid #d5eee5;
}

.plantel-seleccionado-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.plantel-seleccionado-texto{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    font-size:16px;
    color:#24334d;
}

.plantel-seleccionado-texto strong{
    font-weight:700;
    color:#10203a;
}

.btn-cambiar-plantel{
    border:1px solid #18cf8e;
    background:#fff;
    color:#007b54;
    border-radius:10px;
    padding:8px 14px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:.2s;
}

.btn-cambiar-plantel:hover{
    background:#05a670;
    border-color:#05a670;
    color:#fff;
}

.btn-cambiar-plantel i{
    margin-right:6px;
}


/*==========================================================
  SELECTOR DE TIPO DE USUARIO
==========================================================*/

.selector-tipo-usuario{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.btn-tipo-usuario{
    min-height:48px;
    border:1px solid #d4deea;
    background:#fff;
    color:#34415a;
    border-radius:13px;
    font-size:15px;
    font-weight:700;
    transition:.2s;
}

.btn-tipo-usuario i{
    margin-right:7px;
    color:#7a8799;
}

.btn-tipo-usuario:hover{
    border-color:#05b97d;
    background:#f3fffb;
}

.btn-tipo-usuario.activo{
    border-color:#00bd80;
    background:#eafbf5;
    color:#006c49;
}

.btn-tipo-usuario.activo i{
    color:#00a870;
}


/*==========================================================
  CAMPOS DE IDENTIFICACIÓN
==========================================================*/

.fila-campos{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.grupo-campo{
    width:100%;
}

.grupo-campo label{
    display:block;
    margin-bottom:7px;
    color:#627089;
    font-size:14px;
    font-weight:700;
}

.campo-login{
    width:100%;
    height:48px;
    border:1px solid #cbd7e6;
    border-radius:13px;
    padding:0 16px;
    background:#fff;
    color:#1c2940;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.campo-login::placeholder{
    color:#9aa6b7;
}

.campo-login:focus{
    border-color:#00b97b;
    box-shadow:0 0 0 4px rgba(0,185,123,.12);
}

.campo-mayusculas{
    text-transform:uppercase;
}

.campo-curp-contenedor{
    position:relative;
    padding-bottom:20px;
}

.contador-curp{
    position:absolute;
    right:4px;
    bottom:0;
    font-size:12px;
    color:#8b98ad;
}


/*==========================================================
  BOTÓN CONSULTAR
==========================================================*/

.btn-consultar{
    width:100%;
    min-height:50px;
    margin-top:16px;
    border:0;
    border-radius:13px;
    background:#00a872;
    color:#fff;
    font-size:16px;
    font-weight:700;
    box-shadow:0 7px 16px rgba(0,168,114,.18);
    transition:.2s;
}

.btn-consultar:hover{
    background:#008e60;
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(0,142,96,.22);
}

.btn-consultar i{
    margin-right:8px;
}


/*==========================================================
  RESPONSIVE IDENTIFICACIÓN
==========================================================*/

@media (max-width:650px){

    .plantel-seleccionado{
        align-items:flex-start;
    }

    .plantel-seleccionado-logo{
        width:44px;
        height:44px;
    }

    .btn-cambiar-plantel i{
        display:none;
    }

    .selector-tipo-usuario{
        grid-template-columns:1fr;
    }

    .fila-campos{
        grid-template-columns:1fr;
    }

}

@media (max-width:450px){

    .plantel-seleccionado{
        flex-direction:column;
    }

    .btn-cambiar-plantel{
        width:100%;
    }

    .btn-tipo-usuario{
        font-size:14px;
    }

}