:root {
    --azul-profundo: #173548;
    --azul-medio: #244a62;
    --azul-suave: #eaf1f4;
    --verde: #2d7665;
    --fondo: #f4f6f7;
    --blanco: #ffffff;
    --texto: #1d2932;
    --texto-suave: #63727d;
    --borde: #dce3e7;
    --radio: 12px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--texto); background: var(--fondo); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input { font: inherit; }

.pagina-login { display: grid; place-items: center; min-height: 100vh; padding: 38px; background: #dfe3e7; }
.contenedor-login { display: grid; grid-template-columns: 52% 48%; width: min(1040px, calc(100vw - 76px)); height: min(660px, calc(100vh - 76px)); min-height: 580px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 18px 48px rgba(24,62,101,.12); transform: scale(1.04); transform-origin: center; }
.panel-identidad-login { position: relative; align-items: flex-start; justify-content: center; overflow: hidden; background: #075298 url('../img/temuco-web.webp') center 55% / cover no-repeat; }
.panel-identidad-login::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,73,143,.9) 0%, rgba(0,73,143,.78) 32%, rgba(0,69,139,.54) 43%, rgba(0,55,119,.08) 62%, rgba(0,46,105,.58) 100%); }
.panel-identidad-login::after { display: none; }
.halo-identidad { position: absolute; z-index: 1; width: 900px; height: 900px; top: -680px; left: -560px; border: 54px solid rgba(49,156,218,.16); border-radius: 50%; box-shadow: 0 0 0 58px rgba(40,142,205,.1); }
.hojas-identidad { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.hojas-identidad i { position: absolute; display: block; background: rgba(66,154,211,.22); border-radius: 100% 0 100% 0; transform-origin: 100% 100%; }
.hojas-identidad i:nth-child(1) { left: -4%; top: 40%; width: 18%; height: 13%; transform: rotate(33deg); }
.hojas-identidad i:nth-child(2) { left: 6%; top: 46%; width: 25%; height: 15%; transform: rotate(74deg); }
.hojas-identidad i:nth-child(3) { left: -5%; top: 52%; width: 27%; height: 15%; transform: rotate(-6deg); }
.hojas-identidad i:nth-child(4) { left: -2%; bottom: 8%; width: 17%; height: 10%; transform: rotate(24deg); }
.hojas-identidad i:nth-child(5) { left: 5%; bottom: 5%; width: 14%; height: 9%; transform: rotate(75deg); }
.logo-compuesto-login { position: absolute; z-index: 3; top: 50px; right: 46px; left: auto; width: min(42%, 146px); margin: 0; }
.logo-login { display: block; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
.ondas-identidad { position: absolute; z-index: 4; left: 0; bottom: -5%; width: 100%; height: 35%; overflow: visible; }
.borde-turquesa { fill: none; stroke: #19b9b4; stroke-width: 8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.borde-verde { fill: none; stroke: url('#franjaVerde'); stroke-width: 10px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.onda-profunda { fill: rgba(0,43,102,.32); }
.hoja-onda { fill: rgba(0,66,137,.58); }
.hoja-onda-1 { transform: rotate(-7deg); transform-origin: 20px 145px; }
.hoja-onda-2 { transform: rotate(4deg); transform-origin: 38px 163px; }
.hoja-onda-3 { opacity: .72; }
.firma-panel-login { position: absolute; z-index: 6; bottom: 25px; left: 29px; max-width: calc(100% - 58px); color: #fff; }
.firma-panel-login p { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: .76rem; font-weight: 450; letter-spacing: .025em; line-height: 1.35; }
.linea-firma-panel { display: block; width: 92px; height: 3px; margin: 11px 0 10px; border-radius: 2px; background: linear-gradient(90deg, #16b9dc 0 25%, #1976c9 25% 50%, #78bd37 50% 75%, #f3c420 75% 100%); }
.panel-acceso-login { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 30px; background: #f8fbfe; overflow: hidden; }
.tarjeta-acceso { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; width: min(100%, 450px); height: auto; min-height: 0; margin: auto; padding: 52px 44px 27px; border: 1px solid rgba(213,224,235,.65); border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(36,70,109,.06); }
.tarjeta-acceso h1 { margin: 0 0 7px; color: #082c5d; font-size: 2.1rem; font-weight: 760; line-height: 1; letter-spacing: -.035em; text-align: center; }
.presentacion-login { margin: 0 0 19px; color: #607396; font-size: .82rem; line-height: 1.4; text-align: center; }
.campo-login { position: relative; margin-bottom: 10px; }
.linea-institucional { align-self: center; width: 104px; height: 3px; margin: 0 auto 12px; border-radius: 2px; background: linear-gradient(90deg, #11b7dc 0 25%, #1675c5 25% 50%, #79bc32 50% 75%, #f7c21b 75% 100%); }
.campo-login > svg { position: absolute; z-index: 2; top: 50%; left: 17px; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #607396; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icono-google-authenticator { position: absolute; z-index: 2; top: 50%; left: 15px; width: 24px; height: 24px; transform: translateY(-50%); object-fit: contain; pointer-events: none; }
.pagina-login .form-control { width: 100%; height: 50px; min-height: 50px; padding: 0 47px 0 50px; border: 1px solid #c7d1df; border-radius: 8px; color: #172f54; background: rgba(255,255,255,.72); font-size: .84rem; box-shadow: none !important; }
.pagina-login .form-control::placeholder { color: #637597; opacity: 1; }
.pagina-login .form-control:focus { border-color: #1971bd; outline: 3px solid rgba(25,113,189,.1); }
.pagina-login .validado .form-control:invalid { border-color: #a84646; }
.campo-codigo { margin-bottom: 0; }
.ayuda-codigo { margin: 6px 0 0; color: #607396; font-size: .62rem; }
.recordar-datos { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 -3px; color: #5d7190; font-size: .64rem; line-height: 1.3; cursor: pointer; }
.recordar-datos input { width: 14px; height: 14px; margin: 0; accent-color: #0871c8; }
.boton-ver-clave { position: absolute; z-index: 3; top: 50%; right: 11px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 7px; color: #607396; background: transparent; }
.boton-ver-clave:hover { color: #176eb8; background: #eef5fb; }
.boton-ver-clave svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-principal { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 15px; border: 0; border-radius: 8px; color: var(--blanco); background: #171717; font-size: .86rem; font-weight: 500; box-shadow: 0 5px 13px rgba(0,0,0,.1); transition: background .2s, transform .2s; }
.boton-principal:hover, .boton-principal:focus-visible { color: #fff; background: #000; transform: translateY(-1px); outline: none; }
.boton-principal:disabled { opacity: .7; transform: none; }
.volver-login { display: block; margin-top: 11px; color: #657a98; font-size: .65rem; text-align: center; text-decoration: none; }
.volver-login:hover { color: #0871c8; text-decoration: underline; }
.pie-acceso-login { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 20px; }
.boton-informacion { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; margin: -2px auto 12px; padding: 6px 11px; border: 1px solid #d9e4ef; border-radius: 8px; color: #476485; background: #f8fbfe; font-size: .66rem; font-weight: 550; line-height: 1.2; box-shadow: 0 2px 7px rgba(32,68,105,.07); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.boton-informacion:hover { color: #214d78; border-color: #bfd2e5; background: #f0f6fb; transform: translateY(-1px); }
.boton-informacion:focus-visible { outline: 2px solid rgba(8,113,200,.35); outline-offset: 2px; }
.boton-informacion svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #b58200; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso-acceso { display: flex; align-items: center; justify-content: center; margin: 0; color: #53698d; font-size: .64rem; }
.credito-desarrollo { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; text-align: center; }
.credito-desarrollo > span { color: #3f6082; font-size: .72rem; font-weight: 400; letter-spacing: 0; }
.credito-desarrollo a { color: #71869f; font-size: .67rem; font-weight: 450; letter-spacing: .01em; text-decoration: none; transition: color .2s ease; }
.credito-desarrollo a:hover { color: #1778bf; text-decoration: none; }
.logo-login-movil { display: block; width: min(46%, 146px); height: auto; margin: 10px auto 24px; image-rendering: -webkit-optimize-contrast; }
.ilustracion-inferior-login { position: absolute; z-index: 1; right: -1%; bottom: -1px; width: 61%; height: auto; opacity: .72; pointer-events: none; }
.marca { display: inline-flex; align-items: center; gap: 11px; color: var(--azul-profundo); text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.marca-clara { color: var(--blanco); }
.marca-simbolo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--blanco); background: var(--verde); font-weight: 800; }
.etiqueta { margin: 0; color: var(--verde); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.texto-secundario { color: var(--texto-suave); }
.form-label { color: #33444e; font-size: .875rem; font-weight: 650; }
.form-control { min-height: 50px; border: 1px solid var(--borde); border-radius: 9px; padding: 11px 14px; color: var(--texto); box-shadow: none !important; }
.form-control:focus { border-color: var(--azul-medio); outline: 3px solid rgba(36,74,98,.1); }
.validado .form-control:invalid, .validado .form-select:invalid { border-color: #a84646; }

.zona-privada { min-height: 100vh; }
.barra-lateral { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: 265px; overflow: visible; color: #d8e5ed; background: #123f5f; box-shadow: 5px 0 22px rgba(10,42,64,.18); font-family: Poppins, "Segoe UI", sans-serif; transition: width .24s ease, transform .24s ease; }
.cabecera-barra { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; height: 106px; min-height: 106px; padding: 10px 24px 0; }
.cabecera-barra > .marca-simbolo, .cabecera-barra > .texto-marca { transform: translateY(8px); }
.marca-simbolo { display: grid; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; color: #fff; background: transparent; cursor: pointer; }
.marca-simbolo svg { width: 29px; height: 29px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.texto-marca { display: flex; min-width: 0; overflow: hidden; flex-direction: column; gap: 4px; color: #fff; text-decoration: none; }
.texto-marca strong, .texto-marca small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texto-marca strong { font-size: 1.04rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.texto-marca small { color: #bad1e0; font-size: .67rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
.boton-cerrar-menu { margin-left: auto; padding: 0; border: 0; color: white; background: transparent; font-size: 1.8rem; line-height: 1; }
.navegacion-principal { position: relative; z-index: 2; min-height: 0; overflow-y: auto; overflow-x: visible; padding: 9px 0 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.grupo-menu { position: relative; }
.item-menu { display: grid; grid-template-columns: 30px minmax(0,1fr) 16px; align-items: center; gap: 14px; width: 100%; height: 50px; padding: 0 25px; border: 0; border-radius: 0; color: #d8e5ed; background: transparent; text-align: left; text-decoration: none; font-size: .89rem; font-weight: 500; line-height: 1; cursor: pointer; transition: color .16s ease, background .16s ease; }
.item-menu:hover, .item-menu:focus-visible { color: #fff; background: rgba(255,255,255,.09); outline: none; }
.item-menu.activo { color: #fff; }
.grupo-menu.abierto { background: #0d324d; }
.grupo-menu.abierto > .item-menu { color: #fff; }
.opcion-visual { grid-template-columns: 30px minmax(0,1fr); }
.texto-item-menu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icono-menu { display: grid; width: 30px; height: 30px; place-items: center; color: currentColor; }
.icono-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flecha-submenu { display: grid; width: 16px; height: 16px; place-items: center; color: #fff; transition: transform .18s ease; }
.flecha-submenu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.grupo-menu.abierto .flecha-submenu { transform: rotate(180deg); }
.submenu-menu { display: none; padding: 0 19px 13px 67px; }
.grupo-menu.abierto > .submenu-menu { display: grid; }
.submenu-menu .titulo-submenu { display: none; }
.submenu-menu button, .submenu-menu a { display: flex; align-items: center; height: 32px; padding: 0; overflow: hidden; border: 0; color: #b9cfdd; background: transparent; font-family: inherit; font-size: .75rem; font-weight: 400; line-height: 1; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: color .16s ease; }
.submenu-menu button:hover, .submenu-menu button:focus-visible, .submenu-menu a:hover, .submenu-menu a:focus-visible { color: #fff; outline: none; }
.submenu-menu a.activo, .submenu-menu a[aria-current="page"] { position: relative; color: #fff; font-weight: 600; }
.submenu-menu a.activo::before, .submenu-menu a[aria-current="page"]::before { position: absolute; top: 50%; left: -14px; width: 5px; height: 5px; border-radius: 50%; background: #64c7a8; content: ""; transform: translateY(-50%); }
.decoracion-menu { position: absolute; z-index: 1; right: 0; bottom: 76px; left: 0; height: 190px; overflow: hidden; pointer-events: none; }
.decoracion-menu svg { display: block; width: 100%; height: 100%; }
.onda-menu-profunda { fill: rgba(7,45,70,.55); }
.onda-menu-media { fill: rgba(20,78,113,.42); }
.onda-menu-suave { fill: rgba(30,91,128,.28); }
.pie-barra { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; min-height: 76px; margin-top: auto; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.14); background: #0f3856; }
.usuario-menu { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
.datos-usuario-menu { display: block; min-width: 0; }
.usuario-menu strong, .usuario-menu small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-menu strong { color: #fff; font-size: .73rem; font-weight: 400; }
.usuario-menu small { margin-top: 3px; color: #c5d7e2; font-size: .69rem; font-weight: 400; }
.avatar-usuario { display: block; flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; background: #0d304a; object-fit: cover; }
.pie-barra form { flex: 0 0 28px; }
.boton-salir { display: grid; width: 28px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 6px; color: #d8e5ed; background: transparent; }
.boton-salir:hover, .boton-salir:focus-visible { color: #fff; background: rgba(255,255,255,.05); outline: none; }
.texto-salir { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.icono-salir { display: grid; place-items: center; }
.icono-salir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contenido-aplicacion { display: flex; flex-direction: column; min-height: 100vh; margin-left: 265px; transition: margin-left .24s ease; }
.barra-lateral.contraida { width: 84px; }
.barra-lateral.contraida .navegacion-principal { overflow: visible; }
.barra-lateral.contraida .cabecera-barra { justify-content: center; padding: 0; }
.barra-lateral.contraida .cabecera-barra > .marca-simbolo { transform: translateY(8px); }
.barra-lateral.contraida .texto-marca, .barra-lateral.contraida .texto-item-menu, .barra-lateral.contraida .flecha-submenu, .barra-lateral.contraida .datos-usuario-menu, .barra-lateral.contraida .pie-barra form { display: none; }
.barra-lateral.contraida .decoracion-menu { display: none; }
.barra-lateral.contraida .item-menu { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.barra-lateral.contraida .icono-menu { width: 34px; height: 34px; }
.barra-lateral.contraida .icono-menu svg { width: 22px; height: 22px; }
.barra-lateral.contraida .grupo-menu.abierto { background: transparent; }
.barra-lateral.contraida .grupo-menu.abierto > .item-menu { background: #0d324d; }
.barra-lateral.contraida .pie-barra { justify-content: center; padding-inline: 0; }
.barra-lateral.contraida .usuario-menu { flex: 0 0 auto; justify-content: center; }
.barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 84px; }
.barra-lateral.contraida .submenu-menu { position: absolute; z-index: 60; top: 0; left: 84px; display: grid; width: 212px; padding: 14px 20px 15px; border-radius: 0 7px 7px 0; background: #0d324d; box-shadow: 12px 12px 24px rgba(7,34,52,.24); opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.barra-lateral.contraida .grupo-menu.abierto > .submenu-menu { opacity: 1; visibility: visible; transform: translateX(0); }
.barra-lateral.contraida .submenu-menu .titulo-submenu { display: block; height: 31px; padding: 0; color: #fff; font-size: .82rem; font-weight: 500; line-height: 24px; }
.barra-superior { display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-height: 94px; padding: 18px clamp(24px, 4vw, 52px) 18px 12px; border-bottom: 1px solid var(--borde); background: white; }
.barra-superior h1 { margin: 2px 0 0; font-size: 1.55rem; letter-spacing: -.025em; }
.miga { margin: 0; color: var(--texto-suave); font-size: .73rem; }
.estado-sesion { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--texto-suave); font-size: .78rem; }
.estado-sesion i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.boton-menu { width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid #dce3e7; border-radius: 9px; color: var(--azul-profundo); background: #fff; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.boton-menu:hover, .boton-menu:focus-visible { color: #0871c8; border-color: #b9cedd; background: #f5f9fc; outline: none; }
.boton-menu svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.contenido-principal { flex: 1; padding: clamp(24px, 4vw, 52px); }
.tarjeta-bienvenida { display: flex; align-items: flex-start; gap: 24px; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--borde); border-radius: var(--radio); background: white; }
.tarjeta-bienvenida h2 { margin: 6px 0 12px; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.tarjeta-bienvenida p:last-child, .panel-informativo p:last-child { max-width: 680px; margin-bottom: 0; color: var(--texto-suave); }
.indicador-seguro { flex: 0 0 48px; display: grid; place-items: center; height: 48px; border-radius: 50%; color: var(--verde); background: #e4f0ec; font-size: 1.25rem; font-weight: 800; }
.panel-informativo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border: 1px solid var(--borde); border-radius: var(--radio); background: white; }
.panel-informativo h3 { margin: 5px 0 8px; font-size: 1.08rem; }
.insignia-estado { padding: 7px 11px; border-radius: 99px; color: var(--verde); background: #e4f0ec; font-size: .73rem; font-weight: 750; }
.pie-aplicacion { display: flex; justify-content: space-between; padding: 18px clamp(24px, 4vw, 52px); border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: .7rem; }
.capa-menu { display: none; }
.swal2-popup { border-radius: 12px !important; font-family: inherit !important; }
.modal-informacion { width: min(92vw, 500px) !important; padding: 1.55rem 1.65rem 1.35rem !important; border: 1px solid #e1e9f1 !important; box-shadow: 0 18px 48px rgba(20,52,86,.16) !important; }
.modal-informacion .swal2-title { padding: .35rem 0 0 !important; color: #082c5d !important; font-size: 1.35rem !important; letter-spacing: -.02em; }
.contenido-informacion { margin: 0 !important; padding: .85rem 0 .2rem !important; color: #53698d !important; font-size: .79rem !important; line-height: 1.55 !important; text-align: left !important; }
.contenido-informacion p { margin: 0 0 .75rem; }
.contenido-informacion ul { margin: 0 0 .85rem; padding-left: 1.15rem; }
.contenido-informacion li + li { margin-top: .35rem; }
.contenido-informacion a { color: #0871c8; font-weight: 600; text-decoration: none; }
.contenido-informacion a:hover { text-decoration: underline; text-underline-offset: 2px; }
.contenido-informacion .vigencia-datos { padding: .7rem .8rem; border-left: 3px solid #efb400; border-radius: 0 7px 7px 0; background: #fff9e9; color: #394f70; }
.contenido-informacion .vigencia-datos strong { color: #173d6a; font-weight: 700; }
.swal2-confirm { background: #171717 !important; font-weight: 500 !important; }
.swal2-confirm:hover, .swal2-confirm:focus-visible { background: #000 !important; }
.modal-informacion .swal2-confirm { min-width: 118px; border-radius: 7px !important; font-size: .78rem !important; }

.pagina-activacion { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: linear-gradient(135deg, #eaf3fa, #f9fbfd); }
.tarjeta-activacion { width: min(100%, 470px); padding: 38px 42px; border: 1px solid #dce6ef; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(24,62,101,.11); text-align: center; }
.logo-activacion { width: 180px; height: auto; margin-bottom: 23px; }
.tarjeta-activacion h1 { margin: 7px 0 10px; color: #082c5d; font-size: 1.65rem; letter-spacing: -.03em; }
.tarjeta-activacion .texto-secundario { margin-bottom: 18px; font-size: .84rem; }
.codigo-qr { display: grid; width: 190px; min-height: 190px; margin: 0 auto 10px; place-items: center; padding: 10px; border: 1px solid #dbe5ef; border-radius: 10px; background: #fff; }
.codigo-qr img, .codigo-qr canvas { max-width: 100%; height: auto !important; }
.correo-activacion { margin: 0 0 18px; color: #5e7290; font-size: .72rem; }
.configuracion-manual { margin: -5px 0 18px; color: #607390; font-size: .7rem; text-align: center; }
.configuracion-manual summary { cursor: pointer; color: #356a99; }
.configuracion-manual p { margin: 10px 0 6px; }
.configuracion-manual code { display: block; padding: 8px; border-radius: 7px; color: #153a66; background: #f1f6fa; font-size: .75rem; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }
.codigo-activacion { letter-spacing: .28em; font-size: 1.05rem; }

.panel-usuarios { border: 1px solid var(--borde); border-radius: 14px; background: #fff; overflow: hidden; }
.cabecera-seccion { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; border-bottom: 1px solid var(--borde); }
.cabecera-seccion h2 { margin: 5px 0 5px; font-size: 1.35rem; }
.cabecera-seccion p:last-child { margin: 0; color: var(--texto-suave); font-size: .82rem; }
.acciones-cabecera { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.boton-secundario { padding: 10px 16px; border: 0; border-radius: 8px; color: #fff; background: #171717; font-size: .78rem; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,.08); transition: background .18s ease, transform .18s ease; }
.boton-secundario:hover, .boton-secundario:focus-visible { color: #fff; background: #000; transform: translateY(-1px); outline: none; }
.formulario-usuario { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 15px; padding: 24px 30px; border-bottom: 1px solid var(--borde); background: #f8fbfd; }
.formulario-usuario small { color: var(--texto-suave); font-size: .65rem; }
.formulario-usuario .opcion-admin { grid-column: 1 / 3; align-self: center; color: #536575; font-size: .78rem; }
.formulario-usuario .boton-principal { align-self: end; margin: 0; }
.formulario-colegio-completo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulario-edicion-colegio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tabla-colegios { min-width: 1050px; }
.formulario-colegio .boton-principal { grid-column: 3; }
.tabla-responsive { overflow-x: auto; }
.tabla-usuarios { width: 100%; border-collapse: collapse; font-size: .79rem; }
.tabla-usuarios th { padding: 13px 20px; color: #6a7a88; background: #f8fafb; font-size: .67rem; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.tabla-usuarios td { padding: 16px 20px; border-top: 1px solid #edf1f4; vertical-align: middle; }
.tabla-usuarios td strong, .tabla-usuarios td small { display: block; }
.tabla-usuarios td small { margin-top: 3px; color: #7a8995; }
.estado-2fa { display: inline-flex; padding: 5px 9px; border-radius: 99px; font-size: .66rem; font-weight: 700; }
.estado-activo { color: #1e6b51; background: #e5f4ee; }
.estado-pendiente { color: #806018; background: #fff4d8; }
.estado-no_configurado { color: #6e747a; background: #edf0f2; }
.acciones-usuario { display: flex; gap: 7px; }
.acciones-usuario button { padding: 6px 9px; border: 1px solid #cbd8e4; border-radius: 6px; color: #365a7e; background: #fff; font-size: .65rem; }
.acciones-usuario button.peligro { color: #9b3e3e; border-color: #e4caca; }
.boton-tabla { padding: 6px 9px; border: 1px solid #cbd8e4; border-radius: 6px; color: #365a7e; background: #fff; font-size: .65rem; }
.texto-suave { color: #7a8995; font-size: .7rem; }
.contenido-roles { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 560px; }
.lista-roles { padding: 18px; border-right: 1px solid var(--borde); background: #f8fafb; }
.tarjeta-rol { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 8px; padding: 13px; border: 1px solid transparent; border-radius: 9px; color: #36506a; background: transparent; text-align: left; }
.tarjeta-rol:hover, .tarjeta-rol.activo { border-color: #c8d9e6; background: #fff; box-shadow: 0 4px 12px rgba(25,61,87,.06); }
.tarjeta-rol strong, .tarjeta-rol small { display: block; }
.tarjeta-rol strong { font-size: .79rem; }
.tarjeta-rol small { margin-top: 3px; color: #7a8995; font-size: .62rem; }
.estado-rol { padding: 4px 7px; border-radius: 99px; color: #7a6262; background: #f3e9e9; font-size: .57rem; font-style: normal; }
.estado-rol.activo { color: #1e6b51; background: #e5f4ee; }
.sin-roles { color: #71808d; font-size: .74rem; line-height: 1.5; }
.editor-rol { min-width: 0; padding: 23px 27px; }
.campos-editor-rol { min-width: 0; margin: 0; padding: 0; border: 0; }
.campos-editor-rol:disabled { opacity: .78; }
.datos-rol { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr) auto; align-items: end; gap: 16px; }
.datos-rol label:not(.interruptor-rol) { display: block; margin-bottom: 6px; color: #29465f; font-size: .7rem; font-weight: 600; }
.datos-rol .form-control { min-height: 43px; font-size: .77rem; }
.interruptor-rol { display: flex; align-items: center; gap: 7px; min-height: 43px; color: #536575; font-size: .72rem; white-space: nowrap; }
.interruptor-rol input, .tabla-permisos input { accent-color: #1a6ca8; }
.cabecera-matriz { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-top: 27px; padding-bottom: 12px; }
.cabecera-matriz h3 { margin: 0 0 4px; color: #173548; font-size: .95rem; }
.cabecera-matriz p { margin: 0; color: #748490; font-size: .67rem; }
.acciones-matriz { display: flex; gap: 8px; }
.tabla-permisos { width: 100%; border-collapse: collapse; font-size: .75rem; }
.tabla-permisos th, .tabla-permisos td { padding: 10px 13px; border: 1px solid #e5ebef; }
.tabla-permisos thead th { color: #607181; background: #f7f9fa; font-size: .62rem; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.tabla-permisos thead th:first-child { text-align: left; }
.tabla-permisos td:not(:first-child) { width: 105px; text-align: center; }
.tabla-permisos td strong, .tabla-permisos td small { display: block; }
.tabla-permisos td small { margin-top: 2px; color: #8a969f; font-size: .58rem; }
.tabla-permisos .fila-grupo th { padding: 8px 13px; color: #2b5878; background: #edf4f8; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; }
.tabla-permisos label { display: grid; min-height: 24px; place-items: center; cursor: pointer; }
.tabla-permisos input { width: 16px; height: 16px; }
.pie-editor-rol { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 18px; }
.pie-editor-rol span { color: #758591; font-size: .67rem; }
.modal-usuario { overflow: hidden; border: 1px solid #dbe5ed; border-radius: 14px; box-shadow: 0 20px 55px rgba(19,52,84,.18); }
.modal-usuario .modal-header { padding: 20px 24px; border-color: #e7edf2; }
.modal-usuario .modal-title { margin-top: 4px; color: #173548; font-size: 1.2rem; }
.descripcion-modal { margin: 6px 0 0; color: #72818d; font-size: .75rem; }
.formulario-edicion-usuario { display: grid; gap: 15px; padding: 22px 24px; }
.formulario-edicion-usuario small { color: #778793; font-size: .65rem; }
.opciones-edicion { display: flex; gap: 22px; color: #536575; font-size: .78rem; }
.nota-edicion { margin: 0; padding: 9px 11px; border-radius: 7px; color: #607390; background: #f2f7fa; font-size: .67rem; }
.modal-usuario .modal-footer { padding: 14px 24px; border-color: #e7edf2; }
.boton-cancelar { padding: 9px 14px; border: 1px solid #cfdae3; border-radius: 7px; color: #566877; background: #fff; font-size: .76rem; }

.modal-backdrop.show { opacity: .66; }
.modal-dialog.modal-xl { --bs-modal-width: 900px; }
.modal-alta { overflow: hidden; border: 0; border-radius: 17px; box-shadow: 0 24px 60px rgba(8,27,48,.32); }
.modal-alta form { display: flex; max-height: calc(100vh - 46px); flex-direction: column; }
.cabecera-modal-alta { position: relative; display: flex; align-items: center; gap: 20px; min-height: 126px; overflow: hidden; padding: 21px 30px; color: #fff; background: linear-gradient(115deg, #173f70 0%, #0c2f59 62%, #174e96 100%); }
.modal-dialog-alta { max-width: 820px; }
.cabecera-modal-alta::after { position: absolute; top: -90px; right: -55px; width: 330px; height: 330px; background: linear-gradient(135deg, rgba(33,105,193,.12), rgba(40,116,213,.48)); content: ""; transform: rotate(42deg); }
.icono-principal-modal { position: relative; z-index: 1; display: grid; flex: 0 0 68px; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #2d76d2, #1452a5); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 9px 20px rgba(4,24,51,.22); }
.icono-principal-modal > svg { width: 35px; height: 35px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icono-principal-modal > span { position: absolute; right: -2px; bottom: -1px; display: grid; width: 27px; height: 27px; place-items: center; border: 3px solid #174677; border-radius: 50%; color: #fff; background: #35b965; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.texto-cabecera-modal { position: relative; z-index: 1; min-width: 0; }
.texto-cabecera-modal p { margin: 0 0 6px; color: #d6e5fa; font-size: .74rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.modal-alta .texto-cabecera-modal .modal-title { margin: 0 0 5px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: -.025em; }
.texto-cabecera-modal small { display: block; color: #e6eef9; font-size: .78rem; font-weight: 400; }
.boton-cerrar-modal { position: absolute; z-index: 2; top: 14px; right: 20px; width: 36px; height: 36px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 2rem; font-weight: 200; line-height: 1; opacity: .88; }
.boton-cerrar-modal:hover, .boton-cerrar-modal:focus-visible { opacity: 1; outline: none; }
.cuerpo-modal-alta { min-height: 0; overflow-y: auto; padding: 22px 30px 20px; background: #fff; }
.grilla-modal-alta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 25px; }
.ancho-completo { grid-column: 1 / -1; }
.grupo-campo-modal { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; }
.grupo-campo-modal > .icono-campo-modal { margin-top: 24px; }
.icono-campo-modal { display: grid; flex: 0 0 28px; width: 28px; height: 44px; place-items: center; border-radius: 0; color: #171717; background: transparent; }
.icono-campo-modal svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contenido-campo-modal { min-width: 0; }
.contenido-campo-modal > label { display: block; margin: 0 0 7px; color: #17324f; font-size: .84rem; font-weight: 600; }
.contenido-campo-modal > label b { margin-left: 3px; color: #df3333; font-weight: 600; }
.contenido-campo-modal .form-control, .contenido-campo-modal .form-select { min-height: 46px; border-color: #cfd9e4; border-radius: 8px; color: #263e58; background-color: #fff; font-size: .84rem; }
.contenido-campo-modal .form-control[readonly] { color: #65778a; background: #f8fafc; }
.contenido-campo-modal > small { display: block; margin-top: 6px; color: #5f758d; font-size: .72rem; line-height: 1.4; }
.campo-con-accion { position: relative; }
.campo-con-accion .form-control { padding-right: 54px; }
.campo-con-accion button { position: absolute; top: 50%; right: 9px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; transform: translateY(-50%); border: 0; color: #38536f; background: transparent; }
.campo-con-accion button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fila-opcion-modal { display: grid; grid-template-columns: 21px 28px minmax(0, 1fr); align-items: center; gap: 11px; padding: 0; color: #17324f; cursor: pointer; }
.fila-opcion-modal > input { width: 19px; height: 19px; margin: 0; accent-color: #171717; }
.fila-opcion-modal.fila-opcion-simple { grid-template-columns: 21px minmax(0, 1fr); }
.fila-opcion-modal strong, .fila-opcion-modal small, .aviso-modal-alta strong, .aviso-modal-alta small { display: block; }
.fila-opcion-modal strong { margin-bottom: 3px; font-size: .84rem; font-weight: 600; }
.fila-opcion-modal small { color: #587088; font-size: .75rem; font-weight: 400; }
.aviso-modal-alta { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #d9e9fb; border-radius: 9px; color: #17324f; background: #eff6ff; }
.aviso-modal-alta .icono-campo-modal { color: #171717; background: transparent; }
.aviso-modal-alta strong { margin-bottom: 3px; font-size: .8rem; font-weight: 600; }
.aviso-modal-alta small { color: #526f91; font-size: .72rem; line-height: 1.4; }
.modal-alta .pie-modal-alta { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 30px 15px; border-top: 1px solid #dde5ec; background: #fff; }
.pie-modal-alta .boton-cancelar, .pie-modal-alta .boton-secundario { min-height: 42px; padding: 9px 18px; border-radius: 7px; font-size: .78rem; font-weight: 600; }
.pie-modal-alta .boton-cancelar { color: #263e58; border-color: #c5d0db; }

@media (max-width: 991.98px) {
    .pagina-login { padding: 24px; }
    .contenedor-login { grid-template-columns: 1fr; width: min(720px, calc(100vw - 48px)); height: auto; min-height: 0; transform: none; }
    .panel-acceso-login { min-height: calc(100vh - 48px); padding: 90px 24px 36px; }
    .tarjeta-acceso { position: relative; inset: auto; width: min(100%, 480px); min-height: auto; padding: 36px clamp(28px, 6vw, 42px) 30px; transform: none; }
    .barra-lateral, .barra-lateral.contraida { inset: 0 auto 0 0; width: min(88vw, 305px); border-radius: 0 12px 12px 0; transform: translateX(-100%); transition: transform .25s ease; }
    .barra-lateral.abierta { transform: translateX(0); }
    .barra-lateral.contraida .cabecera-barra { justify-content: initial; padding: 10px 24px 0; }
    .barra-lateral.contraida .texto-marca, .barra-lateral.contraida .texto-item-menu, .barra-lateral.contraida .flecha-submenu, .barra-lateral.contraida .datos-usuario-menu, .barra-lateral.contraida .pie-barra form { display: block; }
    .barra-lateral.contraida .item-menu { grid-template-columns: 30px minmax(0,1fr) 16px; justify-items: initial; padding: 0 25px; }
    .barra-lateral.contraida .opcion-visual { grid-template-columns: 30px minmax(0,1fr); }
    .barra-lateral.contraida .icono-menu { width: 30px; height: 30px; }
    .barra-lateral.contraida .icono-menu svg { width: 20px; height: 20px; }
    .barra-lateral.contraida .grupo-menu.abierto { background: #0d324d; }
    .barra-lateral.contraida .pie-barra { justify-content: initial; padding: 13px 16px; }
    .barra-lateral.contraida .usuario-menu { flex: 1 1 auto; justify-content: initial; }
    .barra-lateral.contraida .submenu-menu { position: static; display: none; width: auto; padding: 0 19px 13px 67px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
    .barra-lateral.contraida .grupo-menu.abierto > .submenu-menu { display: grid; }
    .barra-lateral.contraida .submenu-menu .titulo-submenu { display: none; }
    .capa-menu { position: fixed; inset: 0; z-index: 20; background: rgba(11,25,34,.55); }
    .capa-menu.visible { display: block; }
    .contenido-aplicacion, .barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 0; }
    .barra-superior { justify-content: flex-start; gap: 18px; }
    .estado-sesion { margin-left: auto; }
    .formulario-usuario, .formulario-colegio-completo, .formulario-edicion-colegio { grid-template-columns: 1fr; }
    .cabecera-modal-alta { min-height: 116px; padding: 20px 24px; }
    .icono-principal-modal { flex-basis: 62px; width: 62px; height: 62px; }
    .icono-principal-modal > svg { width: 31px; height: 31px; }
    .cuerpo-modal-alta { padding: 22px 24px; }
    .grilla-modal-alta { grid-template-columns: 1fr; }
    .ancho-completo { grid-column: auto; }
    .modal-alta .pie-modal-alta { padding-inline: 24px; }
    .formulario-usuario .opcion-admin { grid-column: auto; }
    .formulario-colegio .boton-principal { grid-column: auto; }
    .contenido-roles { grid-template-columns: 1fr; }
    .lista-roles { display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
    .tarjeta-rol { flex: 0 0 210px; margin-bottom: 0; }
    .datos-rol { grid-template-columns: 1fr 1fr; }
    .interruptor-rol { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .pagina-login { display: block; padding: 15px; }
    .contenedor-login { width: 100%; min-height: calc(100vh - 30px); border-radius: 20px; }
    .panel-acceso-login { align-items: flex-start; min-height: calc(100vh - 30px); padding: 72px 15px 24px; overflow-y: auto; }
    .tarjeta-acceso { padding: 27px 20px 25px; border-radius: 14px; }
    .tarjeta-acceso h1 { font-size: 1.85rem; }
    .presentacion-login { font-size: .8rem; }
    .pagina-login .form-control { height: 50px; min-height: 50px; padding-left: 50px; font-size: .84rem; }
    .campo-login > svg { left: 17px; width: 20px; height: 20px; }
    .boton-principal { min-height: 50px; }
    .aviso-acceso { align-items: center; justify-content: center; }
    .barra-lateral { width: min(88vw, 305px); }
    .estado-sesion { display: none; }
    .tarjeta-bienvenida { flex-direction: column; gap: 16px; }
    .panel-informativo { align-items: flex-start; flex-direction: column; }
    .pie-aplicacion { flex-direction: column; gap: 5px; }
    .tarjeta-activacion { padding: 30px 22px; }
    .cabecera-seccion { align-items: flex-start; flex-direction: column; padding: 22px; }
    .formulario-usuario { padding: 20px 22px; }
    .modal-dialog.modal-xl { margin: 10px; }
    .modal-alta { border-radius: 14px; }
    .modal-alta form { max-height: calc(100vh - 20px); }
    .cabecera-modal-alta { min-height: 108px; gap: 14px; padding: 17px; }
    .icono-principal-modal { flex-basis: 54px; width: 54px; height: 54px; }
    .icono-principal-modal > svg { width: 27px; height: 27px; }
    .icono-principal-modal > span { width: 27px; height: 27px; border-width: 3px; font-size: 1.15rem; }
    .texto-cabecera-modal p { margin-bottom: 5px; font-size: .65rem; }
    .modal-alta .texto-cabecera-modal .modal-title { margin-bottom: 4px; font-size: 1.2rem; }
    .texto-cabecera-modal small { font-size: .72rem; line-height: 1.35; }
    .boton-cerrar-modal { top: 9px; right: 10px; width: 34px; height: 34px; font-size: 2rem; }
    .cuerpo-modal-alta { padding: 22px 18px; }
    .grilla-modal-alta { gap: 20px; }
    .grupo-campo-modal { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .icono-campo-modal { width: 28px; height: 42px; }
    .icono-campo-modal svg { width: 21px; height: 21px; }
    .fila-opcion-modal { grid-template-columns: 22px 28px minmax(0,1fr); gap: 10px; }
    .aviso-modal-alta { grid-template-columns: 28px minmax(0, 1fr); padding: 14px; }
    .modal-alta .pie-modal-alta { padding: 14px 18px 17px; }
    .editor-rol { padding: 20px 16px; }
    .datos-rol { grid-template-columns: 1fr; }
    .interruptor-rol { grid-column: auto; }
    .cabecera-matriz { align-items: flex-start; flex-direction: column; }
    .pie-editor-rol { align-items: stretch; flex-direction: column; }
}

/* Sistema visual 2026: referencia del portal de gestion */
:root {
    --azul-profundo: #073a5c;
    --azul-medio: #096fca;
    --azul-accion: #0874d8;
    --azul-suave: #e7f2ff;
    --verde: #07965b;
    --fondo: #f5f8fc;
    --texto: #10233f;
    --texto-suave: #637792;
    --borde: #dbe5f0;
    --radio: 15px;
}

.zona-privada { overflow-x: hidden; color: var(--texto); background: radial-gradient(circle at 48% 10%, #fff 0, #f7faff 34%, #f2f6fb 100%); font-family: Poppins, "Segoe UI", sans-serif; }
.barra-lateral { width: 288px; background: linear-gradient(180deg, #0b4163 0%, #073653 65%, #0a466c 100%); box-shadow: 4px 0 18px rgba(8,45,70,.13); }
.cabecera-barra { height: 105px; min-height: 105px; padding: 12px 20px 0; }
.marca-simbolo { flex-basis: 42px; width: 42px; height: 42px; }
.marca-simbolo svg { width: 39px; height: 39px; stroke-width: 1.75; }
.texto-marca strong { font-size: 1rem; font-weight: 650; }
.texto-marca small { color: #c9ddeb; font-size: .65rem; }
.navegacion-principal { padding: 8px 0 22px; }
.item-menu { height: 55px; padding: 0 27px; gap: 13px; color: #e6f0f7; font-size: .84rem; font-weight: 580; }
.item-menu:hover, .item-menu:focus-visible { background: rgba(255,255,255,.07); }
.grupo-menu.abierto { background: rgba(2,31,52,.22); }
.grupo-menu.abierto > .item-menu { background: rgba(2,31,52,.13); }
.submenu-menu { gap: 4px; padding: 4px 15px 13px 39px; }
.submenu-menu button, .submenu-menu a { min-height: 38px; height: auto; padding: 8px 14px 8px 38px; border-radius: 9px; color: #d2e1eb; font-size: .72rem; }
.submenu-menu a.activo, .submenu-menu a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #0875d9, #0867c5); box-shadow: 0 7px 15px rgba(0,43,91,.2); }
.submenu-menu a.activo::before, .submenu-menu a[aria-current="page"]::before { display: none; }
.decoracion-menu { bottom: 77px; height: 150px; opacity: .58; }
.pie-barra { min-height: 78px; padding: 13px 18px; background: rgba(2,28,48,.52); }
.avatar-usuario { border-color: rgba(255,255,255,.72); background: #eef4f9; }
.avatar-menu-iniciales { display: grid; place-items: center; color: #0a426b; background: #f1f6fa; font-size: .72rem; font-weight: 700; }
.usuario-menu strong { font-size: .7rem; font-weight: 600; }
.usuario-menu small { color: #c9dbe7; font-size: .63rem; }

.contenido-aplicacion { min-width: 0; margin-left: 288px; }
.barra-lateral.contraida { width: 82px; }
.barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 82px; }
.barra-lateral.contraida .submenu-menu { left: 82px; }
.barra-superior { min-height: 67px; height: 67px; gap: 14px; padding: 10px 25px 10px 30px; background: rgba(255,255,255,.94); box-shadow: 0 1px 0 rgba(20,56,91,.06); }
.boton-menu-escritorio { display: none !important; }
.inicio-miga { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #173f67; background: #f0f4f8; }
.inicio-miga svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.miga { display: flex; align-items: center; gap: 15px; color: #536985; font-size: .73rem; }
.miga span { color: #9aacc0; }
.estado-sesion { color: #536985; font-size: .72rem; }
.estado-sesion i { background: #07965b; box-shadow: 0 0 0 3px rgba(7,150,91,.08); }
.avatar-cabecera { display: grid; flex: 0 0 38px; width: 38px; height: 38px; margin-left: 8px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #9aa8b8, #75869a); font-size: .68rem; font-weight: 650; }
.contenido-principal { min-width: 0; padding: 22px 31px 48px; }
.pie-aplicacion { padding: 19px 37px; color: #6a7f99; background: rgba(255,255,255,.54); }

.panel-usuarios, .inicio-panel { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.cabecera-seccion { min-height: 102px; padding: 0 3px 22px; border: 0; }
.encabezado-pagina { display: flex; width: 100%; min-width: 0; align-items: center; gap: 20px; }
.encabezado-pagina > div { flex: 1 1 auto; min-width: 0; }
.icono-pagina { display: grid; flex: 0 0 76px; width: 76px; height: 76px; place-items: center; border-radius: 18px; color: #0872d2; background: linear-gradient(145deg, #e7f2ff, #d8eaff); }
.icono-pagina svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cabecera-seccion .etiqueta { display: none; }
.cabecera-seccion h2 { margin: 0 0 5px; color: #0c1e39; font-size: clamp(1.65rem, 2.4vw, 2rem); font-weight: 680; letter-spacing: -.04em; }
.cabecera-seccion p:last-child { color: #4e6584; font-size: .8rem; }
.acciones-cabecera { margin-left: auto; }
.boton-secundario, .boton-principal { border-radius: 10px; color: #fff; background: linear-gradient(135deg, #0878dd, #0561c4); font-weight: 600; box-shadow: 0 8px 18px rgba(6,104,202,.18); }
.boton-secundario { min-height: 55px; padding: 12px 25px; font-size: .77rem; }
.boton-secundario { display: inline-flex; align-items: center; justify-content: center; gap: 11px; }
.boton-secundario svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.boton-secundario:hover, .boton-secundario:focus-visible, .boton-principal:hover, .boton-principal:focus-visible { color: #fff; background: linear-gradient(135deg, #076dca, #0458b4); box-shadow: 0 10px 20px rgba(6,92,179,.24); }

.resumen-seccion { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
.tarjeta-resumen { position: relative; display: flex; align-items: center; gap: 22px; min-height: 133px; padding: 20px 25px; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(28,68,105,.035); }
.tarjeta-resumen:first-child { box-shadow: inset 0 0 0 4px rgba(8,116,216,.06), 0 6px 18px rgba(28,68,105,.035); }
.tarjeta-resumen::after { position: absolute; right: 24px; color: #153f68; font-size: 2rem; content: "›"; }
.icono-resumen { display: grid; flex: 0 0 88px; width: 88px; height: 88px; place-items: center; border-radius: 15px; }
.icono-resumen svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-resumen-azul .icono-resumen { color: #0872d2; background: #e6f2ff; }
.tarjeta-resumen-verde .icono-resumen { color: #07965b; background: #e1f5ea; }
.tarjeta-resumen-ambar .icono-resumen { color: #df9000; background: #fff3d7; }
.tarjeta-resumen > div { display: flex; min-width: 0; flex-direction: column; padding-right: 25px; }
.tarjeta-resumen strong { color: #091b34; font-size: 1.8rem; font-weight: 690; line-height: 1; }
.tarjeta-resumen b { margin-top: 7px; color: #0a68c7; font-size: .77rem; font-weight: 650; }
.tarjeta-resumen-verde b { color: #078a54; }
.tarjeta-resumen-ambar b { color: #d48200; }
.tarjeta-resumen small { margin-top: 3px; color: #607590; font-size: .68rem; }

.panel-datos, .contenido-roles { min-width: 0; border: 1px solid #e0e8f1; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(31,70,106,.035); }
.panel-datos { padding: 17px; }
.barra-filtros { display: grid; grid-template-columns: minmax(280px,1fr) 270px 270px; gap: 18px; margin-bottom: 18px; }
.barra-filtros-colegios { grid-template-columns: minmax(280px,1fr) 270px; }
.buscador-tabla { position: relative; display: block; }
.buscador-tabla svg { position: absolute; top: 50%; left: 17px; width: 21px; height: 21px; transform: translateY(-50%); fill: none; stroke: #496681; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.buscador-tabla input, .filtro-tabla { width: 100%; height: 55px; border: 1px solid #cfdbe8; border-radius: 10px; color: #18304f; background: #fff; font-size: .75rem; outline: 0; }
.buscador-tabla input { padding: 0 18px 0 56px; }
.buscador-tabla input::placeholder { color: #70839c; }
.filtro-tabla { padding: 0 43px 0 19px; font-weight: 550; }
.buscador-tabla input:focus, .filtro-tabla:focus { border-color: #6aa9e8; box-shadow: 0 0 0 3px rgba(8,116,216,.08); }
.tabla-responsive { border-radius: 11px; }
.tabla-usuarios { color: #132742; font-size: .72rem; }
.tabla-usuarios th { height: 60px; padding: 15px 18px; color: #4f6580; background: linear-gradient(180deg, #f4f7fa, #edf2f7); font-size: .62rem; font-weight: 650; }
.tabla-usuarios td { height: 86px; padding: 15px 18px; border-top: 1px solid #e3eaf1; }
.tabla-usuarios tbody tr:first-child td { border-top: 0; }
.tabla-usuarios tbody tr:hover:not(.sin-resultados-tabla) { background: #fbfdff; }
.tabla-usuarios td strong { color: #10233f; font-weight: 650; }
.tabla-usuarios td small { color: #68809e; font-size: .66rem; }
.celda-identidad { display: flex; align-items: center; gap: 15px; min-width: 210px; }
.avatar-iniciales { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #0a4f91; background: linear-gradient(145deg, #e4f1ff, #d7e9fb); font-size: .88rem; font-weight: 700; }
.tabla-usuarios tbody tr:nth-child(even) .avatar-iniciales { color: #745000; background: linear-gradient(145deg, #fff4d9, #ffedc2); }
.rol-tabla { white-space: nowrap; }
.estado-2fa { position: relative; gap: 7px; padding: 5px 9px 5px 26px; color: #10233f; background: transparent; font-size: .68rem; }
.estado-2fa::before { position: absolute; left: 3px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #07965b; content: "✓"; font-size: .58rem; }
.estado-pendiente::before { background: #d9950a; content: "!"; }
.estado-no_configurado::before { background: #8594a5; content: "–"; }
.estado-cuenta { display: inline-flex; min-width: 72px; justify-content: center; padding: 7px 12px; border-radius: 99px; color: #7c5f25; background: #fff1d6; font-size: .65rem; font-weight: 650; }
.estado-cuenta.activo { color: #08764b; background: #d9f3e5; }
.acciones-usuario { flex-wrap: nowrap; }
.acciones-usuario button, .boton-tabla { min-height: 40px; padding: 8px 14px; border-color: #91c3f4; border-radius: 8px; color: #0871d2; font-size: .65rem; font-weight: 600; white-space: nowrap; }
.acciones-usuario button, .tabla-colegios .boton-tabla { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.acciones-usuario button svg, .tabla-colegios .boton-tabla svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acciones-usuario button:hover, .boton-tabla:hover { background: #eff7ff; }
.acciones-usuario button.peligro { color: #db2f3b; border-color: #f0a2aa; background: #fff; }
.acciones-usuario button.peligro:hover { background: #fff4f5; }
.sin-resultados-tabla td { height: 90px; color: #6b7f97; text-align: center; }

.contenido-roles { grid-template-columns: 265px minmax(0,1fr); min-height: 550px; overflow: hidden; }
.lista-roles { padding: 20px 16px; border-color: #e2e9f1; background: #f7faff; }
.tarjeta-rol { min-height: 69px; border-radius: 10px; }
.tarjeta-rol:hover, .tarjeta-rol.activo { border-color: #b9d8f4; background: #fff; box-shadow: 0 5px 14px rgba(26,76,119,.07); }
.tarjeta-rol.activo { box-shadow: inset 3px 0 #0874d8, 0 5px 14px rgba(26,76,119,.07); }
.editor-rol { padding: 26px 28px; }
.datos-rol .form-control, .datos-rol .form-select { min-height: 50px; border-color: #d3deea; }
.cabecera-matriz { margin-top: 30px; }
.tabla-permisos { overflow: hidden; border-radius: 10px; font-size: .72rem; }
.tabla-permisos th, .tabla-permisos td { padding: 12px 15px; border-color: #e1e8ef; }
.tabla-permisos thead th { height: 48px; color: #4e657f; background: #eff4f8; }
.tabla-permisos .fila-grupo th { color: #315b7c; background: #e9f2f8; }
.tabla-permisos input { width: 18px; height: 18px; accent-color: #0874d8; }

.bienvenida-inicio { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 215px; padding: 34px 40px; border: 1px solid #dfe8f1; border-radius: 17px; color: #fff; background: linear-gradient(120deg, #0a4e78, #0875c7); box-shadow: 0 12px 28px rgba(9,77,125,.13); }
.bienvenida-inicio h3 { margin: 16px 0 9px; font-size: 1.7rem; letter-spacing: -.035em; }
.bienvenida-inicio p { max-width: 720px; margin: 0; color: #ddebfa; font-size: .8rem; line-height: 1.6; }
.insignia-en-linea { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 99px; background: rgba(255,255,255,.13); font-size: .67rem; }
.insignia-en-linea i { width: 7px; height: 7px; border-radius: 50%; background: #42e59b; }
.escudo-inicio { display: grid; flex: 0 0 105px; width: 105px; height: 105px; place-items: center; border-radius: 28px; color: #fff; background: rgba(255,255,255,.13); }
.escudo-inicio svg { width: 59px; height: 59px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.accesos-inicio { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.accesos-inicio a { display: grid; grid-template-columns: 55px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 16px; min-height: 105px; padding: 19px 22px; border: 1px solid #dfe7f0; border-radius: 14px; color: #10233f; background: #fff; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.accesos-inicio a:hover { border-color: #a9cfee; box-shadow: 0 9px 20px rgba(32,75,112,.07); transform: translateY(-2px); }
.accesos-inicio a > span { display: grid; grid-row: 1 / 3; width: 55px; height: 55px; place-items: center; border-radius: 13px; color: #0872d2; background: #e7f2ff; }
.accesos-inicio svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.accesos-inicio strong { align-self: end; font-size: .78rem; }
.accesos-inicio small { align-self: start; color: #6b7f98; font-size: .63rem; }
.accesos-inicio i { grid-column: 3; grid-row: 1 / 3; color: #0872d2; font-size: 1.35rem; font-style: normal; }
.estado-sistema-inicio { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px 30px; border: 1px solid #dfe7f0; border-radius: 14px; background: #fff; }
.estado-sistema-inicio h3 { margin: 4px 0 5px; font-size: 1rem; }
.estado-sistema-inicio p:last-child { margin: 0; color: #667b94; font-size: .7rem; }
.estado-sistema-inicio .insignia-estado { display: inline-flex; align-items: center; gap: 7px; }
.estado-sistema-inicio .insignia-estado i { width: 7px; height: 7px; border-radius: 50%; background: #07965b; }

.modal-usuario, .modal-alta { border: 0; border-radius: 17px; box-shadow: 0 24px 65px rgba(10,47,82,.22); }
.modal-usuario .modal-header { padding: 22px 26px; background: #f8fbfe; }
.cabecera-modal-alta { background: linear-gradient(120deg, #094a75, #0872c6); }
.icono-principal-modal { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.fila-opcion-modal > input { accent-color: #0874d8; }
.aviso-modal-alta { border-color: #cfe3f7; background: #f0f7ff; }
.boton-cancelar { min-height: 40px; border-radius: 8px; }
.swal2-confirm { background: #0871d2 !important; }
.swal2-confirm:hover, .swal2-confirm:focus-visible { background: #0561b9 !important; }

.pagina-login { background: radial-gradient(circle at 70% 20%, #f3f8fd, #dbe5ee); }
.pagina-login .boton-principal { background: linear-gradient(135deg, #0878dd, #0561c4); }
.pagina-activacion { background: radial-gradient(circle at 50% 10%, #fff, #e9f2fa); }
.tarjeta-activacion { border-color: #d6e3ef; box-shadow: 0 20px 55px rgba(22,67,106,.12); }

@media (max-width: 1300px) {
    .barra-filtros { grid-template-columns: minmax(260px,1fr) 220px 220px; }
    .barra-filtros-colegios { grid-template-columns: minmax(260px,1fr) 220px; }
    .tarjeta-resumen { gap: 16px; padding: 18px; }
    .icono-resumen { flex-basis: 70px; width: 70px; height: 70px; }
}

@media (max-width: 1100px) {
    .resumen-seccion { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tarjeta-resumen:last-child { grid-column: 1 / -1; }
    .barra-filtros { grid-template-columns: 1fr 1fr; }
    .buscador-tabla { grid-column: 1 / -1; }
}

@media (max-width: 991.98px) {
    .barra-lateral, .barra-lateral.contraida { width: min(88vw, 300px); }
    .contenido-aplicacion, .barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 0; }
    .boton-menu.d-lg-none { display: grid !important; }
    .inicio-miga { display: none; }
    .contenido-principal { padding: 22px; }
    .resumen-seccion { gap: 14px; }
    .contenido-roles { grid-template-columns: 1fr; }
    .accesos-inicio { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .barra-superior { padding-inline: 16px; }
    .miga { gap: 8px; font-size: .66rem; }
    .avatar-cabecera { display: none; }
    .contenido-principal { padding: 18px 14px 35px; }
    .cabecera-seccion { align-items: stretch; gap: 18px; }
    .encabezado-pagina { align-items: flex-start; gap: 13px; }
    .icono-pagina { flex-basis: 56px; width: 56px; height: 56px; border-radius: 14px; }
    .icono-pagina svg { width: 29px; height: 29px; }
    .cabecera-seccion h2 { font-size: 1.38rem; }
    .cabecera-seccion p:last-child { overflow-wrap: anywhere; line-height: 1.5; }
    .acciones-cabecera, .acciones-cabecera .boton-secundario { width: 100%; }
    .resumen-seccion { grid-template-columns: 1fr; }
    .tarjeta-resumen:last-child { grid-column: auto; }
    .tarjeta-resumen { min-height: 110px; }
    .barra-filtros, .barra-filtros-colegios { grid-template-columns: 1fr; }
    .buscador-tabla { grid-column: auto; }
    .panel-datos { padding: 12px; }
    .panel-usuarios, .inicio-panel, .panel-datos { width: 100%; max-width: 100%; }
    .tabla-responsive { width: 100%; max-width: calc(100vw - 52px); }
    .bienvenida-inicio { align-items: flex-start; padding: 26px; }
    .escudo-inicio { display: none; }
    .estado-sistema-inicio { align-items: flex-start; flex-direction: column; }
    .datos-rol { grid-template-columns: 1fr; }
    .acciones-matriz { width: 100%; flex-wrap: wrap; }
}

/* Lenguaje visual administrativo: navegación profunda, superficies claras y acento azul. */
:root {
    --azul-profundo: #092a45;
    --azul-medio: #123b5c;
    --azul-accion: #0878ed;
    --azul-accion-oscuro: #075fc4;
    --fondo: #f3f7fb;
    --texto: #0a2342;
    --texto-suave: #71839c;
    --borde: #dce6f1;
    --radio: 16px;
}

.zona-privada {
    background: #f3f7fb;
    color: #0a2342;
}

.barra-lateral {
    width: 280px;
    color: #c4d3e2;
    background: linear-gradient(180deg, #123653 0%, #082842 100%);
    border-radius: 0 0 20px 0;
    box-shadow: 8px 0 26px rgba(8, 35, 58, .12);
}

.cabecera-barra {
    height: 116px;
    min-height: 116px;
    gap: 11px;
    padding: 18px 20px 4px;
}

.cabecera-barra > .marca-simbolo,
.cabecera-barra > .texto-marca { transform: none; }
.marca-simbolo { flex-basis: 31px; width: 31px; height: 31px; }
.marca-simbolo svg { width: 27px; height: 27px; stroke-width: 1.7; }
.texto-marca { gap: 5px; }
.texto-marca strong { font-size: 1.08rem; font-weight: 700; letter-spacing: -.035em; }
.texto-marca small { color: #86a5c1; font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.boton-colapsar-lateral {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(180, 204, 225, .13);
    border-radius: 9px;
    color: #c8d7e5;
    background: rgba(255,255,255,.035);
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.boton-colapsar-lateral:hover,
.boton-colapsar-lateral:focus-visible { color: #fff; border-color: rgba(74,163,240,.45); background: rgba(32,128,211,.18); outline: none; }
.boton-colapsar-lateral svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.navegacion-principal { padding: 10px 21px 22px; }
.item-menu {
    position: relative;
    height: 52px;
    padding: 0 15px;
    border-radius: 11px;
    color: #bdcddd;
    font-size: .78rem;
    font-weight: 600;
}
.item-menu:hover,
.item-menu:focus-visible { color: #fff; background: rgba(255,255,255,.055); }
.item-menu.activo,
.grupo-menu.abierto > .item-menu { color: #fff; background: rgba(41, 91, 130, .4); border-radius: 0; }
.item-menu.activo::before,
.grupo-menu.abierto > .item-menu::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -21px;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background: #1493ff;
    content: "";
}
.grupo-menu.abierto { background: transparent; }
.submenu-menu { gap: 2px; padding: 3px 4px 9px 43px; border-left: 1px solid rgba(133,164,191,.15); margin-left: 29px; }
.submenu-menu button,
.submenu-menu a { min-height: 36px; padding: 7px 10px; color: #b8cadb; border-radius: 8px; font-size: .69rem; }
.submenu-menu a.activo,
.submenu-menu a[aria-current="page"] {
    position: relative;
    color: #fff;
    background: rgba(20, 147, 255, .14);
    border-radius: 0;
    box-shadow: inset 3px 0 #1493ff;
    font-weight: 700;
}
.submenu-menu a.activo::before,
.submenu-menu a[aria-current="page"]::before {
    display: block;
    top: 50%;
    left: -16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d9cff;
    box-shadow: 0 0 0 4px rgba(45,156,255,.12);
    transform: translateY(-50%);
}
.decoracion-menu { display: none; }
.pie-barra {
    min-height: 92px;
    margin: auto 21px 21px;
    padding: 14px;
    border: 1px solid rgba(151,180,205,.11);
    border-radius: 12px;
    background: rgba(22, 59, 89, .5);
}

.contenido-aplicacion { margin-left: 280px; }
.barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 82px; }
.barra-lateral.contraida .cabecera-barra > .marca-simbolo { display: none; }
.barra-lateral.contraida .boton-colapsar-lateral { margin: 0; color: #fff; background: rgba(20,147,255,.16); }
.barra-lateral.contraida .pie-barra { margin: auto 10px 16px; }
.barra-superior {
    height: 98px;
    min-height: 98px;
    gap: 11px;
    padding: 15px 26px 15px 34px;
    border-bottom: 1px solid #dce5ef;
    background: #fff;
    box-shadow: none;
}
.titulo-barra-superior { min-width: 0; margin-right: auto; }
.titulo-barra-superior p {
    margin: 0 0 5px;
    color: #8494a8;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
}
.barra-superior .titulo-barra-superior h1 {
    margin: 0;
    color: #092442;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -.025em;
}
.avatar-cabecera {
    width: 39px;
    height: 39px;
    margin-left: 0;
    border-radius: 11px;
    color: #0868cf;
    background: #eaf3ff;
}
.usuario-cabecera { display: flex; min-width: 126px; flex-direction: column; gap: 2px; }
.usuario-cabecera strong { color: #0b213e; font-size: .75rem; font-weight: 650; }
.usuario-cabecera small { color: #7d8ca1; font-size: .62rem; }
.seguridad-cabecera,
.salida-cabecera button {
    display: grid;
    width: 39px;
    height: 39px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #173a5c;
    background: #f7f9fc;
}
.seguridad-cabecera svg,
.salida-cabecera svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.salida-cabecera { margin: 0; }
.salida-cabecera button:hover { color: #0878ed; background: #edf5ff; }

.contenido-principal { padding: 26px 32px 52px; }
.cabecera-seccion { min-height: 80px; padding: 0 0 20px; }
.encabezado-pagina { gap: 0; }
.icono-pagina { display: none; }
.cabecera-seccion .etiqueta {
    display: block;
    margin-bottom: 7px;
    color: #7387a2;
    font-size: .6rem;
    letter-spacing: .15em;
}
.cabecera-seccion h2 { margin: 0 0 5px; font-size: 1.35rem; font-weight: 650; letter-spacing: -.03em; }
.cabecera-seccion p:last-child { color: #8492a6; font-size: .72rem; }
.boton-secundario,
.boton-principal {
    border-radius: 10px;
    background: linear-gradient(135deg, #1685ed, #156bd4);
    box-shadow: 0 8px 18px rgba(14, 103, 205, .18);
}
.boton-secundario { min-height: 46px; padding: 11px 20px; font-size: .73rem; }

.resumen-seccion { gap: 16px; margin-bottom: 20px; }
.tarjeta-resumen {
    min-height: 112px;
    gap: 16px;
    padding: 18px 20px;
    border-color: #dce6f0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(30, 65, 101, .035);
}
.tarjeta-resumen:first-child { box-shadow: 0 7px 22px rgba(30, 65, 101, .035); }
.tarjeta-resumen::after { display: none; }
.icono-resumen { flex-basis: 58px; width: 58px; height: 58px; border-radius: 13px; }
.icono-resumen svg { width: 27px; height: 27px; }
.tarjeta-resumen strong { font-size: 1.55rem; }
.tarjeta-resumen b { font-size: .79rem; }
.tarjeta-resumen small { font-size: .73rem; line-height: 1.45; }

.panel-datos,
.contenido-roles {
    border: 1px solid #d9e4ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(34, 68, 103, .04);
}
.panel-datos { padding: 0; overflow: hidden; }
.barra-filtros {
    gap: 14px;
    margin: 0;
    padding: 18px;
    border-bottom: 1px solid #e5ecf3;
    background: #fff;
}
.buscador-tabla input,
.filtro-tabla {
    height: 46px;
    border-color: #d5e0eb;
    border-radius: 10px;
    color: #1b3553;
    font-size: .72rem;
}
.buscador-tabla svg { left: 15px; width: 18px; height: 18px; stroke: #7790aa; stroke-width: 1.7; }
.buscador-tabla input { padding-left: 45px; }
.tabla-responsive { border-radius: 0; }
.tabla-usuarios { color: #112d4c; font-size: .74rem; }
.tabla-usuarios th {
    height: 43px;
    padding: 11px 15px;
    color: #6a7f9c;
    background: #f6f8fb;
    font-size: .59rem;
    font-weight: 650;
    letter-spacing: .065em;
}
.tabla-usuarios td { height: 66px; padding: 12px 15px; border-color: #e6ecf2; }
.tabla-usuarios td strong { color: #0b2748; font-weight: 650; }
.avatar-iniciales { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; font-size: .72rem; }
.estado-cuenta.activo { color: #078b56; background: #e5f6ed; }
.estado-2fa { color: #087d50; }
.acciones-usuario button,
.boton-tabla { min-height: 36px; padding: 7px 11px; }

.bienvenida-inicio {
    border: 0;
    border-radius: 17px;
    background: linear-gradient(120deg, #0d4b91 0%, #0767d8 100%);
    box-shadow: 0 12px 25px rgba(10, 84, 174, .15);
}
.accesos-inicio a,
.estado-sistema-inicio { border-color: #dce6f0; box-shadow: 0 7px 22px rgba(30, 65, 101, .035); }

@media (max-width: 991.98px) {
    .barra-lateral,
    .barra-lateral.contraida { width: min(88vw, 280px); border-radius: 0 0 18px 0; }
    .contenido-aplicacion,
    .barra-lateral.contraida ~ .contenido-aplicacion { margin-left: 0; }
    .barra-superior { height: 82px; min-height: 82px; }
}

@media (max-width: 700px) {
    .barra-superior { padding-inline: 14px; }
    .titulo-barra-superior p { display: none; }
    .barra-superior .titulo-barra-superior h1 { font-size: 1rem; }
    .usuario-cabecera,
    .seguridad-cabecera { display: none; }
    .avatar-cabecera { width: 36px; height: 36px; }
    .salida-cabecera button { width: 36px; height: 36px; }
    .contenido-principal { padding: 20px 14px 38px; }
    .cabecera-seccion { flex-direction: column; }
    .cabecera-seccion h2 { font-size: 1.28rem; }
    .panel-datos { padding: 0; }
    .barra-filtros { padding: 12px; }
    .tabla-responsive { max-width: calc(100vw - 30px); }
}

/* Tablas de registros con mayor jerarquía visual. */
.panel-usuarios {
    overflow: hidden;
    border: 1px solid #dce6f1;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(31, 67, 105, .055);
}
.panel-usuarios > .cabecera-seccion {
    min-height: 124px;
    padding: 22px 25px;
    border-bottom: 1px solid #e1e9f2;
    background: #fff;
}
.panel-usuarios .encabezado-pagina { gap: 19px; }
.panel-usuarios .icono-pagina {
    display: grid;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #1682f0, #075fd4);
    box-shadow: 0 8px 17px rgba(8,105,222,.17);
}
.panel-usuarios .icono-pagina svg { width: 32px; height: 32px; }
.panel-usuarios .cabecera-seccion h2 { font-size: 1.62rem; font-weight: 700; }
.panel-usuarios .cabecera-seccion p:last-child { font-size: .86rem; }
.panel-usuarios > .resumen-seccion {
    margin: 0;
    padding: 22px 24px 0;
    background: #fbfdff;
}
.panel-usuarios > .panel-datos {
    margin: 22px 24px 24px;
    border-radius: 14px;
    box-shadow: none;
}

.boton-secundario,
.boton-principal {
    color: #fff;
    background: #151515;
    box-shadow: 0 7px 16px rgba(0,0,0,.13);
}
.boton-secundario:hover,
.boton-secundario:focus-visible,
.boton-principal:hover,
.boton-principal:focus-visible {
    color: #fff;
    background: #000;
    box-shadow: 0 9px 18px rgba(0,0,0,.18);
}
.panel-usuarios .boton-secundario { min-height: 50px; padding-inline: 23px; font-size: .82rem; }
.panel-usuarios .acciones-cabecera .boton-secundario {
    min-width: 190px;
    padding-inline: 26px;
    white-space: nowrap;
}

.panel-usuarios .barra-filtros {
    gap: 16px;
    padding: 20px;
    background: #fff;
}
.panel-usuarios .buscador-tabla input,
.panel-usuarios .filtro-tabla {
    height: 54px;
    border-color: #cfdceb;
    border-radius: 11px;
    color: #102b4a;
    background-color: #fff;
    font-size: .82rem;
}
.panel-usuarios .filtro-tabla { font-weight: 600; }
.panel-usuarios .buscador-tabla svg { left: 18px; width: 21px; height: 21px; }
.panel-usuarios .buscador-tabla input { padding-left: 53px; }

.panel-usuarios .tabla-responsive { margin: 0 20px; border: 1px solid #dce5ef; border-radius: 13px; }
.panel-usuarios .tabla-usuarios { font-size: .83rem; }
.panel-usuarios .tabla-usuarios th {
    height: 54px;
    padding: 14px 16px;
    color: #526b8c;
    background: linear-gradient(180deg, #f5f8fc, #edf3f9);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .055em;
    white-space: nowrap;
}
.panel-usuarios .tabla-usuarios th:not(:last-child)::after { display: none; }
.panel-usuarios .tabla-usuarios th button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.panel-usuarios .tabla-usuarios th button::after {
    color: #7890ad;
    content: "↕";
    font-size: .76rem;
    font-weight: 500;
}
.panel-usuarios .tabla-usuarios th button:hover,
.panel-usuarios .tabla-usuarios th button:focus-visible { color: #0874d8; outline: none; }
.panel-usuarios .tabla-usuarios th[aria-sort="ascending"] button::after { color: #0874d8; content: "↑"; }
.panel-usuarios .tabla-usuarios th[aria-sort="descending"] button::after { color: #0874d8; content: "↓"; }
.panel-usuarios .tabla-usuarios td {
    height: 82px;
    padding: 14px 16px;
    color: #173453;
    border-top-color: #dde6ef;
    font-size: .86rem;
}
.panel-usuarios .tabla-usuarios tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.panel-usuarios .tabla-usuarios tbody tr:hover:not(.sin-resultados-tabla) {
    background: #f8fbff;
    box-shadow: inset 3px 0 #1682ef;
}
.panel-usuarios .tabla-usuarios td strong { font-size: .88rem; }
.panel-usuarios .tabla-usuarios td small { margin-top: 5px; font-size: .79rem; line-height: 1.4; }
.panel-usuarios .celda-identidad { gap: 14px; }
.panel-usuarios .avatar-iniciales {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: .8rem;
}
.panel-usuarios .avatar-iniciales svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.panel-usuarios .estado-2fa { padding-block: 7px; font-size: .76rem; font-weight: 650; }
.panel-usuarios .estado-cuenta { min-width: 78px; padding: 8px 13px; font-size: .73rem; }
.panel-usuarios .acciones-usuario { gap: 8px; }
.panel-usuarios .acciones-usuario button,
.panel-usuarios .boton-tabla {
    min-height: 40px;
    padding: 8px 13px;
    border-color: #1a1a1a;
    border-radius: 8px;
    color: #151515;
    background: #fff;
    font-size: .72rem;
    font-weight: 650;
}
.panel-usuarios .acciones-usuario button:hover,
.panel-usuarios .boton-tabla:hover { color: #fff; background: #151515; }
.panel-usuarios .acciones-usuario button.peligro {
    color: #df3341;
    border-color: #ef7c86;
    background: #fff;
}
.panel-usuarios .acciones-usuario button.peligro:hover { color: #fff; background: #df3341; }

.pie-tabla-registros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
    padding: 14px 20px;
}
.pie-tabla-registros p { margin: 0; color: #657d9b; font-size: .82rem; }
.pie-tabla-registros p strong { color: #163858; }
.paginacion-tabla { display: flex; align-items: center; gap: 8px; }
.paginacion-tabla button,
.paginacion-tabla span {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #d8e3ef;
    border-radius: 9px;
    color: #9aabc0;
    background: #fff;
    font-size: .88rem;
}
.paginacion-tabla span { color: #fff; border-color: #151515; background: #151515; font-weight: 700; }
.paginacion-tabla button:disabled { cursor: default; opacity: .62; }

@media (max-width: 700px) {
    .panel-usuarios { border-radius: 14px; }
    .panel-usuarios > .cabecera-seccion { padding: 18px; }
    .panel-usuarios .icono-pagina { flex-basis: 52px; width: 52px; height: 52px; }
    .panel-usuarios .icono-pagina svg { width: 26px; height: 26px; }
    .panel-usuarios .cabecera-seccion h2 { font-size: 1.32rem; }
    .panel-usuarios > .resumen-seccion { padding: 14px 14px 0; }
    .panel-usuarios > .panel-datos { margin: 14px; }
    .panel-usuarios .barra-filtros { padding: 14px; }
    .panel-usuarios .tabla-responsive { max-width: none; margin: 0 14px; }
    .pie-tabla-registros { min-height: 68px; padding: 12px 14px; }
}

/* Exportación y paginación común de tablas. */
.panel-usuarios .barra-filtros { grid-template-columns: minmax(300px, 1fr) 230px 230px auto; }
.panel-usuarios .barra-filtros-colegios { grid-template-columns: minmax(300px, 1fr) 230px auto; }
.acciones-exportacion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
.acciones-exportacion button {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid #cfdbe8;
    border-radius: 10px;
    color: #102e4f;
    background: #fff;
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.acciones-exportacion button:hover,
.acciones-exportacion button:focus-visible {
    color: #fff;
    border-color: #151515;
    background: #151515;
    outline: none;
    transform: translateY(-1px);
}
.acciones-exportacion svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.acciones-exportacion [data-exportar-excel] {
    color: #0b8c52;
    border-color: #8fd2b3;
    background: #effaf5;
}
.acciones-exportacion [data-exportar-excel]:hover,
.acciones-exportacion [data-exportar-excel]:focus-visible {
    color: #fff;
    border-color: #087443;
    background: #087443;
}
.acciones-exportacion [data-exportar-pdf] {
    color: #df3341;
    border-color: #f0a2aa;
    background: #fff4f5;
}
.acciones-exportacion [data-exportar-pdf]:hover,
.acciones-exportacion [data-exportar-pdf]:focus-visible {
    color: #fff;
    border-color: #cf2634;
    background: #cf2634;
}
.acciones-exportacion-fuera { margin: 0 0 14px; }
.contenido-roles .acciones-exportacion-fuera { padding: 0 2px; }
.pie-tabla-secundaria { padding-inline: 0; }
.paginacion-tabla button:not(:disabled) { color: #173858; cursor: pointer; }
.paginacion-tabla button:not(:disabled):hover { color: #fff; border-color: #151515; background: #151515; }

@media (max-width: 1200px) {
    .panel-usuarios .barra-filtros,
    .panel-usuarios .barra-filtros-colegios { grid-template-columns: minmax(260px, 1fr) 210px auto; }
    .panel-usuarios .barra-filtros:not(.barra-filtros-colegios) .buscador-tabla { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .panel-usuarios .barra-filtros,
    .panel-usuarios .barra-filtros-colegios { grid-template-columns: 1fr; }
    .panel-usuarios .barra-filtros:not(.barra-filtros-colegios) .buscador-tabla { grid-column: auto; }
    .acciones-exportacion { justify-content: flex-end; }
}

/* Perfil personal y estados activos del menú. */
.item-menu.activo,
.grupo-menu.abierto > .item-menu { font-weight: 500; }
.submenu-menu a.activo,
.submenu-menu a[aria-current="page"] { font-weight: 400; }
.icono-usuario-generico svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 174px;
    padding: 6px 10px 6px 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    background: transparent;
    text-align: left;
    transition: border-color .16s ease, background .16s ease;
}
.perfil-cabecera:hover,
.perfil-cabecera:focus-visible { border-color: #dbe6f1; background: #f7faff; outline: none; }
.perfil-cabecera .avatar-cabecera { margin: 0; }
.perfil-cabecera .avatar-cabecera svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.modal-perfil { overflow: hidden; }
.cabecera-perfil { padding: 20px 22px; border-bottom: 1px solid #e3eaf2; background: #f8fbfe; }
.titulo-perfil { display: flex; align-items: center; gap: 13px; }
.titulo-perfil > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 11px; color: #0872d2; background: #e7f2ff; }
.titulo-perfil svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.titulo-perfil p { margin: 0 0 2px; color: #7589a4; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.titulo-perfil h2 { color: #0b2748; font-size: 1.25rem; font-weight: 700; }
.cuerpo-perfil { padding: 22px; }
.grilla-datos-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.cuerpo-perfil label { display: block; margin-bottom: 6px; color: #294560; font-size: .72rem; font-weight: 650; }
.cuerpo-perfil .form-control { min-height: 45px; font-size: .78rem; }
.cuerpo-perfil .form-control[readonly] { color: #60758e; border-color: #e0e7ef; background: #f6f8fb; }
.separador-perfil { display: flex; align-items: center; gap: 12px; margin: 24px 0 17px; color: #173858; font-size: .74rem; font-weight: 700; }
.separador-perfil::after { height: 1px; flex: 1; background: #e1e8f0; content: ""; }
.campos-clave-perfil { display: grid; gap: 13px; }
.campos-clave-perfil small { display: block; margin-top: 5px; color: #7d8da1; font-size: .66rem; }

@media (max-width: 700px) {
    .perfil-cabecera { min-width: 0; padding: 4px; }
    .perfil-cabecera .usuario-cabecera { display: none; }
    .grilla-datos-perfil { grid-template-columns: 1fr; }
}

/* Iconografía sobria de página y acabado uniforme de modales. */
.panel-usuarios .encabezado-pagina { gap: 14px; }
.panel-usuarios .icono-pagina {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 58px;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: #0b5ea9;
    background: transparent;
    box-shadow: none;
}
.panel-usuarios .icono-pagina svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.seccion-modal-alta {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 3px;
    padding: 13px 15px;
    border: 1px solid #d4e4f5;
    border-radius: 9px;
    color: #173653;
    background: #f2f7fd;
}
.seccion-modal-alta .icono-campo-modal { color: #0b65bd; }
.seccion-modal-alta strong,
.seccion-modal-alta small { display: block; }
.seccion-modal-alta strong { margin-bottom: 2px; font-size: .8rem; font-weight: 650; }
.seccion-modal-alta small { color: #68809a; font-size: .69rem; }
.modal-perfil .cuerpo-modal-alta { padding-block: 24px; }
.modal-perfil .grupo-campo-modal > .icono-campo-modal { color: #1c5f98; }

.modal-usuario:not(.modal-alta) { border: 0; border-radius: 17px; box-shadow: 0 24px 60px rgba(8,27,48,.3); }
.modal-usuario:not(.modal-alta) .modal-header {
    min-height: 104px;
    padding: 22px 27px;
    border: 0;
    color: #fff;
    background: linear-gradient(115deg, #173f70 0%, #0c2f59 62%, #174e96 100%);
}
.modal-usuario:not(.modal-alta) .modal-header .etiqueta { color: #cfe1f6; }
.modal-usuario:not(.modal-alta) .modal-header .modal-title { color: #fff; font-size: 1.4rem; font-weight: 600; }
.modal-usuario:not(.modal-alta) .modal-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }
.modal-usuario:not(.modal-alta) .modal-body { padding: 24px 27px; background: #fff; }
.modal-usuario:not(.modal-alta) .form-control,
.modal-usuario:not(.modal-alta) .form-select { min-height: 46px; border-color: #ccd8e5; border-radius: 8px; }
.modal-usuario:not(.modal-alta) .modal-footer { padding: 14px 27px 17px; background: #fff; }

@media (max-width: 700px) {
    .panel-usuarios .icono-pagina { flex-basis: 38px; width: 38px; height: 48px; }
    .panel-usuarios .icono-pagina svg { width: 31px; height: 31px; }
    .modal-alta .grilla-modal-alta { grid-template-columns: 1fr; }
    .modal-alta .ancho-completo { grid-column: auto; }
}

/* Selector de roles horizontal: evita comprimir el editor en una columna lateral. */
.panel-roles .contenido-roles {
    display: block;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.panel-roles .lista-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    padding: 20px 24px;
    border: 0;
    border-bottom: 1px solid #dfe8f1;
    background: #f7faff;
}
.panel-roles .tarjeta-rol {
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #d8e3ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}
.panel-roles .tarjeta-rol:hover {
    border-color: #9dc5e9;
    background: #fff;
    box-shadow: 0 6px 14px rgba(26,76,119,.06);
}
.panel-roles .tarjeta-rol.activo {
    border-color: #65a9e7;
    background: #fafdff;
    box-shadow: inset 0 3px #0874d8, 0 6px 14px rgba(26,76,119,.07);
}
.panel-roles .tarjeta-rol strong { font-size: .82rem; }
.panel-roles .tarjeta-rol small { margin-top: 5px; font-size: .68rem; }
.panel-roles .estado-rol { padding: 5px 9px; font-size: .62rem; }
.panel-roles .editor-rol {
    width: 100%;
    padding: 27px 30px 30px;
    background: #fff;
}
.panel-roles .datos-rol { grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.5fr) auto; }
.panel-roles .cabecera-matriz { margin-top: 28px; }
.panel-roles .tabla-responsive { width: 100%; max-width: none; }
.panel-roles .tabla-permisos { width: 100%; }

@media (max-width: 900px) {
    .panel-roles .lista-roles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 16px; }
    .panel-roles .editor-rol { padding: 22px 18px; }
    .panel-roles .datos-rol { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .panel-roles .lista-roles { display: flex; overflow-x: auto; }
    .panel-roles .tarjeta-rol { flex: 0 0 220px; }
}

/* Roles como pestañas limpias y tipografía de lectura cómoda. */
.panel-roles .lista-roles {
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding: 0 30px;
    overflow-x: auto;
    border-bottom: 1px solid #dfe7ef;
    background: #fff;
}
.panel-roles .tarjeta-rol,
.panel-roles .tarjeta-rol:hover,
.panel-roles .tarjeta-rol.activo {
    flex: 0 0 auto;
    width: auto;
    min-width: 185px;
    min-height: 68px;
    margin: 0;
    padding: 15px 3px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    --color-rol: #0874d8;
    --fondo-rol: #eef7ff;
}
.panel-roles .tarjeta-rol:hover { border-bottom-color: var(--color-rol); background: var(--fondo-rol); }
.panel-roles .tarjeta-rol.activo { border-bottom-color: var(--color-rol); background: var(--fondo-rol); }
.panel-roles .tono-rol-azul { --color-rol: #0874d8; --fondo-rol: #eef7ff; }
.panel-roles .tono-rol-verde { --color-rol: #15835d; --fondo-rol: #eef9f4; }
.panel-roles .tono-rol-violeta { --color-rol: #7652c7; --fondo-rol: #f5f1ff; }
.panel-roles .tono-rol-ambar { --color-rol: #ad700a; --fondo-rol: #fff7e7; }
.panel-roles .tono-rol-turquesa { --color-rol: #087d89; --fondo-rol: #edf9fa; }
.panel-roles .tarjeta-rol strong { color: #173858; font-size: .9rem; font-weight: 600; }
.panel-roles .tarjeta-rol small { margin-top: 4px; color: #71859d; font-size: .74rem; }
.panel-roles .icono-perfil-rol {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--color-rol);
    background: var(--fondo-rol);
}
.panel-roles .icono-perfil-rol svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.panel-roles .tarjeta-rol.activo .icono-perfil-rol { color: #fff; background: var(--color-rol); }
.panel-roles .estado-rol { padding: 5px 9px; font-size: .68rem; }
.panel-roles .editor-rol { padding: 30px; }
.panel-roles .datos-rol label:not(.interruptor-rol) { margin-bottom: 8px; font-size: .8rem; }
.panel-roles .datos-rol .form-control,
.panel-roles .datos-rol .form-select { min-height: 50px; font-size: .85rem; }
.panel-roles .interruptor-rol { min-height: 50px; font-size: .8rem; }
.panel-roles .cabecera-matriz h3 { font-size: 1.08rem; }
.panel-roles .cabecera-matriz p { font-size: .77rem; line-height: 1.5; }
.panel-roles .tabla-permisos { font-size: .82rem; }
.panel-roles .tabla-permisos thead th { font-size: .7rem; }
.panel-roles .tabla-permisos td strong { font-size: .83rem; }
.panel-roles .tabla-permisos td small { margin-top: 4px; font-size: .68rem; }
.panel-roles .tabla-permisos .fila-grupo th { font-size: .7rem; }
.panel-roles .pie-editor-rol span { font-size: .75rem; }

@media (max-width: 700px) {
    .panel-roles .lista-roles { gap: 22px; padding-inline: 18px; }
    .panel-roles .tarjeta-rol,
    .panel-roles .tarjeta-rol:hover,
    .panel-roles .tarjeta-rol.activo { min-width: 170px; }
    .panel-roles .editor-rol { padding: 22px 18px; }
}

/* Auditoría de accesos y acciones. */
.panel-auditoria .resumen-auditoria .icono-resumen {
    color: #111;
    background: #f0f2f4;
    font-size: .9rem;
    font-weight: 750;
}
.panel-auditoria .resumen-auditoria .tarjeta-resumen-verde .icono-resumen { color: #087847; background: #e4f5eb; }
.panel-auditoria .resumen-auditoria .tarjeta-resumen-ambar .icono-resumen { color: #a86500; background: #fff1d6; }
.panel-registro-auditoria { overflow: hidden; }
.filtros-auditoria {
    display: grid;
    grid-template-columns: minmax(250px, 1.7fr) repeat(4, minmax(135px, .8fr)) auto auto;
    align-items: end;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #dde6ee;
    background: #f8fafc;
}
.filtros-auditoria label { min-width: 0; }
.filtros-auditoria label > span { display: block; margin-bottom: 7px; color: #314c66; font-size: .83rem; font-weight: 650; }
.filtros-auditoria .form-control,
.filtros-auditoria .form-select { min-height: 44px; border-color: #cbd8e4; border-radius: 7px; color: #17324e; font-size: .87rem; }
.boton-filtrar-auditoria,
.boton-limpiar-auditoria {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid #151515;
    border-radius: 7px;
    color: #fff;
    background: #151515;
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
}
.boton-filtrar-auditoria:hover { color: #fff; background: #303030; }
.boton-limpiar-auditoria { color: #263f58; border-color: #bdcad7; background: #fff; }
.boton-limpiar-auditoria:hover { color: #111; border-color: #75899c; background: #f5f7f9; }
.aviso-privacidad-auditoria { padding: 13px 20px; color: #34536e; border-bottom: 1px solid #dbe6ef; background: #edf6fc; font-size: .84rem; line-height: 1.55; }
.tabla-auditoria { width: 100%; min-width: 1050px; border-collapse: collapse; color: #183650; font-size: .86rem; }
.tabla-auditoria th { padding: 14px 16px; color: #48627b; border-bottom: 1px solid #dce5ed; background: #f5f8fb; font-size: .77rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tabla-auditoria td { padding: 15px 16px; border-bottom: 1px solid #e1e8ef; vertical-align: top; }
.tabla-auditoria td strong { display: block; color: #0b2946; font-size: .87rem; font-weight: 650; }
.tabla-auditoria td small { display: block; max-width: 330px; margin-top: 4px; overflow: hidden; color: #688098; font-size: .78rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.tabla-auditoria tbody tr:hover { background: #fafcfe; }
.estado-auditoria { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #445a6e; background: #edf1f4; font-size: .78rem; font-weight: 700; }
.estado-exitoso { color: #087847; background: #e4f5eb; }
.estado-fallido { color: #ad3434; background: #fdeaea; }
.estado-bloqueado { color: #8f5500; background: #fff0d5; }
.sin-registros-auditoria { padding: 35px !important; color: #667d91; text-align: center; }
.pie-auditoria { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; }
.pie-auditoria p { margin: 0; color: #667d91; font-size: .82rem; }
.paginacion-servidor { display: flex; align-items: center; gap: 9px; }
.paginacion-servidor a,
.paginacion-servidor span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #c7d2dc; border-radius: 6px; color: #173858; background: #fff; text-decoration: none; }
.paginacion-servidor span { opacity: .45; }
.paginacion-servidor b { color: #405a71; font-size: .8rem; font-weight: 600; }

@media (max-width: 1250px) {
    .filtros-auditoria { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .campo-busqueda-auditoria { grid-column: span 2; }
}
@media (max-width: 700px) {
    .filtros-auditoria { grid-template-columns: 1fr; padding: 15px; }
    .campo-busqueda-auditoria { grid-column: auto; }
    .boton-filtrar-auditoria, .boton-limpiar-auditoria { width: 100%; }
    .pie-auditoria { align-items: flex-start; flex-direction: column; }
}

/* Alta de roles en modal. */
.boton-nuevo-rol {
    min-width: 176px;
    padding-inline: 25px;
    white-space: nowrap;
}
.modal-nuevo-rol .cuerpo-nuevo-rol { display: block; }
.cabecera-permisos-modal {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
    padding: 18px 0 13px;
    border-top: 1px solid #e1e8f0;
}
.cabecera-permisos-modal h3 { margin: 0 0 4px; color: #143451; font-size: 1rem; font-weight: 650; }
.cabecera-permisos-modal p { margin: 0; color: #71849a; font-size: .74rem; }
.tabla-permisos-modal {
    max-height: 320px;
    overflow: auto;
    border: 1px solid #dce5ee;
    border-radius: 10px;
}
.modal-nuevo-rol .tabla-permisos { margin: 0; font-size: .79rem; }
.modal-nuevo-rol .tabla-permisos thead { position: sticky; z-index: 2; top: 0; }
.modal-nuevo-rol .tabla-permisos td strong { font-size: .8rem; }
.modal-nuevo-rol .tabla-permisos td small { margin-top: 3px; font-size: .66rem; }
.modal-nuevo-rol .acciones-matriz .boton-tabla { min-height: 38px; font-size: .69rem; }

@media (max-width: 700px) {
    .boton-nuevo-rol { width: 100%; min-width: 0; }
    .cabecera-permisos-modal { align-items: flex-start; flex-direction: column; }
    .cabecera-permisos-modal .acciones-matriz { width: 100%; }
}

/* Evita recortar descendentes como g, p, q e y en la navegación. */
.item-menu .texto-item-menu { line-height: 1.45; padding-bottom: 1px; }
.submenu-menu button,
.submenu-menu a { line-height: 1.4; }

/* Configuración de planes de estudio. */
.panel-configuracion-unidad { padding-bottom: 26px; }
.boton-sincronizar-plan {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
    border: 1px solid #bed0e1; border-radius: 8px; color: #173a58; background: #fff;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.boton-sincronizar-plan:hover { border-color: #6ba7d8; background: #f7fbff; }
.boton-sincronizar-plan svg, .sello-fuente svg, .nota-plan svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.constructor-plan, .historial-planes { margin: 22px 25px 0; border: 1px solid #d9e4ee; border-radius: 14px; background: #fff; overflow: hidden; }
.cabecera-constructor-plan { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 26px 20px; border-bottom: 1px solid #e2e9f0; }
.cabecera-constructor-plan h3, .cabecera-historial-plan h3 { margin: 3px 0 5px; color: #0b2d4c; font-size: 1.22rem; font-weight: 650; }
.cabecera-constructor-plan p:last-child, .cabecera-historial-plan > p:last-child { margin: 0; color: #526f89; font-size: .84rem; }
.sello-fuente { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #bfe4d2; border-radius: 999px; color: #087847; background: #f2fbf6; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.controles-plan { display: grid; grid-template-columns: 1.4fr 1fr .55fr; gap: 16px; padding: 22px 26px; }
.controles-plan label > span { display: block; margin-bottom: 8px; color: #24435e; font-size: .82rem; font-weight: 600; }
.controles-plan .form-select { min-height: 48px; border-color: #cbd9e6; border-radius: 8px; color: #17324e; font-size: .86rem; }
.opciones-plan { display: grid; grid-template-columns: .85fr 1.4fr; gap: 15px; padding: 0 26px 22px; }
.opcion-plan-destacada, .opciones-plan fieldset { min-width: 0; margin: 0; padding: 16px 18px; border: 1px solid #d8e4ef; border-radius: 10px; background: #f8fbfe; }
.opcion-plan-destacada { display: flex; align-items: flex-start; gap: 12px; }
.opcion-plan-destacada input, .opciones-plan fieldset input { accent-color: #0874d8; }
.opcion-plan-destacada strong, .opcion-plan-destacada small { display: block; }
.opcion-plan-destacada strong, .opciones-plan legend { color: #173a58; font-size: .8rem; font-weight: 650; }
.opcion-plan-destacada small, .opciones-plan fieldset > small { margin-top: 4px; color: #58728b; font-size: .78rem; line-height: 1.5; }
.opciones-plan legend { float: none; width: auto; margin-bottom: 9px; }
.opciones-plan fieldset label { margin-right: 20px; color: #274762; font-size: .76rem; }
.opciones-plan fieldset > small { display: block; }
.guia-dotacion-excel { margin: 0 26px 22px; overflow: hidden; border: 1px solid #d4dce4; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(20,29,38,.05); }
.cabecera-guia-dotacion { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 19px 14px; border-bottom: 1px solid #e1e6eb; }
.icono-guia-dotacion { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: #fff; background: #151515; box-shadow: 0 7px 15px rgba(0,0,0,.14); }
.icono-guia-dotacion svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cabecera-guia-dotacion p { margin: 0 0 3px; color: #303a44; font-size: .7rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.cabecera-guia-dotacion h4 { margin: 0 0 4px; color: #123552; font-size: 1rem; font-weight: 700; }
.cabecera-guia-dotacion div > span { color: #526f87; font-size: .79rem; line-height: 1.45; }
.cabecera-guia-dotacion > b { padding: 6px 10px; border-radius: 999px; color: #08734b; background: #e4f6ec; font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.mapeo-guia-dotacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #e1e6eb; }
.mapeo-guia-dotacion article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; min-height: 92px; padding: 15px 17px; background: rgba(255,255,255,.94); }
.mapeo-guia-dotacion em { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #151515; font-size: .75rem; font-style: normal; font-weight: 750; }
.mapeo-guia-dotacion strong, .mapeo-guia-dotacion span { display: block; }
.mapeo-guia-dotacion strong { margin-bottom: 4px; color: #173954; font-size: .82rem; font-weight: 700; }
.mapeo-guia-dotacion span { color: #557087; font-size: .76rem; line-height: 1.45; }
.nota-guia-dotacion { margin: 0; padding: 11px 18px; color: #46515c; background: #f3f5f7; font-size: .77rem; line-height: 1.45; }
.nota-guia-dotacion strong { color: #151515; }
.selector-planes-colegio { margin: 0 26px 22px; padding: 20px; border: 1px solid #d8e4ef; border-radius: 11px; background: #f8fbfe; }
.selector-planes-colegio > legend { float: none; width: auto; margin: 0 0 4px; color: #173a58; font-size: .92rem; font-weight: 650; }
.selector-planes-colegio > p { margin: 0 0 16px; color: #6b8197; font-size: .74rem; }
.cabecera-selector-planes { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 17px; }
.titulo-selector-planes { display: flex; align-items: center; gap: 13px; }
.titulo-selector-planes > span { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: #0b5ca2; }
.titulo-selector-planes svg, .herramientas-selector-planes svg, .icono-grupo-planes svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.titulo-selector-planes h3 { margin: 0 0 4px; color: #123656; font-size: 1.05rem; font-weight: 650; }
.titulo-selector-planes p { margin: 0; color: #58728b; font-size: .82rem; }
.herramientas-selector-planes { display: flex; align-items: center; gap: 10px; }
.buscador-planes { display: flex; align-items: center; gap: 9px; width: 245px; min-height: 42px; padding: 0 13px; border: 1px solid #d4e0eb; border-radius: 9px; background: #fff; }
.buscador-planes svg { flex: 0 0 18px; width: 18px; height: 18px; color: #58738c; }
.buscador-planes input { width: 100%; border: 0; outline: 0; color: #173a58; background: transparent; font-size: .8rem; }
.herramientas-selector-planes button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: #151515; font-size: .79rem; font-weight: 600; white-space: nowrap; }
.herramientas-selector-planes button:hover { background: #303030; }
.herramientas-selector-planes button svg { width: 19px; height: 19px; }
.origen-catalogo-planes { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 17px; padding: 14px 16px; border: 1px solid #cfe0ef; border-radius: 10px; color: #294c69; background: #f2f8fd; }
.origen-catalogo-planes > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: #0c6fbe; }
.origen-catalogo-planes svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.origen-catalogo-planes strong { display: block; margin-bottom: 4px; color: #173b59; font-size: .86rem; font-weight: 650; }
.origen-catalogo-planes p { margin: 0; color: #496982; font-size: .8rem; font-weight: 400; line-height: 1.55; }
.origen-catalogo-planes a { color: #086dbc; font-weight: 600; text-decoration: none; }
.origen-catalogo-planes a:hover { text-decoration: underline; }
.grupo-nivel-planes { overflow: hidden; margin-top: 13px; border: 1px solid var(--borde-grupo); border-radius: 11px; background: var(--fondo-grupo); }
.grupo-basica { --color-grupo: #0878d1; --borde-grupo: #cce5f8; --fondo-grupo: #f4faff; }
.grupo-media { --color-grupo: #7251c8; --borde-grupo: #ded5f6; --fondo-grupo: #faf7ff; }
.cabecera-grupo-planes { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 13px; color: var(--color-grupo); background: color-mix(in srgb, var(--color-grupo) 7%, white); }
.icono-grupo-planes { display: grid; width: 28px; height: 28px; place-items: center; }
.icono-grupo-planes svg { width: 21px; height: 21px; }
.cabecera-grupo-planes h4 { margin: 0; color: color-mix(in srgb, var(--color-grupo) 70%, #102d49); font-size: .9rem; font-weight: 650; }
.cabecera-grupo-planes b { padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--color-grupo); font-size: .72rem; font-weight: 600; }
.grupo-nivel-planes .grilla-planes-disponibles { align-items: stretch; padding: 0 10px 10px; }
.grupo-media .grilla-planes-disponibles { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.grilla-planes-disponibles { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 10px; }
.tarjeta-plan-seleccionable { position: relative; min-height: 126px; padding: 14px 15px; overflow: hidden; border: 1px solid #d6e1eb; border-radius: 11px; color: #193b59; background: #fff; box-shadow: 0 3px 9px rgba(20,55,86,.035); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.grupo-nivel-planes .tarjeta-plan-seleccionable { height: 100%; }
.tarjeta-plan-seleccionable::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ''; background: var(--color-plan); opacity: .48; transition: width .18s ease, opacity .18s ease; }
.selector-principal-plan { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 11px; cursor: pointer; }
.tarjeta-plan-seleccionable:hover, .tarjeta-plan-seleccionable:focus-within { z-index: 2; transform: translateY(-4px); border-color: var(--color-plan); box-shadow: 0 13px 25px rgba(19,56,91,.14); }
.tarjeta-plan-seleccionable:hover::before, .tarjeta-plan-seleccionable:focus-within::before, .tarjeta-plan-seleccionable.seleccionado::before { width: 6px; opacity: 1; }
.tarjeta-plan-seleccionable.seleccionado { border-color: var(--color-plan); background: var(--fondo-plan-seleccionado); box-shadow: 0 8px 20px var(--sombra-plan); }
.tarjeta-plan-seleccionable.no-disponible { opacity: .47; cursor: not-allowed; }
.tarjeta-plan-seleccionable.no-disponible:hover { transform: none; box-shadow: none; }
.plan-basica { --color-plan: #0878d1; --fondo-plan-seleccionado: #eef8ff; --sombra-plan: rgba(8,120,209,.13); background: linear-gradient(145deg, #fff 58%, #f2f9ff); }
.plan-media { --color-plan: #7251c8; --fondo-plan-seleccionado: #f5f1ff; --sombra-plan: rgba(114,81,200,.15); background: linear-gradient(145deg, #fff 58%, #f7f3ff); }
.plan-basica.seleccionado, .plan-media.seleccionado { background: var(--fondo-plan-seleccionado); }
.tarjeta-plan-seleccionable.guardado::after { position: absolute; top: 9px; right: 10px; padding: 3px 7px; border-radius: 999px; color: #087448; background: #e1f6ea; content: 'Guardado'; font-size: .65rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.tarjeta-plan-seleccionable.guardado .selector-principal-plan > em { margin-top: 21px; }
.insignia-nivel-plan { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--color-plan) 28%, white); border-radius: 10px; color: var(--color-plan); background: color-mix(in srgb, var(--color-plan) 10%, white); font-size: .82rem; font-weight: 750; }
.nombre-nivel-plan { display: block; margin-bottom: 3px; color: var(--color-plan); font-size: .6rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.tarjeta-plan-seleccionable input { width: 17px; height: 17px; accent-color: #0874d8; }
.tarjeta-plan-seleccionable strong, .tarjeta-plan-seleccionable small { display: block; }
.tarjeta-plan-seleccionable strong { font-size: .9rem; font-weight: 600; }
.tarjeta-plan-seleccionable small { margin-top: 3px; color: #526f89; font-size: .8rem; font-weight: 400; }
.datos-plan-seleccion b { display: inline-block; margin-top: 7px; color: #155e98; font-size: .76rem; font-weight: 650; }
.tarjeta-plan-seleccionable em { display: grid; color: #526f89; font-size: .74rem; font-style: normal; text-align: center; white-space: nowrap; }
.tarjeta-plan-seleccionable em strong { color: var(--color-plan); font-size: .86rem; }
.tipos-ensenanza-plan { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0 66px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-plan) 18%, #e4ebf1); }
.tarjeta-plan-seleccionable:not(.tipos-habilitados) .tipos-ensenanza-plan { opacity: .5; }
.tarjeta-plan-seleccionable.tipos-habilitados .tipos-ensenanza-plan { opacity: 1; }
.tipos-ensenanza-plan > span { flex: 0 0 auto; padding-top: 5px; color: #587189; font-size: .74rem; font-weight: 500; }
.tipos-ensenanza-plan > div { display: flex; flex-wrap: wrap; gap: 5px; }
.tipos-ensenanza-plan label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; color: #405f78; background: color-mix(in srgb, var(--color-plan) 8%, white); font-size: .74rem; cursor: pointer; }
.tipos-ensenanza-plan input { width: 14px; height: 14px; margin-right: 4px; }
.tipos-ensenanza-plan b { color: #155e98; font-weight: 700; }
.vista-previa-plan { margin: 0 26px; border: 1px solid #d7e3ed; border-radius: 11px; overflow: hidden; }
.barra-guardar-planes { position: sticky; z-index: 8; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 26px 22px; padding: 13px 15px 13px 18px; border: 1px solid #263b50; border-radius: 11px; color: #fff; background: rgba(13,35,55,.97); box-shadow: 0 13px 30px rgba(5,22,39,.24); backdrop-filter: blur(8px); }
.barra-guardar-planes span strong, .barra-guardar-planes span small { display: block; }
.barra-guardar-planes span strong { font-size: .81rem; font-weight: 650; }
.barra-guardar-planes span small { margin-top: 3px; color: #d2dfeb; font-size: .76rem; }
.carga-acumulada-planes { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 9px; margin-left: auto; padding: 3px 20px; border-right: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.carga-acumulada-planes b { grid-row: 1 / 3; color: #66c1ff; font-size: 1.62rem; font-weight: 700; line-height: 1; }
.carga-acumulada-planes span { max-width: 150px; color: #d8e5ef; font-size: .74rem; line-height: 1.3; }
.boton-guardar-planes { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border: 1px solid #fff; border-radius: 8px; color: #102c45; background: #fff; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.boton-guardar-planes:hover { color: #fff; border-color: #198be9; background: #0874d8; }
.boton-guardar-planes svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.titulo-vista-previa { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; background: #f1f6fb; }
.titulo-vista-previa h4 { margin: 0 0 3px; color: #173a58; font-size: .94rem; font-weight: 650; }
.titulo-vista-previa p { margin: 0; color: #587189; font-size: .8rem; }
.titulo-vista-previa > strong { color: #075fae; font-size: .83rem; white-space: nowrap; }
.total-plan-individual { display: grid; gap: 2px; min-width: 150px; padding: 9px 12px; border: 1px solid #cbddeb; border-radius: 8px; text-align: right; background: #fff; }
.total-plan-individual small { color: #587189; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
.total-plan-individual strong { color: #075fae; font-size: .84rem; white-space: nowrap; }
.tabla-plan-estudio td:nth-child(4), .tabla-plan-estudio td:nth-child(5) { color: #123d62; font-weight: 600; }
.codigo-sige { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 6px 10px; border: 1px solid #b9d8f7; border-radius: 7px; color: #075caf; background: #eef7ff; font-size: .76rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.codigo-sige-pendiente { max-width: 150px; color: #667f96; font-size: .72rem; font-weight: 600; line-height: 1.35; }
.aclaracion-codigo-sige { margin: 0; padding: 11px 18px; border-top: 1px solid #e1e9f0; color: #526d85; background: #f8fbfe; font-size: .72rem; line-height: 1.5; }
.tipo-asignatura { color: #567089; font-size: .72rem; }
.tipo-configurable { color: #9a6500; }
.tipo-libre_disposicion { color: #196e55; }
.nota-plan { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-top: 1px solid #e1e9f0; color: #526d85; background: #fbfdff; font-size: .7rem; }
.nota-plan svg { flex: 0 0 19px; width: 19px; height: 19px; color: #3277b4; }
.pie-constructor-plan { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px 24px; }
.pie-constructor-plan a { color: #1268b3; font-size: .74rem; font-weight: 600; }
.pie-constructor-plan .boton-secundario { min-width: 210px; white-space: nowrap; }
.cabecera-historial-plan { padding: 22px 23px 17px; border-bottom: 1px solid #e2e9f0; }
.historial-planes { margin-bottom: 0; }
.historial-planes .tabla-responsive { border: 0; border-radius: 0; }
.estado-vacio-plan { display: grid; gap: 5px; padding: 42px 26px; color: #6f8498; text-align: center; }
.estado-vacio-plan strong { color: #183c5b; font-size: .95rem; }

@media (max-width: 900px) {
    .controles-plan, .opciones-plan { grid-template-columns: 1fr; }
    .mapeo-guia-dotacion { grid-template-columns: 1fr; }
    .grilla-planes-disponibles { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .cabecera-selector-planes { align-items: flex-start; flex-direction: column; }
    .herramientas-selector-planes { width: 100%; }
    .buscador-planes { flex: 1 1 auto; width: auto; }
    .cabecera-constructor-plan { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
    .constructor-plan, .historial-planes { margin-inline: 12px; }
    .cabecera-constructor-plan, .controles-plan, .opciones-plan { padding-inline: 17px; }
    .vista-previa-plan { margin-inline: 17px; }
    .barra-guardar-planes { align-items: stretch; flex-direction: column; margin-inline: 17px; }
    .carga-acumulada-planes { margin-left: 0; padding: 10px 0; border-right: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
    .boton-guardar-planes { width: 100%; }
    .selector-planes-colegio { margin-inline: 17px; padding: 15px; }
    .guia-dotacion-excel { margin-inline: 17px; }
    .cabecera-guia-dotacion { grid-template-columns: 42px minmax(0, 1fr); padding-inline: 15px; }
    .cabecera-guia-dotacion > b { display: none; }
    .grilla-planes-disponibles { grid-template-columns: 1fr; }
    .grupo-media .grilla-planes-disponibles { grid-template-columns: 1fr; }
    .herramientas-selector-planes { align-items: stretch; flex-direction: column; }
    .buscador-planes { width: 100%; }
    .pie-constructor-plan { align-items: stretch; flex-direction: column; padding-inline: 17px; }
    .pie-constructor-plan .boton-secundario { width: 100%; }
}