*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 6rem; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 var(--t-base) / var(--interlineado) var(--fuente-texto); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; font-feature-settings: "cv11", "ss03";
}
h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.25; margin: 0; font-weight: 500; color: var(--marino); letter-spacing: -0.012em; }
h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
strong, b { font-weight: 500; }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 var(--e3); }
a { color: var(--cobalto); text-underline-offset: 3px; }
a:hover { color: var(--marino); }
small { font-size: var(--t-xs); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
main:focus-visible, h1:focus-visible { outline: none; }
[hidden] { display: none !important; }

.salto {
  position: absolute; left: var(--e3); top: -4rem; z-index: 100; background: var(--marino); color: #fff;
  padding: var(--e2) var(--e4); border-radius: var(--radio); transition: top var(--duracion);
}
.salto:focus { top: var(--e3); }
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.aviso-simulador { background: var(--marino-profundo); color: #fff; text-align: center; font-size: var(--t-xs); padding: var(--e1) var(--e3); }
.noscript { padding: var(--e5); background: var(--error-f); color: var(--error-t); }

/* ---- Estructura: columna lateral fija + contenido ---- */
.app { min-height: 100vh; }
main {
  display: block; outline: none; min-width: 0;
  padding: var(--e6) var(--e6) var(--e8); max-width: calc(var(--ancho-max) + 2 * var(--e6)); margin: 0 auto;
}
body[data-sesion="si"] .app { padding-left: var(--ancho-lateral); }
/* Las pantallas con la barra de guardado fija abajo dejan sitio de sobra para que el último campo se vea entero, con aire por debajo. */
main:has(.barra-guardar) { padding-bottom: 6rem; }
/* Con la ventana baja, la columna lateral se compacta para que quepan todos los apartados y los botones de abajo. */
@media (max-height: 820px) and (min-width: 62.01rem) {
  .lateral { gap: var(--e3); padding-top: var(--e4); padding-bottom: var(--e3); }
  .lateral__enlace { min-height: 2.25rem; }
  .lateral__usuario { padding-top: var(--e3); gap: var(--e1); }
}

.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); z-index: 40;
  display: flex; flex-direction: column; gap: var(--e5);
  background: var(--marino); color: #fff; padding: var(--e5) var(--e3) var(--e4);
  overflow-y: auto;
}
body[data-sesion="no"] .lateral, body[data-sesion="no"] .barra-movil, body[data-sesion="no"] .lateral__velo { display: none; }
.lateral__marca { display: flex; align-items: center; gap: var(--e3); color: #fff; text-decoration: none; padding: 0 var(--e2); }
.lateral__marca:hover { color: #fff; }
.lateral__sello {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: #fff; color: var(--marino);
  display: grid; place-items: center; font: 500 1.2rem/1 var(--fuente-titulo);
}
.lateral__nombre { font: 500 0.9375rem/1.25 var(--fuente-titulo); letter-spacing: -0.01em; }
.lateral__nombre small { display: block; font: 400 var(--t-xs)/1.3 var(--fuente-texto); color: #B9C7E3; margin-top: 2px; letter-spacing: 0; }

.lateral__nav { display: grid; gap: 2px; align-content: start; flex: 1; }
.lateral__enlace {
  display: flex; align-items: center; gap: var(--e3); min-height: 2.5rem; padding: 0 var(--e3);
  border-radius: var(--radio); color: #DCE6F7; text-decoration: none; font-family: var(--fuente-nav); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.01em;
  transition: background-color var(--duracion), color var(--duracion), transform var(--duracion);
}
.lateral__enlace svg { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.lateral__enlace:active { transform: scale(0.98); }
.lateral__enlace[aria-current="page"] { background: #fff; color: var(--marino); }
.lateral__enlace[aria-current="page"] svg { opacity: 1; }
.lateral__enlace:focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .lateral__enlace:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
  .lateral__enlace[aria-current="page"]:hover { background: #fff; color: var(--marino); }
}

.lateral__usuario { border-top: 1px solid rgb(255 255 255 / 0.16); padding: var(--e4) var(--e2) 0; display: grid; gap: var(--e2); }
.lateral__quien { margin: 0; display: grid; gap: 1px; font-size: var(--t-s); line-height: 1.3; overflow-wrap: anywhere; }
.lateral__quien span { color: #B9C7E3; font-size: var(--t-xs); }
.lateral__perfil { color: #DCE6F7; font-size: var(--t-s); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: var(--e1) 0; }
.lateral__perfil:hover { color: #fff; }
.lateral__perfil:focus-visible { outline-color: #fff; }
.lateral__salir {
  font: inherit; font-weight: 500; font-size: var(--t-s); cursor: pointer; min-height: 2.25rem; border-radius: var(--radio);
  background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 0.4); transition: background-color var(--duracion), transform var(--duracion);
}
.lateral__salir:hover { background: rgb(255 255 255 / 0.12); }
.lateral__salir:active { transform: scale(0.98); }
.lateral__salir:focus-visible { outline-color: #fff; }

.barra-movil { display: none; }
.lateral__velo { position: fixed; inset: 0; z-index: 35; background: rgb(24 27 62 / 0.5); }

.avisos { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60; display: grid; gap: var(--e2); max-width: min(26rem, calc(100vw - 2rem)); }
.avisos--errores { bottom: auto; top: var(--e4); }
.aviso {
  background: var(--marino); color: #fff; padding: var(--e3) var(--e4); border-radius: var(--radio);
  box-shadow: var(--sombra); display: flex; gap: var(--e3); align-items: flex-start;
  animation: entrada var(--duracion) var(--curva);
}
.aviso--error { background: var(--error-t); }
.aviso button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; margin-left: auto; }
@keyframes entrada { from { opacity: 0; transform: translateY(6px); } }

/* Móvil: la columna lateral se pliega y se abre con el botón de menú */
@media (max-width: 62rem) {
  body[data-sesion="si"] .app { padding-left: 0; }
  main { padding: var(--e5) var(--e4) var(--e8); }
  .barra-movil {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3);
    height: 3.5rem; padding: 0 var(--e3); background: var(--marino); color: #fff;
  }
  .barra-movil__marca { font: 500 1rem/1 var(--fuente-titulo); letter-spacing: -0.01em; }
  .barra-movil__menu {
    width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radio); background: transparent; cursor: pointer;
    display: grid; place-items: center; color: #fff; transition: transform var(--duracion), background-color var(--duracion);
  }
  .barra-movil__menu:active { transform: scale(0.94); }
  .barra-movil__menu:focus-visible { outline-color: #fff; }
  .barra-movil__rayas, .barra-movil__rayas::before, .barra-movil__rayas::after {
    display: block; width: 1.35rem; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative;
  }
  .barra-movil__rayas::before { position: absolute; top: -6px; }
  .barra-movil__rayas::after { position: absolute; top: 6px; }
  .lateral {
    transform: translateX(-100%); visibility: hidden; box-shadow: none;
    transition: transform 260ms var(--curva-cajon), visibility 0s linear 260ms;
  }
  .lateral[data-abierto="si"] { transform: none; visibility: visible; transition: transform 260ms var(--curva-cajon), visibility 0s; box-shadow: 8px 0 40px rgb(24 27 62 / 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}