:root, [data-tema=claro], [data-tema=automatico] { color-scheme: light; --fondo: #eef4f1; --panel: #fff; --texto: #12302a; --borde: #c6d8d0; --primario: #0f766e; --boton: #0f766e; }
[data-tema=oscuro] { color-scheme: dark; --fondo: #0c1815; --panel: #13241f; --texto: #e3f1eb; --borde: #2d4a41; --primario: #5fc9c0; --boton: #0f766e; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
header { background: var(--panel); padding: 1rem max(1rem, calc((100% - 1100px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
a { color: var(--primario); }
.marca { font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.sesion, nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.tarjeta { max-width: 680px; padding: clamp(1rem, 4vw, 2.5rem); background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; }
h1 { line-height: 1.25; font-size: clamp(1.6rem, 4vw, 2rem); }
h2 { font-size: 1.25rem; }
button, .boton { font: inherit; display: inline-block; min-height: 48px; padding: .65rem 1.15rem; border: 1px solid transparent; border-radius: 9px; background: var(--boton); color: #fff; text-decoration: none; cursor: pointer; margin: .3rem 0; }
.secundario { background: var(--panel); color: var(--primario); border-color: var(--borde); }
.peligro { background: #a92525; }
label { display: block; font-weight: 600; margin-top: 1rem; }
input { display: block; width: 100%; min-height: 48px; padding: .7rem; font: inherit; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); color: var(--texto); margin: .3rem 0 1rem; }
input[type=hidden] { display: none; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tabla { overflow-x: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .8rem; border-bottom: 1px solid var(--borde); }
caption { text-align: left; padding: 1rem; font-weight: 600; }
.aviso { background: var(--panel); padding: 1rem; border-left: 4px solid var(--primario); }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 3px; }
details form { margin-top: 1rem; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]), [data-tema=automatico] { color-scheme: dark; --fondo: #0c1815; --panel: #13241f; --texto: #e3f1eb; --borde: #2d4a41; --primario: #5fc9c0; --boton: #0f766e; } }
@media (max-width: 600px) { header { align-items: flex-start; } .sesion { width: 100%; justify-content: space-between; } nav { align-items: stretch; flex-direction: column; } }

/* Navegación de cuentas activas */
.con-barra { --ancho-barra: 260px; }
.con-barra main { max-width: 1360px; margin: 0 0 2rem var(--ancho-barra); padding: calc(64px + 2rem) clamp(1rem, 3vw, 3rem) 0; transition: margin-left .18s ease; }
.barra-lateral { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--ancho-barra); height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 16px 12px; background: #0b2a22; color: #edf8ef; color-scheme: dark; overflow-y: auto; transition: width .18s ease, transform .18s ease; }
.barra-lateral a, .barra-lateral button, .barra-lateral summary { color: #edf8ef; text-decoration: none; border-radius: 8px; }
.barra-lateral button { background: transparent; border: 1px solid #517268; margin: 0; padding: 8px; min-width: 44px; min-height: 44px; }
.barra-lateral svg { flex-shrink: 0; }
.barra-lateral > .navegacion-lateral { flex: 1; min-height: 88px; overflow-y: auto; }
.barra-lateral > :not(.navegacion-lateral) { flex-shrink: 0; }
.barra-lateral :focus-visible { outline-color: #c9f56a; outline-offset: -3px; }
.barra-lateral a:hover, .barra-lateral button:hover, .barra-lateral summary:hover { background: #1d4438; }
.marca-lateral { display: flex; align-items: center; flex-direction: column; gap: 4px; margin-bottom: 4px; font-weight: 650; font-size: .95rem; }
.logo-completo { width: auto; max-width: 150px; max-height: 92px; height: auto; }
.logo-icono { display: none; object-fit: contain; }
.navegacion-lateral { display: block; }
.navegacion-lateral > a, .navegacion-lateral summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.navegacion-lateral summary { list-style: none; }
.navegacion-lateral summary::-webkit-details-marker { display: none; }
.navegacion-lateral summary::after { content: '›'; margin-left: auto; color: #5fc9c0; }
.navegacion-lateral details[open] > summary::after { transform: rotate(90deg); }
.opciones-menu { padding: 4px 0 8px 24px; }
.opciones-menu a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 8px 10px; font-size: .9rem; }
.barra-lateral [aria-current=page] { color: #c9f56a; background: #234b32; box-shadow: inset 3px 0 #c9f56a; font-weight: 650; }
.insignia { background: #c9f56a; color: #0b2a22; border-radius: 20px; padding: 0 8px; font-size: .8rem; }
.cerrar-menu, .fondo-menu { display: none; }
.saltar-contenido { position: fixed; top: -100px; left: 12px; z-index: 50; background: var(--panel); padding: 12px; }
.saltar-contenido:focus { top: 12px; }
@media (min-width: 900px) {
  .barra-comprimida .con-barra { --ancho-barra: 72px; }
  .barra-comprimida .barra-lateral { padding-inline: 12px; }
  .barra-comprimida .etiqueta, .barra-comprimida .logo-completo, .barra-comprimida .opciones-menu, .barra-comprimida summary::after { display: none; }
  .barra-comprimida .logo-icono { display: block; }
  .barra-comprimida .marca-lateral { min-height: 44px; justify-content: center; }
  .barra-comprimida .navegacion-lateral > a, .barra-comprimida .navegacion-lateral summary { padding: 10px 12px; justify-content: center; }
}
@media (max-width: 899px) {
  .con-barra main { margin: 0; padding: 80px 16px 24px; }
  .barra-lateral { width: min(300px, calc(100vw - 56px)); transform: translateX(-100%); visibility: hidden; }
  .menu-abierto .barra-lateral { transform: translateX(0); visibility: visible; }
  .menu-abierto, .menu-abierto body { overflow: hidden; }
  .fondo-menu:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / 65%); }
  .barra-lateral .cerrar-menu { display: block; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .barra-lateral { transition: none; } }

/* ---------- Portada (pantalla de ingreso) ---------- */
body.portada { min-height: 100vh; min-height: 100dvh; background: #0b2a22; color: #fff; overflow-x: hidden; }
body.portada main { max-width: none; margin: 0; padding: 0; }
/* El arte siempre completo (contain); los bordes sobrantes se rellenan con el mismo arte desenfocado. */
body.portada::before { content: ""; position: fixed; inset: -60px; z-index: 0; background: #0b2a22 url('/estatico/portada/portada-960.webp') center / cover no-repeat; filter: blur(40px) brightness(.55) saturate(120%); }
.portada-fondo { position: fixed; inset: 0; z-index: 1; background: url('/estatico/portada/portada.jpg') center / contain no-repeat; background-image: image-set(url('/estatico/portada/portada.webp') type('image/webp'), url('/estatico/portada/portada.jpg') type('image/jpeg')); }
/* La tarjeta se ancla al arte (abajo a la izquierda, sobre los documentos), no a la ventana. */
.vidrio { position: fixed; --arte-an: min(100vw, calc(100vh * 1672 / 941)); --arte-al: min(100vh, calc(100vw * 941 / 1672)); left: calc((100vw - var(--arte-an)) / 2 + var(--arte-an) * .03); bottom: calc((100vh - var(--arte-al)) / 2 + var(--arte-al) * .05); width: clamp(280px, calc(var(--arte-an) * .27), 380px); padding: 1.5rem 1.6rem 1.2rem; color: #fff; z-index: 2; background: rgba(6, 30, 25, .26); border: 1px solid rgba(255, 255, 255, .32); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(5px) saturate(130%); backdrop-filter: blur(5px) saturate(130%); }
.vidrio h1 { margin: .1rem 0 .3rem; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: .01em; }
.vidrio p { margin: 0 0 1.1rem; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6); }
.vidrio h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.vidrio-sello { display: inline-block; margin: 0 0 .4rem !important; padding: .15rem .65rem; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #c9f56a; background: rgba(201, 245, 106, .12); border: 1px solid rgba(201, 245, 106, .45); border-radius: 999px; }
.boton-google { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 52px; padding: .7rem 1rem; border-radius: 12px; background: #fff; color: #1f1f1f; font-weight: 650; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s ease, box-shadow .15s ease; }
.boton-google:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.boton-google:focus-visible { outline: 3px solid #c9f56a; outline-offset: 3px; }
.vidrio-nota { margin: 1rem 0 0 !important; font-size: .82rem; opacity: .85; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vidrio { background: rgba(8, 36, 30, .82); } }
@media (prefers-reduced-motion: reduce) { .boton-google { transition: none; } }
/* Pantallas verticales (celular, iPad vertical): el arte arriba completo, la tarjeta debajo. */
@media (max-aspect-ratio: 4/3) {
  body.portada { background: linear-gradient(180deg, #0b2a22 0%, #0f3b2f 55%, #0b2a22 100%); }
  .portada-fondo { position: relative; inset: auto; width: 100%; aspect-ratio: 1672 / 941; background-size: contain; background-image: image-set(url('/estatico/portada/portada-960.webp') type('image/webp'), url('/estatico/portada/portada.jpg') type('image/jpeg')); }
  .vidrio { position: relative; left: auto; bottom: auto; margin: -1rem auto 2rem; width: min(440px, calc(100vw - 2rem)); background: rgba(6, 30, 25, .35); }
}
/* Barra de desplazamiento oscura y discreta dentro del menú lateral */
.barra-lateral, .barra-lateral > .navegacion-lateral { scrollbar-width: thin; scrollbar-color: rgba(201, 245, 106, .35) transparent; }
.barra-lateral ::-webkit-scrollbar { width: 6px; }
.barra-lateral ::-webkit-scrollbar-thumb { background: rgba(201, 245, 106, .35); border-radius: 3px; }

/* Barra superior del área de trabajo: botón del menú a la izquierda, usuario a la derecha */
.barra-superior { position: fixed; top: 0; right: 0; left: var(--ancho-barra); z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 clamp(12px, 2vw, 24px); background: var(--panel); border-bottom: 1px solid var(--borde); transition: left .18s ease; }
.alternar-menu { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 8px; background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.alternar-menu:hover { background: var(--fondo); }
.titulo-superior { display: none; align-items: center; gap: 8px; font-weight: 650; }
.menu-usuario { position: relative; margin-left: auto; }
.menu-usuario > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px 4px 14px; border-radius: 999px; cursor: pointer; list-style: none; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover, .menu-usuario[open] > summary { background: var(--fondo); }
.nombre-usuario { font-weight: 600; }
.foto-usuario { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #5fc9c0; }
.foto-usuario.inicial { display: inline-flex; align-items: center; justify-content: center; background: #0b2a22; color: #c9f56a; font-weight: 700; }
.panel-usuario { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 24px)); padding: 12px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / 25%); }
.cabecera-panel { display: flex; flex-direction: column; padding: 4px 8px 12px; border-bottom: 1px solid var(--borde); }
.cabecera-panel span { font-size: .85rem; opacity: .75; overflow-wrap: anywhere; }
.titulo-grupo { margin: 12px 8px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.panel-usuario > a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.panel-usuario > a:hover, .panel-usuario > a[aria-current=page] { background: var(--fondo); }
.panel-usuario > a .insignia { margin-left: auto; }
.panel-usuario .selector-tema { display: flex; gap: 6px; padding: 4px 0 8px; }
.panel-usuario .selector-tema button { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 6px 2px; min-height: 56px; font-size: .75rem; background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.panel-usuario .selector-tema [aria-pressed=true] { background: #c9f56a; color: #0b2a22; border-color: #c9f56a; }
.panel-usuario form { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }
.panel-usuario .salir { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0; background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.panel-usuario .salir:hover { background: #a92525; color: #fff; border-color: #a92525; }
@media (max-width: 899px) {
  .barra-superior { left: 0; }
  .con-barra main { margin: 0; padding: calc(64px + 1.5rem) 16px 24px; }
  .titulo-superior { display: flex; }
  .nombre-usuario { display: none; }
}
@media (prefers-reduced-motion: reduce) { .barra-superior, .con-barra main { transition: none; } }