/* =========================================================
PORTAL ESTUDIANTIL EFI · MUÉVETE Y APRENDE
Archivo: styles.css
Vista: Página principal + panel lateral + base para nivel.html
Organización: imágenes directas dentro de /assets
========================================================= */
/* =========================================================
1. VARIABLES GENERALES
========================================================= */
:root {
--azul-950: #03162c;
--azul-900: #05224a;
--azul-850: #062d5f;
--azul-800: #073b7a;
--azul-700: #0b58b4;
--azul-600: #126ad5;
--azul-500: #1f83e0;
--azul-100: #eaf4ff;
--verde-800: #1d6b28;
--verde-700: #247a2d;
--verde-600: #2f9e2f;
--verde-500: #43b83d;
--verde-100: #eaf8e9;
--naranja-700: #d85a00;
--naranja-600: #f06b00;
--naranja-500: #ff8617;
--naranja-100: #fff0df;
--rojo: #e92828;
--rojo-vivo: #ff2a2a;
--whatsapp: #16a935;
--gmail: #1769d1;
--blanco: #ffffff;
--fondo: #f6faff;
--fondo-suave: #f8fbff;
--texto: #162033;
--texto-fuerte: #111827;
--texto-suave: #475569;
--gris: #64748b;
--borde: rgba(7, 59, 122, 0.13);
--sombra-suave: 0 10px 28px rgba(7, 59, 122, 0.08);
--sombra-media: 0 18px 45px rgba(4, 27, 58, 0.14);
--sombra-fuerte: 0 24px 60px rgba(3, 12, 28, 0.35);
--radio-xl: 34px;
--radio-lg: 26px;
--radio-md: 18px;
--radio-sm: 12px;
--ancho-maximo: 1180px;
--ancho-panel: 370px;
}
/* =========================================================
2. RESET BÁSICO
========================================================= */
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;
color: var(--texto);
background:
radial-gradient(circle at 8% 4%, rgba(18, 106, 213, 0.08), transparent 28rem),
radial-gradient(circle at 92% 5%, rgba(47, 158, 47, 0.09), transparent 26rem),
radial-gradient(circle at 50% 98%, rgba(240, 107, 0, 0.08), transparent 30rem),
linear-gradient(180deg, #ffffff 0%, #f6faff 45%, #ffffff 100%);
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button {
font-family: inherit;
}
main {
overflow: hidden;
}
:focus-visible {
outline: 3px solid rgba(18, 106, 213, 0.45);
outline-offset: 3px;
}
/* =========================================================
3. CAPA OSCURA DEL PANEL LATERAL
========================================================= */
.capa-panel {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(4, 15, 32, 0.58);
backdrop-filter: blur(5px);
}
.capa-panel[hidden] {
display: none;
}
.efi-aviso-conexion {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px 16px;
padding: 12px 18px;
background: #fff4da;
color: #523b08;
font-size: .9rem;
}
.efi-aviso-conexion p { margin: 0; max-width: 850px; }
.efi-aviso-conexion button { min-height: 44px; padding: 8px 14px; border: 1px solid #ac861f; border-radius: 10px; background: #fff; color: inherit; font-weight: 700; cursor: pointer; }
.efi-problema-documento { position: fixed; z-index: 3000; right: 18px; bottom: 18px; max-width: min(540px, calc(100vw - 36px)); padding: 18px; border: 1px solid #bfa365; border-radius: 16px; background: #fff9ec; color: #49370e; box-shadow: 0 12px 40px #0003; }
.efi-problema-documento p { margin: 8px 0 14px; }
.efi-problema-documento button { min-height: 44px; margin: 4px 8px 0 0; padding: 8px 14px; border: 1px solid #a48532; border-radius: 10px; background: #fff; color: inherit; font-weight: 700; cursor: pointer; }
@media print { .efi-aviso-conexion, .efi-problema-documento { display: none; } }
.aviso-actualizacion-efi {
position: fixed;
right: 18px;
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 2500;
display: grid;
grid-template-columns: 1fr auto;
gap: 3px 14px;
max-width: min(510px, calc(100vw - 30px));
padding: 13px 15px;
border: 1px solid #b9ddd3;
border-radius: 15px;
color: #174c43;
background: #f0fbf7;
box-shadow: 0 18px 45px rgba(3, 34, 65, 0.22);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aviso-actualizacion-efi strong,
.aviso-actualizacion-efi span { grid-column: 1; }
.aviso-actualizacion-efi span { font-size: .78rem; }
.aviso-actualizacion-efi button {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
padding: 9px 11px;
border: 0;
border-radius: 10px;
color: #fff;
background: #087d73;
font: inherit;
font-size: .75rem;
font-weight: 900;
cursor: pointer;
}
@media (max-width: 560px) {
.aviso-actualizacion-efi { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}
/* =========================================================
4. PANEL LATERAL ESTUDIANTIL
========================================================= */
.panel-lateral {
position: fixed;
top: 0;
left: 0;
right: auto;
bottom: auto;
z-index: 100;
width: min(var(--ancho-panel), 92vw);
height: var(--efi-alto-panel, 100vh);
max-height: var(--efi-alto-panel, 100vh);
margin: 0;
padding: 18px 18px max(18px, env(safe-area-inset-bottom));
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
color: var(--blanco);
background:
radial-gradient(circle at 88% 92%, rgba(18, 106, 213, 0.38), transparent 16rem),
radial-gradient(circle at 12% 12%, rgba(67, 184, 61, 0.16), transparent 13rem),
radial-gradient(circle at 72% 18%, rgba(240, 107, 0, 0.10), transparent 12rem),
linear-gradient(160deg, #05224a 0%, #03203e 52%, #04182f 100%);
box-shadow: var(--sombra-fuerte);
border-right: 1px solid rgba(255, 255, 255, 0.08);
transform: translateX(-105%);
transition: transform 0.35s ease;
}
.panel-lateral.abierto,
.panel-lateral.is-open {
transform: translateX(0);
}
/* Fallback para PDI, tablets y navegadores que tratan 100vh de forma inestable. */
@supports (height: 100dvh) {
.panel-lateral { height: var(--efi-alto-panel, 100dvh); max-height: var(--efi-alto-panel, 100dvh); }
}
@media (min-width: 721px) and (max-width: 1080px) {
.panel-lateral { width: min(380px, 88vw); }
}
@media (min-width: 600px) and (max-height: 680px) {
.panel-lateral { padding-top: 10px; }
.panel-logo-efi { width: 82px; }
.panel-identidad { padding-bottom: 9px; }
.panel-menu { padding-top: 9px; }
.panel-enlace { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
}
.boton-cerrar-panel {
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 16px;
background: rgba(255, 255, 255, 0.07);
color: white;
font-size: 34px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: 0.25s ease;
}
.boton-cerrar-panel:hover {
background: rgba(255, 255, 255, 0.14);
transform: rotate(6deg);
}
.panel-identidad {
text-align: center;
padding: 4px 6px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.panel-logo-efi {
width: 112px;
max-height: 86px;
object-fit: contain;
margin: 0 auto 10px;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.34));
}
.panel-identidad h2 {
margin: 0;
font-size: clamp(1.18rem, 2vw, 1.5rem);
letter-spacing: -0.03em;
}
.panel-identidad p {
margin: 6px 0 12px;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
}
.panel-lema-imagen {
width: min(200px, 78%);
max-height: 62px;
object-fit: contain;
margin: 10px auto 0;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.22));
}
.panel-menu {
padding: 18px 0 22px;
}
.panel-grupo {
padding: 8px 0 13px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-grupo h3 {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 8px;
color: #8ee562;
font-size: 0.84rem;
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.panel-grupo h3 span {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--verde-500), var(--naranja-500));
box-shadow: 0 0 12px rgba(142, 229, 98, 0.5);
}
.panel-enlace {
position: relative;
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
align-items: center;
min-height: 64px;
padding: 10px 14px;
margin: 5px 0;
border-radius: 18px;
color: rgba(255, 255, 255, 0.94);
border: 1px solid transparent;
transition:
background 0.22s ease,
transform 0.22s ease,
border-color 0.22s ease;
}
.panel-enlace:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(3px);
}
.panel-enlace.activo,
.panel-enlace.active {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.18);
}
.panel-enlace.activo::before,
.panel-enlace.active::before {
content: "";
position: absolute;
left: -24px;
top: 12px;
bottom: 12px;
width: 6px;
border-radius: 0 12px 12px 0;
background: linear-gradient(180deg, var(--verde-500), var(--naranja-500));
}
.panel-icono {
width: 45px;
height: 45px;
border-radius: 16px;
display: grid;
place-items: center;
color: white;
background: rgba(255, 255, 255, 0.1);
}
.panel-icono svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.icono-azul {
background: rgba(18, 106, 213, 0.75);
}
.icono-verde {
background: rgba(47, 158, 47, 0.78);
}
.icono-naranja {
background: rgba(240, 107, 0, 0.9);
}
.icono-youtube {
background: #ff0000;
}
.icono-instagram {
background: linear-gradient(135deg, #ffb000, #f1446b, #8847ff);
}
.icono-whatsapp {
background: var(--whatsapp);
}
.icono-correo {
background: var(--azul-600);
}
.icono-ayuda {
background: linear-gradient(135deg, var(--azul-700), var(--verde-500));
}
.panel-enlace strong {
display: block;
font-size: 1rem;
line-height: 1.1;
}
.panel-enlace small {
display: block;
margin-top: 4px;
color: rgba(255, 255, 255, 0.66);
line-height: 1.25;
}
.panel-footer {
margin: 0 -18px;
padding: 18px;
display: flex;
align-items: center;
gap: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
}
.panel-footer img {
width: 52px;
height: 52px;
object-fit: contain;
}
.panel-footer strong {
display: block;
font-size: 0.92rem;
color: rgba(255, 255, 255, 0.9);
}
.panel-footer span {
display: block;
margin-top: 3px;
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.62);
}
/* =========================================================
5. ENCABEZADO SUPERIOR INSTITUCIONAL
========================================================= */
.encabezado-principal {
position: sticky;
top: 0;
z-index: 40;
min-height: 68px;
padding: 12px clamp(16px, 4vw, 54px);
display: flex;
align-items: center;
gap: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.90)),
radial-gradient(circle at left, rgba(18, 106, 213, 0.08), transparent 22rem);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(7, 59, 122, 0.12);
box-shadow: 0 10px 22px rgba(9, 46, 83, 0.08);
}
.linea-color-superior {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 5px;
background: linear-gradient(
90deg,
var(--azul-700),
var(--verde-500),
var(--naranja-500),
var(--azul-700)
);
}
.encabezado-principal::after {
content: "";
position: absolute;
left: clamp(16px, 4vw, 54px);
right: clamp(16px, 4vw, 54px);
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(18, 106, 213, 0.35), transparent);
}
.boton-menu {
width: 50px;
height: 50px;
border: 0;
border-radius: 16px;
background: linear-gradient(135deg, #eef6ff, #ffffff);
box-shadow: 0 8px 20px rgba(7, 59, 122, 0.11);
display: grid;
place-content: center;
gap: 5px;
cursor: pointer;
}
.boton-menu span {
display: block;
width: 24px;
height: 3px;
border-radius: 99px;
background: var(--azul-800);
}
.marca-centro {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.marca-centro img {
width: 50px;
height: 50px;
object-fit: contain;
}
.marca-centro strong {
display: block;
color: var(--azul-900);
font-size: clamp(0.98rem, 2vw, 1.25rem);
line-height: 1.1;
}
.marca-centro small {
display: block;
margin-top: 3px;
color: var(--gris);
}
.acciones-header {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
}
.boton-notificacion {
position: relative;
width: 46px;
height: 46px;
border: 1px solid rgba(7, 59, 122, 0.12);
border-radius: 16px;
background: white;
color: var(--azul-800);
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 8px 18px rgba(7, 59, 122, 0.10);
}
.boton-notificacion svg {
width: 23px;
height: 23px;
fill: currentColor;
}
.contador-notificacion {
position: absolute;
top: -6px;
right: -6px;
width: 21px;
height: 21px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--naranja-600);
color: white;
font-size: 0.72rem;
font-weight: 900;
border: 2px solid white;
}
.contador-notificacion[hidden] {
display: none;
}
.logo-efi-header {
height: 50px;
width: 76px;
object-fit: contain;
}
/* =========================================================
6. HERO PRINCIPAL
========================================================= */
.hero {
position: relative;
min-height: 560px;
display: grid;
place-items: center;
padding: 44px 18px 72px;
overflow: hidden;
background:
linear-gradient(90deg, rgba(18, 106, 213, 0.055), transparent 24%, transparent 74%, rgba(47, 158, 47, 0.06)),
radial-gradient(circle at 50% 24%, rgba(245, 189, 52, 0.15), transparent 13rem);
}
.hero-fondo-imagen {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.78)),
url("assets/fondo-portada-efi.webp");
background-size: cover;
background-position: center;
opacity: 0.95;
}
.hero::before {
content: "";
position: absolute;
left: -110px;
top: 130px;
width: 460px;
height: 230px;
background: linear-gradient(135deg, rgba(18, 106, 213, 0.18), rgba(47, 158, 47, 0.11));
border-radius: 48% 52% 44% 56%;
transform: rotate(-17deg);
opacity: 0.72;
}
.hero::after {
content: "";
position: absolute;
right: -100px;
bottom: 35px;
width: 430px;
height: 240px;
background: linear-gradient(135deg, rgba(240, 107, 0, 0.13), rgba(18, 106, 213, 0.13));
border-radius: 52% 48% 57% 43%;
transform: rotate(15deg);
opacity: 0.78;
}
.hero-decoracion {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.decoracion-uno {
left: 5%;
top: 18%;
width: 250px;
height: 250px;
border: 28px solid rgba(18, 106, 213, 0.08);
}
.decoracion-dos {
right: 8%;
top: 21%;
width: 210px;
height: 210px;
border: 25px solid rgba(47, 158, 47, 0.08);
}
.decoracion-tres {
left: 50%;
bottom: 8%;
width: 320px;
height: 80px;
background: linear-gradient(90deg, rgba(47, 158, 47, 0.10), rgba(240, 107, 0, 0.10));
border-radius: 999px;
transform: translateX(-50%) rotate(-4deg);
}
.hero-contenido {
position: relative;
z-index: 2;
max-width: 920px;
text-align: center;
}
.hero-logo {
width: min(230px, 54vw);
max-height: 175px;
object-fit: contain;
margin: 0 auto 8px;
filter: drop-shadow(0 12px 26px rgba(6, 36, 71, 0.20));
}
.titulo-efi {
margin: 12px 0 0;
font-size: clamp(2.15rem, 6vw, 4.75rem);
line-height: 0.98;
letter-spacing: -0.055em;
font-weight: 950;
color: var(--azul-900);
text-shadow:
0 2px 0 rgba(255, 255, 255, 0.8),
0 10px 22px rgba(7, 59, 122, 0.10);
}
.texto-efi {
color: var(--azul-900);
}
.separador-titulo {
color: var(--naranja-600);
margin: 0 0.08em;
}
.texto-muevete {
color: var(--rojo);
}
.texto-y {
color: var(--azul-900);
font-size: 0.82em;
}
.texto-aprende {
color: var(--verde-600);
}
.hero-subtitulo {
margin: 22px 0 0;
font-size: clamp(1.12rem, 2.2vw, 1.55rem);
color: var(--azul-800);
font-weight: 900;
}
.hero-lema-imagen {
width: min(510px, 90vw);
max-height: 150px;
object-fit: contain;
margin: 20px auto 0;
filter:
drop-shadow(0 10px 18px rgba(7, 59, 122, 0.12))
saturate(1.08)
contrast(1.05);
}
.hero-descripcion-card {
max-width: 820px;
margin: 20px auto 0;
padding: 18px 26px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(7, 59, 122, 0.10);
box-shadow: 0 12px 28px rgba(7, 59, 122, 0.08);
backdrop-filter: blur(8px);
}
.hero-descripcion-card p {
margin: 0;
color: #334155;
font-size: 1.08rem;
line-height: 1.65;
font-weight: 500;
}
.hero-botones {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* =========================================================
7. BOTONES GENERALES
========================================================= */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 0 28px;
border-radius: 16px;
font-weight: 950;
box-shadow: 0 12px 20px rgba(7, 59, 122, 0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boton:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(7, 59, 122, 0.18);
}
.boton-icono {
width: 28px;
height: 28px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.18);
}
.boton-icono svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.boton-principal {
color: white;
background: linear-gradient(135deg, var(--azul-800), var(--azul-600));
}
.boton-secundario {
color: white;
background: linear-gradient(135deg, var(--verde-600), var(--naranja-500));
}
.boton-nivel-azul {
color: white;
background: linear-gradient(135deg, var(--azul-700), var(--azul-600));
}
.boton-nivel-verde {
color: white;
background: linear-gradient(135deg, var(--verde-600), var(--verde-500));
}
/* =========================================================
8. TARJETA DE BIENVENIDA DOCENTE
========================================================= */
.tarjeta-docente,
.secciones-principales,
.niveles,
.redes-contacto,
.ayuda {
width: min(var(--ancho-maximo), calc(100% - 32px));
margin-left: auto;
margin-right: auto;
}
.tarjeta-docente {
position: relative;
z-index: 5;
margin-top: -42px;
padding: clamp(24px, 4vw, 36px);
display: grid;
grid-template-columns: 190px 1fr;
gap: 30px;
align-items: center;
border-radius: var(--radio-xl);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.95));
border: 1px solid rgba(18, 106, 213, 0.15);
box-shadow: var(--sombra-media);
overflow: hidden;
}
.tarjeta-docente::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--azul-700), var(--verde-500), var(--naranja-500));
height: 5px;
}
.fondo-docente {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 85%, rgba(18, 106, 213, 0.08), transparent 13rem),
radial-gradient(circle at 92% 15%, rgba(47, 158, 47, 0.07), transparent 15rem);
}
.foto-docente {
position: relative;
z-index: 1;
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
text-align: center;
color: var(--azul-800);
font-weight: 950;
background:
radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.92), rgba(18, 106, 213, 0.08)),
linear-gradient(135deg, rgba(47, 158, 47, 0.12), rgba(18, 106, 213, 0.1));
border: 6px solid white;
outline: 4px solid rgba(47, 158, 47, 0.26);
box-shadow: 0 12px 25px rgba(6, 36, 71, 0.18);
}
.foto-docente img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 34%;
}
.foto-docente span {
display: none;
}
.docente-info {
position: relative;
z-index: 1;
}
.etiqueta-seccion {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--verde-600);
font-weight: 950;
}
.etiqueta-seccion::before {
content: "";
width: 25px;
height: 4px;
border-radius: 99px;
background: linear-gradient(90deg, var(--verde-500), var(--naranja-500));
}
.docente-info h2 {
margin: 8px 0 4px;
color: var(--azul-900);
font-size: clamp(1.6rem, 3vw, 2.35rem);
}
.area-docente {
margin: 0 0 14px;
color: var(--verde-600);
font-weight: 800;
}
.docente-info p {
color: #334155;
line-height: 1.65;
}
.frase-docente {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--azul-800);
}
.frase-docente-icono {
width: 30px;
height: 30px;
border-radius: 10px;
display: grid;
place-items: center;
color: white;
background: linear-gradient(135deg, var(--naranja-500), var(--verde-500));
}
.frase-docente svg {
width: 17px;
height: 17px;
fill: currentColor;
}
/* =========================================================
9. BLOQUE ACADÉMICO VISUAL
========================================================= */
.bloque-academico-visual {
position: relative;
padding: 1px 0 78px;
background:
linear-gradient(rgba(255, 255, 255, 0.88), rgba(246, 250, 255, 0.92)),
url("assets/fondo-seccion-principal.webp"),
radial-gradient(circle at 12% 20%, rgba(18, 106, 213, 0.07), transparent 24rem),
radial-gradient(circle at 88% 45%, rgba(47, 158, 47, 0.07), transparent 22rem),
radial-gradient(circle at 50% 90%, rgba(240, 107, 0, 0.055), transparent 25rem);
background-size: cover;
background-position: center;
}
.bloque-academico-visual::before {
content: "";
position: absolute;
inset: 60px 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(18, 106, 213, 0.13), transparent);
}
/* =========================================================
10. TÍTULOS DE SECCIÓN
========================================================= */
.titulo-seccion {
text-align: center;
margin: 78px auto 30px;
max-width: 880px;
position: relative;
}
.titulo-seccion > span {
color: var(--verde-600);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.82rem;
}
.titulo-seccion h2 {
margin: 8px 0 8px;
color: var(--azul-900);
font-size: clamp(1.8rem, 4vw, 3.1rem);
letter-spacing: -0.035em;
}
.titulo-seccion h2 span {
color: var(--verde-600);
}
.titulo-seccion p {
color: var(--texto-suave);
font-size: 1.06rem;
line-height: 1.6;
}
.titulo-con-lineas::before,
.titulo-con-lineas::after {
content: "";
display: inline-block;
width: min(150px, 28vw);
height: 2px;
background: linear-gradient(90deg, transparent, var(--verde-500));
vertical-align: middle;
margin: 0 12px 12px;
}
.titulo-con-lineas::after {
background: linear-gradient(90deg, var(--verde-500), transparent);
}
.titulo-iconos {
display: flex;
justify-content: center;
gap: 14px;
margin: 4px 0 8px;
}
.titulo-icono {
width: 34px;
height: 34px;
border-radius: 13px;
display: grid;
place-items: center;
color: white;
box-shadow: 0 10px 16px rgba(7, 59, 122, 0.12);
}
.titulo-icono svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.titulo-icono.azul {
background: var(--azul-700);
}
.titulo-icono.verde {
background: var(--verde-600);
}
.titulo-icono.naranja {
background: var(--naranja-600);
}
/* =========================================================
11. SECCIONES PRINCIPALES DEL PORTAL
========================================================= */
.grid-tarjetas {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.tarjeta-info {
position: relative;
min-height: 350px;
overflow: hidden;
border-radius: 20px;
background: white;
border: 1px solid var(--borde);
box-shadow: var(--sombra-suave);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.tarjeta-info:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(7, 59, 122, 0.14);
}
.tarjeta-info::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 5px;
border-radius: 99px 99px 0 0;
}
.tarjeta-metodologia::after,
.tarjeta-recursos::after {
background: var(--azul-700);
}
.tarjeta-reglamento::after {
background: var(--verde-600);
}
.tarjeta-evaluaciones::after {
background: var(--naranja-600);
}
.tarjeta-imagen {
position: relative;
height: 184px;
display: grid;
place-items: center;
padding: 18px 18px 6px;
background:
radial-gradient(circle at 22% 16%, rgba(18, 106, 213, 0.08), transparent 6rem),
linear-gradient(180deg, rgba(246, 250, 255, 0.94), rgba(255, 255, 255, 0));
}
.tarjeta-reglamento .tarjeta-imagen {
background:
radial-gradient(circle at 22% 16%, rgba(47, 158, 47, 0.10), transparent 6rem),
linear-gradient(180deg, rgba(246, 250, 255, 0.94), rgba(255, 255, 255, 0));
}
.tarjeta-evaluaciones .tarjeta-imagen {
background:
radial-gradient(circle at 22% 16%, rgba(240, 107, 0, 0.10), transparent 6rem),
linear-gradient(180deg, rgba(246, 250, 255, 0.94), rgba(255, 255, 255, 0));
}
.tarjeta-imagen::after {
content: "";
position: absolute;
left: 28px;
bottom: -13px;
width: 44px;
height: 44px;
border-radius: 50%;
background: white;
box-shadow: inset 0 0 0 1px rgba(7, 59, 122, 0.06);
}
.tarjeta-imagen img {
width: 100%;
height: 160px;
object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(7, 59, 122, 0.08));
}
.tarjeta-cuerpo {
position: relative;
padding: 18px 18px 22px;
}
.icono-circular {
width: 43px;
height: 43px;
border-radius: 50%;
display: grid;
place-items: center;
margin-bottom: 10px;
color: white;
box-shadow: 0 10px 18px rgba(7, 59, 122, 0.15);
}
.icono-circular svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.icono-circular.icono-azul {
background: var(--azul-700);
}
.icono-circular.icono-verde {
background: var(--verde-600);
}
.icono-circular.icono-naranja {
background: var(--naranja-600);
}
.tarjeta-info h3 {
margin: 0 0 8px;
color: var(--azul-900);
font-size: 1.08rem;
line-height: 1.15;
}
.tarjeta-info p {
min-height: 82px;
margin: 0;
color: #475569;
font-size: 0.91rem;
line-height: 1.55;
}
.enlace-tarjeta {
margin-top: 16px;
min-height: 42px;
padding: 0 14px;
border-radius: 10px;
color: white;
font-size: 0.86rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
}
.enlace-tarjeta::after {
content: "›";
margin-left: 10px;
font-size: 1.2rem;
line-height: 1;
}
.enlace-azul {
background: linear-gradient(135deg, var(--azul-700), var(--azul-600));
}
.enlace-verde {
background: linear-gradient(135deg, var(--verde-600), var(--verde-500));
}
.enlace-naranja {
background: linear-gradient(135deg, var(--naranja-700), var(--naranja-500));
}
/* =========================================================
12. ACCESO ACADÉMICO POR NIVEL
========================================================= */
.grid-niveles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.tarjeta-nivel {
position: relative;
min-height: 285px;
overflow: hidden;
border-radius: 22px;
background: white;
border: 1px solid var(--borde);
box-shadow: var(--sombra-media);
display: grid;
grid-template-columns: 42% 58%;
align-items: stretch;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tarjeta-nivel:hover {
transform: translateY(-5px);
box-shadow: 0 22px 48px rgba(7, 59, 122, 0.16);
}
.tarjeta-nivel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.nivel-primero::before {
background:
radial-gradient(circle at 18% 18%, rgba(18, 106, 213, 0.15), transparent 9rem),
radial-gradient(circle at 45% 88%, rgba(47, 158, 47, 0.13), transparent 10rem);
}
.nivel-cuarto::before {
background:
radial-gradient(circle at 18% 18%, rgba(47, 158, 47, 0.16), transparent 9rem),
radial-gradient(circle at 45% 88%, rgba(240, 107, 0, 0.13), transparent 10rem);
}
.nivel-decoracion {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.52;
}
.nivel-decoracion::before {
content: "○  ✦  ⟡  ♡  ⚕  ⌁  ✧";
position: absolute;
right: 26px;
top: 22px;
color: rgba(7, 59, 122, 0.22);
font-size: 1.45rem;
letter-spacing: 0.34rem;
transform: rotate(-5deg);
}
.nivel-decoracion::after {
content: "";
position: absolute;
right: 30px;
bottom: 22px;
width: 200px;
height: 58px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(18, 106, 213, 0.15), rgba(47, 158, 47, 0.14));
transform: rotate(-9deg);
}
.nivel-contenido {
position: relative;
z-index: 2;
padding: 30px 26px;
display: flex;
flex-direction: column;
justify-content: center;
}
.numero-nivel {
display: block;
font-size: clamp(2.8rem, 5.4vw, 4.65rem);
line-height: 0.82;
font-weight: 950;
color: var(--azul-700);
letter-spacing: -0.07em;
}
.nivel-cuarto .numero-nivel {
color: var(--verde-600);
}
.nivel-contenido h3 {
margin: 8px 0 14px;
color: var(--azul-900);
font-size: 1.75rem;
line-height: 1;
}
.nivel-contenido p {
margin: 0 0 18px;
color: #334155;
font-size: 0.93rem;
line-height: 1.55;
}
.nivel-imagen {
position: relative;
z-index: 1;
min-height: 100%;
overflow: hidden;
background: rgba(246, 250, 255, 0.7);
}
.nivel-imagen::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.20) 40%, rgba(255, 255, 255, 0.03)),
radial-gradient(circle at 85% 25%, rgba(47, 158, 47, 0.10), transparent 8rem);
}
.nivel-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================================================
13. REDES EFI
========================================================= */
.redes-contacto {
position: relative;
padding-top: 1px;
padding-bottom: 78px;
}
.fondo-redes {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 22%, rgba(18, 106, 213, 0.07), transparent 23rem),
radial-gradient(circle at 88% 20%, rgba(240, 107, 0, 0.055), transparent 21rem),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.82));
}
.redes-contacto > *:not(.fondo-redes) {
position: relative;
z-index: 1;
}
.grid-redes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.tarjeta-red {
position: relative;
min-height: 230px;
display: grid;
grid-template-columns: 82px 1fr 132px;
gap: 16px;
align-items: center;
padding: 24px;
border-radius: 22px;
background: white;
border: 1px solid var(--borde);
box-shadow: var(--sombra-suave);
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tarjeta-red:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(7, 59, 122, 0.14);
}
.red-logo {
width: 78px;
height: 78px;
border-radius: 23px;
display: grid;
place-items: center;
}
.red-logo svg {
width: 52px;
height: 52px;
fill: white;
}
.red-logo-youtube {
background: #ff0000;
}
.red-logo-instagram {
background: linear-gradient(135deg, #ffb000, #f1446b, #8847ff);
}
.red-marca-efi {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(246, 250, 255, 0.95);
border: 1px solid rgba(7, 59, 122, 0.08);
}
.red-marca-efi img {
width: 28px;
height: 28px;
object-fit: contain;
}
.red-marca-efi span {
font-size: 0.78rem;
font-weight: 900;
color: var(--azul-900);
}
.red-info h3 {
margin: 0 0 8px;
color: var(--azul-900);
font-size: 1.34rem;
}
.red-info p {
margin: 0 0 18px;
color: #475569;
line-height: 1.5;
font-size: 0.92rem;
}
.boton-red {
width: 100%;
min-height: 44px;
border-radius: 10px;
color: white;
font-weight: 950;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.boton-youtube {
background: #ff0000;
}
.boton-instagram {
background: linear-gradient(135deg, #ff8c1a, #ef3f68, #a737d5);
}
.red-miniatura {
position: relative;
height: 136px;
border-radius: 12px;
overflow: hidden;
background: #eaf4ff;
}
.red-miniatura img {
width: 100%;
height: 100%;
object-fit: cover;
}
.play-miniatura {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
background: rgba(5, 34, 74, 0.76);
border: 2px solid white;
}
.instagram-mosaico {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
.instagram-mosaico img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9px;
background: #f2f6fb;
}
/* =========================================================
14. CONTACTO
========================================================= */
.contacto {
margin-top: 38px;
}
.titulo-contacto {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 18px;
}
.titulo-contacto span {
width: min(180px, 26vw);
height: 2px;
background: linear-gradient(90deg, transparent, var(--verde-500));
}
.titulo-contacto span:last-child {
background: linear-gradient(90deg, var(--verde-500), transparent);
}
.titulo-contacto h2 {
margin: 0;
color: var(--azul-900);
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.grid-contacto {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.contacto-item {
display: grid;
grid-template-columns: 72px 1fr;
gap: 18px;
align-items: center;
min-height: 94px;
padding: 18px 24px;
border-radius: 18px;
background: white;
box-shadow: var(--sombra-suave);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.contacto-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(7, 59, 122, 0.13);
}
.contacto-whatsapp {
border: 1px solid rgba(22, 169, 53, 0.25);
}
.contacto-correo {
border: 1px solid rgba(18, 106, 213, 0.24);
}
.contacto-icono {
width: 58px;
height: 58px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
}
.contacto-icono svg {
width: 32px;
height: 32px;
fill: currentColor;
}
.contacto-whatsapp .contacto-icono {
background: var(--whatsapp);
}
.contacto-correo .contacto-icono {
background: var(--azul-700);
}
.contacto-item strong {
display: block;
color: var(--azul-900);
font-size: 1.25rem;
}
.contacto-item small {
display: block;
margin-top: 4px;
color: var(--gris);
}
/* =========================================================
15. AYUDA / PREGUNTAS FRECUENTES
========================================================= */
.ayuda {
position: relative;
padding-top: 1px;
padding-bottom: 76px;
}
.fondo-ayuda {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 0;
background:
radial-gradient(circle at 15% 20%, rgba(18, 106, 213, 0.08), transparent 20rem),
radial-gradient(circle at 82% 48%, rgba(47, 158, 47, 0.08), transparent 20rem),
radial-gradient(circle at 55% 100%, rgba(240, 107, 0, 0.06), transparent 22rem);
}
.ayuda > *:not(.fondo-ayuda) {
position: relative;
z-index: 1;
}
.grid-ayuda {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.tarjeta-ayuda {
position: relative;
padding: 28px 24px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96));
border: 1px solid var(--borde);
box-shadow: var(--sombra-suave);
overflow: hidden;
}
.tarjeta-ayuda::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--azul-700), var(--verde-500), var(--naranja-500));
}
.tarjeta-ayuda::after {
content: "";
position: absolute;
right: -36px;
bottom: -36px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(18, 106, 213, 0.06);
}
.ayuda-icono {
width: 54px;
height: 54px;
border-radius: 18px;
display: grid;
place-items: center;
color: white;
margin-bottom: 14px;
}
.ayuda-icono svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.ayuda-icono.azul {
background: var(--azul-700);
}
.ayuda-icono.verde {
background: var(--verde-600);
}
.ayuda-icono.naranja {
background: var(--naranja-600);
}
.tarjeta-ayuda h3 {
margin: 0 0 8px;
color: var(--azul-900);
font-size: 1.15rem;
}
.tarjeta-ayuda p {
margin: 0;
color: #475569;
line-height: 1.55;
}
/* =========================================================
16. FOOTER PRINCIPAL
========================================================= */
.footer-principal {
position: relative;
padding: 48px clamp(16px, 5vw, 72px) 28px;
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: 34px;
align-items: center;
color: white;
overflow: hidden;
background:
radial-gradient(circle at 92% 28%, rgba(18, 106, 213, 0.30), transparent 18rem),
radial-gradient(circle at 12% 90%, rgba(47, 158, 47, 0.14), transparent 15rem),
linear-gradient(135deg, #041b35, #05224a 56%, #073b7a);
}
.footer-fondo-decorativo {
position: absolute;
inset: 0;
pointer-events: none;
}
.footer-fondo-decorativo::after {
content: "";
position: absolute;
right: -80px;
bottom: -70px;
width: 390px;
height: 220px;
border: 28px solid rgba(255, 255, 255, 0.06);
border-radius: 50%;
transform: rotate(-18deg);
}
.footer-bloque {
position: relative;
z-index: 1;
}
.footer-identidad-efi {
display: grid;
grid-template-columns: 92px 1fr;
gap: 20px;
align-items: center;
}
.footer-logo-efi {
width: 92px;
height: 92px;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}
.footer-titulo-efi {
margin: 0;
font-size: clamp(1.35rem, 2.4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.footer-efi-blanco,
.footer-punto,
.footer-y {
color: white;
}
.footer-muevete {
color: #ff4b4b;
}
.footer-aprende {
color: #8ee562;
}
.footer-identidad-efi p {
margin: 7px 0 8px;
color: #8ee562;
font-weight: 800;
}
.footer-lema-imagen {
width: min(260px, 90%);
max-height: 72px;
object-fit: contain;
filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.18));
}
.footer-institucion {
display: grid;
grid-template-columns: 74px 1fr;
gap: 16px;
align-items: center;
padding-left: 28px;
border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.footer-institucion img {
width: 74px;
height: 74px;
object-fit: contain;
}
.footer-institucion strong {
display: block;
font-size: 1.05rem;
color: white;
}
.footer-institucion span {
display: block;
margin-top: 5px;
color: rgba(255, 255, 255, 0.78);
}
.footer-institucion small {
display: block;
margin-top: 5px;
color: rgba(255, 255, 255, 0.62);
}
.footer-accesos {
padding-left: 28px;
border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.footer-accesos h3 {
margin: 0 0 16px;
color: #8ee562;
font-style: italic;
}
.footer-accesos h3::after {
content: "";
display: block;
width: 42px;
height: 4px;
margin-top: 8px;
border-radius: 99px;
background: var(--verde-500);
}
.footer-accesos nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.footer-accesos a {
color: rgba(255, 255, 255, 0.92);
font-weight: 850;
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-icono {
width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
color: white;
}
.footer-icono svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.footer-icono.youtube {
background: #ff0000;
}
.footer-icono.instagram {
background: linear-gradient(135deg, #ffb000, #f1446b, #8847ff);
}
.footer-icono.whatsapp {
background: var(--whatsapp);
}
.footer-icono.correo {
background: var(--azul-600);
}
.footer-linea-final {
position: relative;
z-index: 1;
grid-column: 1 / -1;
margin-top: 18px;
padding-top: 18px;
text-align: center;
color: rgba(255, 255, 255, 0.72);
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 0.9rem;
}
/* =========================================================
17. BASE VISUAL PARA PÁGINA DE NIVEL / PERÍODOS
Se usará cuando hagamos nivel.html
========================================================= */
.pagina-nivel {
min-height: 100vh;
background:
radial-gradient(circle at 8% 8%, rgba(18, 106, 213, 0.08), transparent 26rem),
radial-gradient(circle at 92% 18%, rgba(47, 158, 47, 0.08), transparent 26rem),
linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}
.cabecera-nivel {
position: relative;
padding: 54px 18px 28px;
text-align: center;
overflow: hidden;
}
.cabecera-nivel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.92));
pointer-events: none;
}
.cabecera-nivel > * {
position: relative;
z-index: 1;
}
.ruta-nivel {
width: min(var(--ancho-maximo), calc(100% - 32px));
margin: 0 auto 22px;
display: flex;
align-items: center;
gap: 9px;
color: var(--gris);
font-weight: 700;
font-size: 0.92rem;
}
.ruta-nivel a {
color: var(--azul-700);
}
.titulo-nivel {
margin: 0;
color: var(--azul-900);
font-size: clamp(2.1rem, 5vw, 4rem);
letter-spacing: -0.055em;
font-weight: 950;
}
.subtitulo-nivel {
margin: 8px 0 0;
color: var(--verde-600);
font-size: 1.2rem;
font-weight: 850;
}
.descripcion-nivel {
max-width: 760px;
margin: 18px auto 0;
color: #475569;
line-height: 1.65;
font-size: 1.05rem;
}
.contenedor-nivel {
width: min(var(--ancho-maximo), calc(100% - 32px));
margin: 0 auto;
padding: 18px 0 78px;
}
.encabezado-bloque-nivel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 24px 0 20px;
}
.encabezado-bloque-nivel h2 {
margin: 0;
color: var(--azul-900);
font-size: clamp(1.55rem, 3vw, 2.35rem);
}
.encabezado-bloque-nivel p {
margin: 5px 0 0;
color: var(--gris);
}
.grid-periodos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
.tarjeta-periodo {
position: relative;
min-height: 250px;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
border-radius: 24px;
background: white;
border: 1px solid var(--borde);
box-shadow: var(--sombra-suave);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tarjeta-periodo:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(7, 59, 122, 0.14);
}
.tarjeta-periodo::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 7px;
background: var(--azul-700);
}
.tarjeta-periodo.p1::before {
background: var(--azul-700);
}
.tarjeta-periodo.p2::before {
background: var(--naranja-600);
}
.tarjeta-periodo.p3::before {
background: var(--verde-600);
}
.tarjeta-periodo.p4::before {
background: linear-gradient(180deg, var(--azul-700), var(--verde-500));
}
.periodo-info {
position: relative;
z-index: 2;
padding: 28px 24px 24px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.badge-periodo {
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
color: white;
background: var(--azul-700);
font-weight: 950;
font-size: 1.22rem;
margin-bottom: 14px;
box-shadow: 0 10px 18px rgba(7, 59, 122, 0.16);
}
.tarjeta-periodo.p2 .badge-periodo {
background: var(--naranja-600);
}
.tarjeta-periodo.p3 .badge-periodo {
background: var(--verde-600);
}
.tarjeta-periodo.p4 .badge-periodo {
background: linear-gradient(135deg, var(--azul-700), var(--verde-500));
}
.periodo-info h3 {
margin: 0 0 10px;
color: var(--azul-900);
font-size: 1.32rem;
line-height: 1.18;
}
.periodo-info p {
margin: 0 0 16px;
color: #475569;
line-height: 1.55;
font-size: 0.96rem;
}
.estado-periodo {
display: inline-flex;
width: max-content;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 950;
}
.estado-activo {
color: #064e3b;
background: rgba(47, 158, 47, 0.16);
}
.estado-disponible {
color: var(--azul-800);
background: rgba(18, 106, 213, 0.13);
}
.estado-proximamente {
color: #9a3412;
background: rgba(240, 107, 0, 0.14);
}
.estado-no-disponible {
color: #475569;
background: rgba(100, 116, 139, 0.14);
}
.periodo-imagen {
position: relative;
min-height: 100%;
overflow: hidden;
}
.periodo-imagen::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.0)),
radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 9rem);
}
.periodo-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
}
.boton-periodo {
margin-top: 14px;
width: max-content;
min-height: 42px;
padding: 0 18px;
border-radius: 12px;
color: white;
background: linear-gradient(135deg, var(--azul-700), var(--azul-600));
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 950;
}
.tarjeta-periodo.p2 .boton-periodo {
background: linear-gradient(135deg, var(--naranja-700), var(--naranja-500));
}
.tarjeta-periodo.p3 .boton-periodo {
background: linear-gradient(135deg, var(--verde-700), var(--verde-500));
}
.tarjeta-periodo.p4 .boton-periodo {
background: linear-gradient(135deg, var(--azul-700), var(--verde-500));
}
.informaciones-nivel {
margin-top: 34px;
padding: 28px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--borde);
box-shadow: var(--sombra-suave);
}
.grid-informaciones {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.info-nivel-card {
padding: 20px;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff, #f8fbff);
border: 1px solid rgba(7, 59, 122, 0.1);
}
.info-nivel-card h3 {
margin: 0 0 8px;
color: var(--azul-900);
}
.info-nivel-card p {
margin: 0;
color: #475569;
line-height: 1.55;
}
/* =========================================================
18. RESPONSIVE TABLET
========================================================= */
@media (max-width: 1100px) {
.grid-tarjetas {
grid-template-columns: repeat(2, 1fr);
}
.grid-redes {
grid-template-columns: 1fr;
}
.tarjeta-red {
grid-template-columns: 82px 1fr 155px;
}
.footer-principal {
grid-template-columns: 1fr 1fr;
}
.footer-accesos {
grid-column: 1 / -1;
padding-left: 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
padding-top: 24px;
}
.grid-informaciones {
grid-template-columns: 1fr;
}
}
@media (max-width: 940px) {
.grid-niveles {
grid-template-columns: 1fr;
}
.tarjeta-nivel {
grid-template-columns: 42% 58%;
}
.grid-contacto {
grid-template-columns: 1fr;
}
.footer-principal {
grid-template-columns: 1fr;
}
.footer-institucion,
.footer-accesos {
padding-left: 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
padding-top: 24px;
}
.grid-periodos {
grid-template-columns: 1fr;
}
}
/* =========================================================
19. RESPONSIVE CELULAR
========================================================= */
@media (max-width: 720px) {
.encabezado-principal {
min-height: 72px;
padding: 10px 14px;
}
.boton-menu {
width: 46px;
height: 46px;
}
.marca-centro strong {
font-size: 0.92rem;
}
.marca-centro small {
display: none;
}
.marca-centro img {
width: 42px;
height: 42px;
}
.boton-notificacion {
width: 42px;
height: 42px;
}
.logo-efi-header {
height: 42px;
width: 58px;
}
.hero {
min-height: auto;
padding: 42px 16px 76px;
}
.titulo-efi {
font-size: 2.35rem;
}
.hero-descripcion-card {
padding: 16px 18px;
}
.hero-descripcion-card p {
font-size: 1rem;
}
.tarjeta-docente {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.foto-docente {
width: 150px;
height: 150px;
}
.frase-docente {
justify-content: center;
}
.grid-tarjetas {
grid-template-columns: 1fr;
}
.tarjeta-info {
min-height: auto;
}
.tarjeta-imagen {
height: 170px;
}
.tarjeta-imagen img {
height: 148px;
}
.tarjeta-nivel {
grid-template-columns: 1fr;
min-height: auto;
}
.nivel-imagen {
height: 220px;
}
.nivel-imagen::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), transparent 42%),
radial-gradient(circle at 85% 25%, rgba(47, 158, 47, 0.10), transparent 8rem);
}
.tarjeta-red {
grid-template-columns: 1fr;
text-align: center;
}
.red-logo {
margin: 0 auto;
}
.red-marca-efi {
margin-left: auto;
margin-right: auto;
}
.red-miniatura {
height: 180px;
}
.instagram-mosaico {
max-width: 260px;
margin: 0 auto;
}
.grid-ayuda {
grid-template-columns: 1fr;
}
.tarjeta-periodo {
grid-template-columns: 1fr;
}
.periodo-imagen {
min-height: 220px;
}
.periodo-imagen::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.05) 45%);
}
.encabezado-bloque-nivel {
display: block;
}
.footer-identidad-efi,
.footer-institucion {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.footer-accesos {
text-align: center;
}
.footer-accesos nav {
grid-template-columns: 1fr 1fr;
justify-items: center;
}
}
@media (max-width: 480px) {
:root {
--ancho-panel: 390px;
}
.panel-lateral {
padding-left: 18px;
padding-right: 18px;
}
.panel-logo-efi {
width: 120px;
}
.panel-enlace {
grid-template-columns: 42px 1fr;
padding-left: 10px;
padding-right: 10px;
}
.panel-icono {
width: 40px;
height: 40px;
}
.panel-enlace strong {
font-size: 0.95rem;
}
.panel-enlace small {
font-size: 0.78rem;
}
.panel-footer {
margin-left: -18px;
margin-right: -18px;
}
.titulo-con-lineas::before,
.titulo-con-lineas::after {
width: 68px;
margin-left: 6px;
margin-right: 6px;
}
.titulo-efi {
font-size: 2rem;
}
.hero-botones {
flex-direction: column;
}
.boton {
width: 100%;
}
.contacto-item {
grid-template-columns: 58px 1fr;
padding: 16px;
}
.contacto-icono {
width: 52px;
height: 52px;
}
.footer-accesos nav {
grid-template-columns: 1fr;
}
}
/* =========================================================
AJUSTE VISUAL DIFERENCIADO POR NIVEL
1ro = formativo / inicio / descubrimiento
4to = maduro / técnico / responsabilidad
========================================================= */
.pagina-nivel .cabecera-nivel {
min-height: 430px;
display: grid;
align-content: center;
background:
linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.94)),
var(--fondo-nivel),
radial-gradient(circle at 12% 20%, rgba(18, 106, 213, 0.12), transparent 24rem),
radial-gradient(circle at 88% 30%, rgba(47, 158, 47, 0.12), transparent 22rem);
background-size: cover;
background-position: center;
}
.pagina-nivel .cabecera-nivel::after {
content: "";
position: absolute;
left: 50%;
bottom: -44px;
width: min(900px, 92vw);
height: 90px;
transform: translateX(-50%);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
filter: blur(18px);
pointer-events: none;
}
.pagina-nivel.nivel-1ro .cabecera-nivel {
background:
linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.94)),
var(--fondo-nivel),
radial-gradient(circle at 15% 24%, rgba(18, 106, 213, 0.18), transparent 24rem),
radial-gradient(circle at 82% 30%, rgba(47, 158, 47, 0.15), transparent 22rem),
radial-gradient(circle at 50% 88%, rgba(240, 107, 0, 0.10), transparent 24rem);
background-size: cover;
background-position: center;
}
.pagina-nivel.nivel-4to .cabecera-nivel {
background:
linear-gradient(rgba(255, 255, 255, 0.70), rgba(248, 251, 255, 0.95)),
var(--fondo-nivel),
radial-gradient(circle at 12% 20%, rgba(5, 34, 74, 0.22), transparent 25rem),
radial-gradient(circle at 86% 26%, rgba(47, 158, 47, 0.16), transparent 22rem),
radial-gradient(circle at 50% 90%, rgba(240, 107, 0, 0.09), transparent 24rem);
background-size: cover;
background-position: center;
}
.pagina-nivel.nivel-1ro .titulo-nivel {
color: var(--azul-900);
text-shadow:
0 2px 0 rgba(255, 255, 255, 0.85),
0 14px 28px rgba(18, 106, 213, 0.15);
}
.pagina-nivel.nivel-4to .titulo-nivel {
color: #041b35;
text-shadow:
0 2px 0 rgba(255, 255, 255, 0.85),
0 14px 28px rgba(4, 27, 53, 0.18);
}
.pagina-nivel.nivel-1ro .subtitulo-nivel {
color: var(--azul-700);
}
.pagina-nivel.nivel-4to .subtitulo-nivel {
color: var(--verde-700);
}
.pagina-nivel.nivel-1ro .descripcion-nivel,
.pagina-nivel.nivel-4to .descripcion-nivel {
padding: 18px 24px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(7, 59, 122, 0.10);
box-shadow: 0 12px 28px rgba(7, 59, 122, 0.08);
backdrop-filter: blur(8px);
}
.pagina-nivel.nivel-4to .contenedor-nivel {
background:
radial-gradient(circle at 92% 10%, rgba(5, 34, 74, 0.05), transparent 18rem),
radial-gradient(circle at 10% 50%, rgba(47, 158, 47, 0.06), transparent 20rem);
}
.pagina-nivel.nivel-4to .tarjeta-periodo {
border-color: rgba(5, 34, 74, 0.16);
}
.pagina-nivel.nivel-4to .tarjeta-periodo:hover {
box-shadow: 0 22px 50px rgba(4, 27, 53, 0.17);
}
.boton-periodo.deshabilitado {
opacity: 0.62;
pointer-events: none;
cursor: not-allowed;
background: linear-gradient(135deg, #94a3b8, #64748b) !important;
}
@media (max-width: 720px) {
.pagina-nivel .cabecera-nivel {
min-height: auto;
padding-top: 38px;
padding-bottom: 42px;
}
.pagina-nivel .descripcion-nivel {
padding: 16px 18px;
}
}

/* =========================================================
20. CONTEXTO ACADÉMICO ACTUAL
========================================================= */
.contexto-academico,
.novedades {
  width: min(var(--ancho-maximo), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}
.contexto-academico {
  position: relative;
  margin-top: 34px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(7, 59, 122, 0.13);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(18,106,213,.12), transparent 25rem),
    radial-gradient(circle at 100% 100%, rgba(47,158,47,.1), transparent 23rem),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,250,255,.96));
  box-shadow: var(--sombra-media);
}
.contexto-academico::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--azul-700), var(--verde-500), var(--naranja-500));
}
.contexto-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.contexto-cabecera > div:first-child { max-width: 760px; }
.etiqueta-contexto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--verde-700);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.etiqueta-contexto::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--azul-600), var(--verde-500));
}
.contexto-cabecera h2 {
  margin: 8px 0 8px;
  color: var(--azul-900);
  font-size: clamp(1.7rem, 3.3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.contexto-cabecera p { margin: 0; color: var(--texto-suave); line-height: 1.55; }
.contexto-fecha {
  flex: 0 0 auto;
  min-width: 205px;
  padding: 15px 18px;
  border-radius: 18px;
  text-align: right;
  background: white;
  border: 1px solid rgba(7,59,122,.12);
  box-shadow: 0 10px 22px rgba(7,59,122,.08);
}
.contexto-fecha span { display: block; color: var(--gris); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.contexto-fecha strong { display: block; margin-top: 5px; color: var(--azul-900); font-size: 1rem; }
.contexto-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); gap: 22px; align-items: stretch; }
.periodo-destacado,
.planificacion-anual { border-radius: 24px; border: 1px solid rgba(7,59,122,.11); background: rgba(255,255,255,.95); }
.periodo-destacado { position: relative; padding: 25px; overflow: hidden; box-shadow: 0 14px 30px rgba(7,59,122,.10); }
.periodo-destacado::after { content:""; position:absolute; right:-52px; bottom:-55px; width:180px; height:180px; border:28px solid rgba(18,106,213,.07); border-radius:50%; }
.periodo-destacado-superior { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.insignia-periodo { width:54px; height:54px; border-radius:17px; display:grid; place-items:center; color:white; font-size:1.25rem; font-weight:950; background:linear-gradient(135deg,var(--azul-800),var(--azul-500)); box-shadow:0 11px 22px rgba(18,106,213,.25); }
.estado-academico { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-size:.82rem; font-weight:900; }
.estado-academico i { width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px rgba(240,107,0,.11); }
.estado-proximo { color:var(--naranja-700); background:var(--naranja-100); }
.contexto-supra { position:relative; z-index:1; margin:20px 0 5px; color:var(--verde-700); font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.055em; }
.periodo-destacado h3 { position:relative; z-index:1; margin:0; color:var(--azul-900); font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.04em; }
.periodo-descripcion { position:relative; z-index:1; margin:10px 0 20px; color:#42526a; line-height:1.6; }
.contexto-datos { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contexto-datos div { padding:13px 14px; border-radius:15px; background:#f6faff; border:1px solid rgba(7,59,122,.08); }
.contexto-datos span { display:block; color:var(--gris); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.contexto-datos strong { display:block; margin-top:4px; color:var(--azul-900); font-size:.92rem; }
.periodo-acciones { position:relative; z-index:1; display:flex; gap:11px; flex-wrap:wrap; margin-top:20px; }
.boton-contexto { min-height:46px; padding:0 17px; border:0; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:.9rem; font-weight:900; cursor:pointer; }
.boton-contexto-principal { color:white; background:linear-gradient(135deg,var(--azul-800),var(--azul-600)); box-shadow:0 10px 20px rgba(18,106,213,.18); }
.boton-contexto-secundario { color:var(--azul-800); background:var(--azul-100); border:1px solid rgba(18,106,213,.13); }
.planificacion-anual { padding:22px; }
.planificacion-titulo { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid rgba(7,59,122,.09); }
.planificacion-titulo span { color:var(--verde-700); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.planificacion-titulo h3 { margin:4px 0 0; color:var(--azul-900); font-size:1.4rem; }
.planificacion-titulo small { color:var(--gris); text-align:right; }
.periodos-compactos { display:grid; gap:10px; margin-top:14px; }
.periodo-compacto { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; padding:12px 13px; border-radius:16px; border:1px solid rgba(7,59,122,.08); background:linear-gradient(180deg,#fff,#f9fbff); }
.periodo-compacto > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--azul-800); font-weight:950; background:var(--azul-100); }
.periodo-compacto:nth-child(2)>span { color:var(--naranja-700); background:var(--naranja-100); }
.periodo-compacto:nth-child(3)>span { color:var(--verde-700); background:var(--verde-100); }
.periodo-compacto:nth-child(4)>span { color:white; background:linear-gradient(135deg,var(--azul-700),var(--verde-500)); }
.periodo-compacto strong { display:block; color:var(--azul-900); font-size:.92rem; }
.periodo-compacto small { display:block; margin-top:3px; color:var(--gris); }
.periodo-compacto em { padding:6px 9px; border-radius:999px; color:var(--gris); background:#eef2f7; font-size:.72rem; font-style:normal; font-weight:850; }
.periodo-compacto.activo { border-color:rgba(18,106,213,.2); box-shadow:0 8px 18px rgba(18,106,213,.08); }
.periodo-compacto.activo em { color:var(--naranja-700); background:var(--naranja-100); }

/* =========================================================
21. NOVEDADES Y MENSAJES
========================================================= */
.novedades { padding-bottom: 18px; }
.titulo-novedades { margin-top: 66px; }
.grid-novedades { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.aviso-card { min-height:154px; padding:20px; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; border-radius:20px; background:white; border:1px solid var(--borde); box-shadow:var(--sombra-suave); }
.aviso-icono { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; color:white; font-weight:950; }
.aviso-azul .aviso-icono { background:linear-gradient(135deg,var(--azul-800),var(--azul-500)); }
.aviso-verde .aviso-icono { background:linear-gradient(135deg,var(--verde-700),var(--verde-500)); }
.aviso-naranja .aviso-icono { background:linear-gradient(135deg,var(--naranja-700),var(--naranja-500)); }
.aviso-card small { color:var(--gris); font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.aviso-card h3 { margin:4px 0 6px; color:var(--azul-900); font-size:1.05rem; }
.aviso-card p { margin:0; color:var(--texto-suave); font-size:.9rem; line-height:1.5; }

/* =========================================================
22. ACCIONES DEL HEADER Y AJUSTES DE JERARQUÍA
========================================================= */
.boton-mensajes-header { min-height:42px; padding:0 14px; display:inline-flex; align-items:center; gap:8px; border-radius:14px; color:var(--azul-800); background:white; border:1px solid rgba(7,59,122,.12); box-shadow:0 8px 18px rgba(7,59,122,.08); font-weight:850; font-size:.88rem; }
.boton-mensajes-header svg { width:20px; height:20px; fill:currentColor; }
.panel-lateral { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.panel-icono { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.13); }
.tarjeta-docente { max-width:1120px; }
.secciones-principales,.niveles,.redes-contacto,.ayuda,.novedades { max-width:1180px; }
.hero-contenido { width:min(920px,100%); }

@media (max-width: 940px) {
  .contexto-grid { grid-template-columns:1fr; }
  .grid-novedades { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  :root { --ancho-panel: 360px; }
  .acciones-header { gap:8px; }
  .boton-mensajes-header { width:42px; height:42px; min-height:42px; padding:0; justify-content:center; }
  .boton-mensajes-header span { display:none; }
  .logo-efi-header { display:none; }
  .contexto-academico { width:calc(100% - 24px); margin-top:24px; padding:22px 16px; border-radius:24px; }
  .contexto-cabecera { display:block; }
  .contexto-fecha { margin-top:16px; min-width:0; width:100%; text-align:left; }
  .contexto-grid { gap:14px; }
  .periodo-destacado,.planificacion-anual { border-radius:20px; }
  .periodo-destacado { padding:20px 16px; }
  .contexto-datos { grid-template-columns:1fr; }
  .periodo-acciones { display:grid; }
  .boton-contexto { width:100%; }
  .planificacion-anual { padding:16px; }
  .planificacion-titulo { align-items:flex-start; }
  .planificacion-titulo small { max-width:120px; }
  .periodo-compacto { grid-template-columns:42px 1fr; }
  .periodo-compacto em { grid-column:2; width:max-content; }
  .novedades { width:calc(100% - 24px); }
  .aviso-card { min-height:0; }
  .hero-logo { width:min(190px,48vw); }
  .hero-lema-imagen { max-height:110px; margin-top:12px; }
  .hero-botones .boton { width:100%; max-width:340px; }
}
@media (max-width: 430px) {
  .marca-centro strong { max-width:145px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .panel-lateral { width:min(360px,94vw); padding-left:14px; padding-right:14px; }
  .panel-footer { margin-left:-14px; margin-right:-14px; }
  .panel-enlace.activo::before,.panel-enlace.active::before { left:-14px; }
}

.planificacion-anual.resaltado-temporal{outline:4px solid rgba(18,106,213,.22);outline-offset:4px;transition:outline .25s ease;}

/* =========================================================
   CENTRO DE AVISOS · FUENTE ÚNICA DE PUBLICACIONES
   ========================================================= */
.centro-avisos-efi{position:fixed;z-index:1500;top:76px;right:18px;width:min(430px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 96px));overflow:hidden;border:1px solid rgba(17,65,95,.16);border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(3,31,49,.25)}.centro-avisos-efi[hidden]{display:none}.centro-avisos-efi>header{display:flex;padding:16px 18px;align-items:center;justify-content:space-between;gap:12px;color:#fff;background:linear-gradient(125deg,#071f34,#0e6d9e)}.centro-avisos-efi>header small{color:rgba(255,255,255,.72);font-weight:800}.centro-avisos-efi>header h2{margin:2px 0 0;font-size:1.2rem}.centro-avisos-efi>header>span{display:grid;min-width:34px;height:34px;padding:0 8px;place-items:center;border-radius:999px;background:rgba(255,255,255,.16);font-weight:900}.centro-avisos-lista{display:grid;max-height:520px;overflow:auto}.centro-aviso-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:13px 16px;border-bottom:1px solid #e5edf2;color:#173044;text-decoration:none}.centro-aviso-item:hover{background:#f1f8fc}.centro-aviso-icono{display:grid;width:46px;height:46px;place-items:center;border-radius:13px;color:#fff;background:#0e6d9e;font-size:.72rem;font-weight:900}.centro-aviso-item small{color:#6a7f8e}.centro-aviso-item strong{display:block;margin:2px 0}.centro-aviso-item p{margin:0;color:#455f70;font-size:.82rem}.centro-avisos-vacio{padding:34px 20px;text-align:center}.centro-avisos-vacio p{color:#5d7282}.centro-avisos-efi>footer{padding:12px 16px;background:#f5f9fb;text-align:center}.centro-avisos-efi>footer a{color:#0c5f8f;font-weight:850;text-decoration:none}.novedades-publicadas{margin-bottom:18px}.aviso-card-enlace{color:inherit;text-decoration:none}.aviso-card-enlace:hover{transform:translateY(-2px);box-shadow:0 15px 32px rgba(12,65,98,.14)}
@media(max-width:560px){.centro-avisos-efi{top:66px;right:8px;width:calc(100vw - 16px)}}
/* Comunicaciones EFI V1 · compatibilidad del panel global */
.centro-aviso-item{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px;padding:0;border-bottom:1px solid #e5edf2;background:#fff}.centro-aviso-item>a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:13px 16px;color:#173044;text-decoration:none}.centro-aviso-item:hover,.centro-aviso-item.no-leido{background:#f1f8fc}.centro-aviso-item.no-leido:before{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:#e28716;content:""}.centro-aviso-item>button{align-self:center;margin-right:12px;padding:6px 8px;border:1px solid #c5d9e4;border-radius:8px;color:#0c5f8f;background:#fff;font-size:.68rem;font-weight:850;cursor:pointer}.centro-avisos-efi>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.centro-avisos-efi>footer button{padding:6px 8px;border:0;color:#35697f;background:transparent;font-size:.72rem;font-weight:850;cursor:pointer}
@media(max-width:560px){.centro-aviso-item{grid-template-columns:1fr}.centro-aviso-item>button{justify-self:start;margin:0 0 10px 75px}.centro-avisos-efi>footer{align-items:flex-start;flex-direction:column}}

/* =========================================================
   AVISO DE APERTURA FUERA DEL SERVIDOR LOCAL
   ========================================================= */
.aviso-servidor-local-efi{position:sticky;top:0;z-index:10050;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px max(18px,4vw);color:#fff;background:linear-gradient(90deg,#7a4308,#a5630d);box-shadow:0 8px 24px rgba(46,25,3,.25);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.aviso-servidor-local-efi>div{display:grid;gap:2px}.aviso-servidor-local-efi strong{font-size:.9rem}.aviso-servidor-local-efi span{color:rgba(255,255,255,.86);font-size:.78rem;line-height:1.35}.aviso-servidor-local-efi a{display:inline-flex;min-height:38px;padding:8px 12px;align-items:center;border-radius:10px;color:#6b3904;background:#fff;text-decoration:none;font-size:.78rem;font-weight:900}.aviso-servidor-local-efi button{width:36px;height:36px;border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#fff;background:rgba(255,255,255,.1);font-size:1.1rem;cursor:pointer}
@media(max-width:760px){.aviso-servidor-local-efi{grid-template-columns:1fr auto}.aviso-servidor-local-efi a{grid-column:1/-1;justify-content:center}.aviso-servidor-local-efi span{font-size:.72rem}}

/* RC7 · frase destacada completa, sin recorte */
.frase-docente>.frase-docente-icono{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;overflow:visible}
.frase-docente>.frase-docente-texto{width:auto!important;height:auto!important;min-width:0;max-width:100%;display:block;overflow:visible;white-space:normal;line-height:1.35;text-overflow:clip}

/* RC7 · señal visible de novedades sin leer */
.boton-mensajes-header{position:relative}
.contador-novedades{min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:999px;color:#fff;background:#e55229;font-size:.68rem;font-weight:950;line-height:1;box-shadow:0 4px 10px rgba(229,82,41,.22)}
.contador-novedades[hidden]{display:none!important}
@media(max-width:720px){.boton-mensajes-header .contador-novedades{position:absolute;top:-5px;right:-5px}.boton-mensajes-header>span:not(.contador-novedades){display:none}}

/* RC7 · acceso global al Centro de contacto (no es chat) */
.acceso-contacto-flotante{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:92;min-height:48px;padding:8px 15px 8px 8px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;background:linear-gradient(135deg,#087d73,#0b58b4);box-shadow:0 14px 35px rgba(3,34,65,.23);font-size:.82rem;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.acceso-contacto-flotante span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);font-size:1rem}@media(hover:hover) and (pointer:fine){.acceso-contacto-flotante:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(3,34,65,.28)}}.acceso-contacto-flotante:focus-visible{outline:3px solid #ffb347;outline-offset:3px}
@media(max-width:620px){.acceso-contacto-flotante{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:7px}.acceso-contacto-flotante strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.acceso-contacto-flotante span{width:38px;height:38px}}
@media(max-width:720px){.boton-mensajes-header .contador-novedades:not([hidden]){display:inline-grid!important}}

/* RC7 · ancho público conservado: misma medida aprobada del portal original. El ajuste de altura/scroll aplica solo al panel lateral docente. */
:root{--ancho-maximo:1180px}

/* RC7 · avisos que el docente marca para una página relacionada */
.avisos-relacionados-efi{width:min(1180px,calc(100% - 32px));margin:14px auto 20px;display:grid;gap:10px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.aviso-relacionado{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 15px;border:1px solid #dbe7ef;border-left:5px solid #0b58b4;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(3,34,65,.07)}.aviso-relacionado.prioridad-urgente{border-left-color:#c83232}.aviso-relacionado.prioridad-importante{border-left-color:#e37a18}.aviso-relacionado-icono{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#fff;background:#0b58b4;font-weight:900}.aviso-relacionado small{display:block;color:#658096;font-size:.65rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.aviso-relacionado strong{display:block;margin-top:2px;color:#082e55;font-size:.88rem}.aviso-relacionado p{margin:3px 0 0;color:#53687a;font-size:.77rem;line-height:1.4}.aviso-relacionado>a{padding:9px 12px;border-radius:10px;color:#fff;background:#0b58b4;text-decoration:none;font-size:.75rem;font-weight:900}@media(max-width:650px){.aviso-relacionado{grid-template-columns:auto 1fr}.aviso-relacionado>a{grid-column:1/-1;text-align:center}}

/* =========================================================
   INSTALACION GUIADA DEL PORTAL EFI
   ========================================================= */
.instalar-pwa-efi-flotante{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:93;min-height:50px;padding:7px 15px 7px 8px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;background:linear-gradient(135deg,#0b58b4,#087d73);box-shadow:0 14px 35px rgba(3,34,65,.26);font:850 .82rem/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.instalar-pwa-efi-flotante[hidden]{display:none!important}
.instalar-pwa-efi-flotante span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);font-size:1.25rem;font-weight:950}
.instalar-pwa-efi-flotante:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(3,34,65,.31)}
.instalar-pwa-efi-flotante:focus-visible{outline:3px solid #ffb347;outline-offset:3px}
.panel-instalacion-pwa-efi{position:fixed;inset:0;z-index:2300;display:grid;padding:18px;place-items:center;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.panel-instalacion-pwa-efi[hidden]{display:none!important}
.fondo-instalacion-pwa-efi{position:absolute;inset:0;background:rgba(3,23,38,.68);backdrop-filter:blur(4px)}
.tarjeta-instalacion-pwa-efi{position:relative;width:min(470px,100%);max-height:min(720px,calc(100vh - 36px));overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.72);border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(0,22,38,.38);color:#173044}
.tarjeta-instalacion-pwa-efi>img{display:block;width:72px;height:72px;margin-bottom:12px;border-radius:18px;box-shadow:0 10px 24px rgba(3,54,87,.16)}
.tarjeta-instalacion-pwa-efi>small{color:#087d73;font-size:.7rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.tarjeta-instalacion-pwa-efi h2{margin:5px 42px 7px 0;color:#082e55;font-size:clamp(1.45rem,5vw,2rem);line-height:1.08}
.tarjeta-instalacion-pwa-efi>p{margin:0;color:#53687a;line-height:1.55}
.tarjeta-instalacion-pwa-efi ol{margin:20px 0;padding:16px 16px 16px 38px;border:1px solid #dbe7ef;border-radius:16px;background:#f5f9fb;color:#28495e}
.tarjeta-instalacion-pwa-efi li+li{margin-top:9px}
.cerrar-instalacion-pwa-efi{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid #d5e2ea;border-radius:12px;color:#426276;background:#fff;font-size:1.35rem;cursor:pointer}
.acciones-instalacion-pwa-efi{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:18px}
.acciones-instalacion-pwa-efi button{min-height:46px;padding:10px 15px;border-radius:12px;font:850 .84rem system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.accion-principal-instalacion-pwa{border:0;color:#fff;background:#0b58b4;box-shadow:0 8px 18px rgba(11,88,180,.18)}
.accion-principal-instalacion-pwa:disabled{opacity:.6;cursor:wait}
.accion-secundaria-instalacion-pwa{border:1px solid #cddce5;color:#416174;background:#fff}
.despues-instalacion-pwa-efi{margin-top:18px!important;padding:13px 14px;border-left:4px solid #087d73;border-radius:10px;background:#eff9f6;font-size:.8rem}
.despues-instalacion-pwa-efi a{color:#075fa0;font-weight:900}
.instalacion-pwa-efi-abierta{overflow:hidden}
.confirmacion-instalacion-pwa-efi{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2400;width:min(560px,calc(100vw - 24px));padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:3px 14px;transform:translateX(-50%);border:1px solid #b9ddd3;border-radius:16px;color:#174c43;background:#f0fbf7;box-shadow:0 18px 48px rgba(3,34,65,.24);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.confirmacion-instalacion-pwa-efi strong,.confirmacion-instalacion-pwa-efi span{grid-column:1}
.confirmacion-instalacion-pwa-efi span{font-size:.78rem}
.confirmacion-instalacion-pwa-efi a{grid-column:2;grid-row:1/3;align-self:center;padding:9px 11px;border-radius:10px;color:#fff;background:#087d73;text-decoration:none;font-size:.75rem;font-weight:900}
@media(max-width:620px){.instalar-pwa-efi-flotante{left:12px;bottom:12px}.tarjeta-instalacion-pwa-efi{padding:23px 18px}.acciones-instalacion-pwa-efi{grid-template-columns:1fr}.confirmacion-instalacion-pwa-efi{grid-template-columns:1fr}.confirmacion-instalacion-pwa-efi a{grid-column:1;grid-row:auto;margin-top:7px;text-align:center}}
@media(prefers-reduced-motion:reduce){.instalar-pwa-efi-flotante{transition:none}.fondo-instalacion-pwa-efi{backdrop-filter:none}}

/* Sac · acceso global independiente, situado encima del contacto existente */
.acceso-sac-flotante{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(80px,calc(env(safe-area-inset-bottom) + 80px));z-index:92;min-height:56px;padding:7px 15px 7px 7px;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.72);border-radius:999px;color:#fff;background:linear-gradient(135deg,#073b7a,#0b6d86 70%,#16836e);box-shadow:0 16px 38px rgba(3,34,65,.28);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.acceso-sac-flotante>img{width:42px;height:42px;flex:0 0 42px;border:2px solid rgba(255,255,255,.85);border-radius:50%;object-fit:cover;object-position:center top}.acceso-sac-flotante strong,.acceso-sac-flotante b,.acceso-sac-flotante small{display:block}.acceso-sac-flotante b{font-size:.8rem}.acceso-sac-flotante small{margin-top:1px;color:rgba(255,255,255,.72);font-size:.62rem}.acceso-sac-flotante:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(3,34,65,.34)}.acceso-sac-flotante:focus-visible{outline:3px solid #ffb347;outline-offset:3px}
@media(max-width:620px){.acceso-sac-flotante{right:12px;bottom:74px;width:54px;height:54px;min-height:54px;padding:5px}.acceso-sac-flotante>img{width:42px;height:42px}.acceso-sac-flotante strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.acceso-sac-flotante{transition:none}}

/* R3 · el toque no mantiene un estado hover ni desplaza Contacto. */
@media(hover:none),(pointer:coarse){.acceso-contacto-flotante{transform:none;transition:none;touch-action:manipulation}}
body.efi-documento-abierto .acceso-contacto-flotante{visibility:hidden;pointer-events:none}

/* R4 · espacio medido para los avisos y una vista ligera opcional. */
body.panel-lateral-abierto .acceso-contacto-flotante,
body.panel-lateral-abierto .acceso-sac-flotante,
body.panel-lateral-abierto .instalar-pwa-efi-flotante{visibility:hidden;pointer-events:none}
body.efi-actualizacion-visible .acceso-contacto-flotante{bottom:calc(var(--efi-actualizacion-alto,144px) + 18px);bottom:calc(var(--efi-actualizacion-alto,144px) + max(18px,env(safe-area-inset-bottom)))}
body.efi-actualizacion-visible .acceso-sac-flotante{bottom:calc(var(--efi-actualizacion-alto,144px) + 80px);bottom:calc(var(--efi-actualizacion-alto,144px) + max(80px,env(safe-area-inset-bottom)))}
body.efi-actualizacion-visible .instalar-pwa-efi-flotante{bottom:calc(var(--efi-actualizacion-alto,144px) + 18px)}
.efi-vista-sencilla-boton{display:block;width:calc(100% - 32px);min-height:44px;margin:12px 16px 24px;padding:10px;border:1px solid #a8c9c1;border-radius:10px;color:#175f4b;background:#f0faf6;font:750 .9rem system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.efi-vista-sencilla *{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}