/* CONSERVE · movimiento y materiales
   Una sola capa con las curvas, duraciones y animaciones que usa toda la interfaz.
   La idea: que cada cosa entre, responda y salga como en una app nativa moderna
   (nada aparece de golpe, nada se corta a la mitad). */

:root {
  /* Curvas: entrar despacio al final, salir rápido al principio. */
  --curva: cubic-bezier(.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(.05, .7, .1, 1);
  --curva-salida: cubic-bezier(.3, 0, .8, .15);
  /* Resortes: el rebote pequeño es el que da la sensación "viva". */
  --resorte: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --resorte-suave: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 82.8%, 1);

  /* Duraciones */
  --t-toque: 90ms;
  --t-corta: 160ms;
  --t-media: 260ms;
  --t-larga: 420ms;

  /* Materiales */
  --vidrio: saturate(180%) blur(20px);
  --sombra: 0 1px 2px rgba(11, 59, 52, .05), 0 6px 18px -10px rgba(11, 59, 52, .16);
  --sombra-elevada: 0 2px 6px rgba(11, 59, 52, .07), 0 18px 40px -20px rgba(11, 59, 52, .32);
  --sombra-flotante: 0 10px 20px -12px rgba(6, 35, 21, .35), 0 30px 70px -30px rgba(6, 35, 21, .5);

  /* Esquinas un poco más generosas que antes */
  --radio: 18px;
  --radio-sm: 12px;
  --radio-pildora: 999px;
}

html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }

/* ---------- Animaciones base ---------- */
@keyframes surgir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes desvanecer { to { opacity: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes onda-expandir { to { transform: scale(1); opacity: 0; } }
@keyframes pulso-suave { 50% { opacity: .45; } }

/* ---------- Entrada escalonada del contenido ---------- */
/* El enrutador marca el contenedor y reparte --d entre las piezas visibles. */
.entrando > * {
  animation: surgir var(--t-larga) var(--curva-entrada) backwards;
  animation-delay: var(--d, 0ms);
}

/* Mientras la siguiente pantalla llega, la actual se atenúa un poco. */
.contenido.esperando { opacity: .5; transition: opacity var(--t-media) var(--curva); }
.contenido { transition: opacity var(--t-corta) var(--curva); }

/* Dentro de una rejilla cada tarjeta entra por su cuenta, no el bloque entero. */
.entrando > .rejilla { animation: none; }
.entrando > .rejilla > * {
  animation: surgir var(--t-larga) var(--curva-entrada) backwards;
  animation-delay: var(--d, 0ms);
}

/* ---------- Respuesta al tacto (onda + hundido) ---------- */
.btn, nav.menu a, nav.menu .grupo, .pestanas button, .selector-aportante, .barra-inferior a,
.resultados button, .menu-acciones-lista button, .pr-menu-lista button, .menu-asociado-lista a,
.casilla-novedad {
  position: relative;
  transition: transform var(--t-toque) var(--curva), background-color var(--t-corta) var(--curva),
    color var(--t-corta) var(--curva), border-color var(--t-corta) var(--curva), box-shadow var(--t-corta) var(--curva),
    filter var(--t-toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
/* La onda se recorta dentro de la pieza que se toca; los botones no la llevan porque
   recortarlos escondería su texto cuando quedan en una celda estrecha. */
nav.menu a, nav.menu .grupo, .pestanas button, .selector-aportante, .barra-inferior a,
.resultados button, .menu-acciones-lista button, .pr-menu-lista button, .menu-asociado-lista a,
.casilla-novedad { overflow: hidden; }
.btn:active:not(:disabled), .pestanas button:active, .selector-aportante:active,
.casilla-novedad:active { transform: scale(.96); }
.btn:active:not(:disabled) { filter: brightness(.93); box-shadow: 0 0 0 4px rgba(0, 168, 88, .16); }
nav.menu a:active, nav.menu .grupo:active, .barra-inferior a:active { transform: scale(.975); }

.onda {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .16;
  transform: scale(0);
  pointer-events: none;
  animation: onda-expandir 560ms var(--curva) forwards;
}

/* ---------- Botones ---------- */
.btn { border-radius: var(--radio-pildora); padding: 8px 15px; }
.btn.sm { padding: 6px 12px; }
/* Redondo, pero del mismo tamaño de siempre: en las columnas de acciones van cuatro
   seguidos y no pueden ocupar más. */
.btn.icono { width: 32px; min-height: 32px; padding: 0; border-radius: 50%; }
.btn:not(:disabled):hover { box-shadow: 0 6px 16px -10px rgba(11, 59, 52, .55); }
.btn:disabled { transform: none; }
.btn svg.i { transition: transform var(--t-media) var(--resorte-suave); }
.btn:not(:disabled):hover svg.i { transform: scale(1.08); }
.btn-enlace { transition: color var(--t-corta) var(--curva); }

/* Botón ocupado: el texto se apaga y gira un aro dentro del propio botón. */
.btn[data-ocupado] { color: transparent !important; pointer-events: none; position: relative; }
.btn[data-ocupado]::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  color: #fff;
  animation: girar 620ms linear infinite;
}
.btn.sec[data-ocupado]::after, .btn.fantasma[data-ocupado]::after { color: var(--tinta-suave); }

/* ---------- Foco visible ---------- */
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 168, 88, .28); border-radius: var(--radio-sm); }
input:focus, select:focus, textarea:focus { transition: box-shadow var(--t-corta) var(--curva), border-color var(--t-corta) var(--curva); }

/* ---------- Encabezado de vidrio ---------- */
.encabezado {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: var(--vidrio);
  backdrop-filter: var(--vidrio);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva),
    border-color var(--t-media) var(--curva);
}
.encabezado.desplazado {
  border-bottom-color: var(--linea);
  box-shadow: 0 6px 20px -18px rgba(6, 35, 21, .9);
}
.encabezado h1.cambio { animation: surgir var(--t-media) var(--curva-entrada); }

/* Barra de progreso de navegación (la línea fina bajo el encabezado). */
.barra-progreso {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--t-media) var(--curva);
}
.barra-progreso.activa { opacity: 1; }
.barra-progreso i {
  display: block;
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--marca-500), var(--marca-azul-500));
  transition: transform var(--t-larga) var(--curva);
}
.barra-progreso.activa i { transform: translateX(-28%); }
.barra-progreso.completa i { transform: translateX(0); transition-duration: var(--t-corta); }

/* ---------- Barra lateral ---------- */
.barra-lateral { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.selector-aportante { transition: background-color var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); }
.selector-aportante svg:last-child { transition: transform var(--t-media) var(--resorte-suave); }
.selector-aportante:hover svg:last-child { transform: translateY(2px); }

/* La pastilla que marca la opción activa se desliza entre opciones. */
nav.menu { position: relative; }
.pastilla-menu {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radio-sm);
  background: linear-gradient(90deg, rgba(0, 168, 88, .34), rgba(0, 168, 88, .18));
  box-shadow: inset 0 0 0 1px rgba(127, 211, 171, .22);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-larga) var(--resorte-suave), width var(--t-larga) var(--resorte-suave),
    height var(--t-media) var(--curva), opacity var(--t-corta) var(--curva);
  z-index: 0;
}
.pastilla-menu.visible { opacity: 1; }
nav.menu a, nav.menu .grupo { z-index: 1; }
nav.menu a.activo { background: none; }
nav.menu a.activo::before { display: none; }
nav.menu a:hover:not(.activo) { background: rgba(255, 255, 255, .08); }

/* Acordeón de grupos: se despliega con altura animada y los enlaces entran en cascada.
   La altura solo se anima cuando los enlaces vienen dentro de su envoltorio; si el
   navegador quedó con una versión anterior del guion, el grupo cerrado sigue oculto
   como siempre en lugar de dejar un hueco. */
nav.menu .grupo-menu .items:has(> div) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-media) var(--curva);
  padding: 0 0 0 18px;
}
nav.menu .grupo-menu.abierto .items:has(> div) { grid-template-rows: 1fr; padding-bottom: 6px; }
nav.menu .grupo-menu .items > div { overflow: hidden; min-height: 0; }
nav.menu .grupo-menu .items:has(> div) a {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
nav.menu .grupo-menu.abierto .items a { opacity: 1; transform: none; }
nav.menu .grupo-menu.abierto .items a:nth-child(1) { transition-delay: 30ms; }
nav.menu .grupo-menu.abierto .items a:nth-child(2) { transition-delay: 55ms; }
nav.menu .grupo-menu.abierto .items a:nth-child(3) { transition-delay: 80ms; }
nav.menu .grupo-menu.abierto .items a:nth-child(4) { transition-delay: 100ms; }
nav.menu .grupo-menu.abierto .items a:nth-child(5) { transition-delay: 118ms; }
nav.menu .grupo-menu.abierto .items a:nth-child(n+6) { transition-delay: 132ms; }
nav.menu .grupo svg:last-child { transition: transform var(--t-media) var(--resorte-suave); }

/* Widgets de la barra lateral */
.widget { transition: background-color var(--t-media) var(--curva); }
.widget .cifra-valor, .widget .cifra-etiqueta { transition: opacity var(--t-corta) var(--curva), transform var(--t-corta) var(--curva); }
.widget.cambiando .cifra-valor, .widget.cambiando .cifra-etiqueta { opacity: 0; transform: translateY(-6px); }

/* ---------- Tarjetas e indicadores ---------- */
.tarjeta {
  box-shadow: var(--sombra);
  transition: box-shadow var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
.indicador {
  transition: box-shadow var(--t-media) var(--curva), transform var(--t-media) var(--resorte-suave),
    border-color var(--t-media) var(--curva);
}
.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-elevada); border-color: var(--marca-300); }
.indicador .valor { transition: opacity var(--t-corta) var(--curva); }

/* ---------- Tablas ---------- */
/* Los botones de cada fila van siempre en una sola línea: si no caben, la tabla se
   desliza. Apilados alargaban la fila hasta cuatro veces su altura. */
.acciones-fila, .pr-acciones-fila { flex-wrap: nowrap; }
table.tabla tbody tr { transition: background-color var(--t-corta) var(--curva); }
table.tabla tbody tr.seleccionada { box-shadow: inset 3px 0 0 var(--marca-500); }
.vacio svg { animation: surgir var(--t-larga) var(--resorte-suave) backwards; }

/* ---------- Estado de carga ---------- */
/* Aparece con retraso: si la respuesta llega rápido no alcanza a verse y no parpadea. */
.cargando-panel {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 56px 16px;
  color: var(--tinta-suave);
  font-size: 13px;
  opacity: 0;
  animation: surgir var(--t-media) var(--curva-entrada) 200ms forwards;
}
.girador {
  width: 26px; height: 26px;
  border: 2.5px solid var(--marca-100);
  border-top-color: var(--marca-500);
  border-radius: 50%;
  animation: girar 640ms linear infinite;
}

/* ---------- Pestañas con indicador deslizante ---------- */
.pestanas { position: relative; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: none; /* que no se aplasten unas contra otras: la barra se desliza */
  border-bottom-color: transparent !important;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
}
.pestanas button:hover { color: var(--marca-700); background: var(--marca-50); }
.subrayado-pestana {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--marca-600);
  opacity: 0;
  transform-origin: left center;
  transition: transform var(--t-larga) var(--resorte-suave), width var(--t-larga) var(--resorte-suave),
    opacity var(--t-corta) var(--curva);
  pointer-events: none;
}
.subrayado-pestana.visible { opacity: 1; }

/* ---------- Ventanas ---------- */
.fondo-modal {
  background: rgba(6, 35, 21, .32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: aparecer-fondo var(--t-media) var(--curva-entrada);
  overscroll-behavior: contain;
}
@keyframes aparecer-fondo { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.modal {
  box-shadow: var(--sombra-flotante);
  animation: entrar-modal var(--t-larga) var(--resorte-suave);
  transform-origin: center 20%;
}
@keyframes entrar-modal { from { opacity: 0; transform: translateY(16px) scale(.94); } }
/* Al cerrarse deja de ser .fondo-modal (para que nadie la tome por abierta) y termina
   de salir con esta clase. */
.modal-saliente {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  background: rgba(6, 35, 21, .32);
  pointer-events: none;
  animation: desvanecer var(--t-corta) var(--curva-salida) forwards;
}
.modal-saliente .modal { animation: salir-modal var(--t-corta) var(--curva-salida) forwards; }
@keyframes salir-modal { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes subir-hoja { from { transform: translateY(100%); } }
@keyframes bajar-hoja { to { transform: translateY(100%); } }
.modal > footer { border-radius: 0 0 var(--radio) var(--radio); }

/* ---------- Mensajes flotantes ---------- */
.mensaje {
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-flotante);
  animation: entrar-mensaje var(--t-larga) var(--resorte) backwards;
  will-change: transform;
}
@keyframes entrar-mensaje { from { opacity: 0; transform: translateY(24px) scale(.9); } }
.mensaje.saliendo { animation: salir-mensaje var(--t-corta) var(--curva-salida) forwards; }
@keyframes salir-mensaje { to { opacity: 0; transform: translateX(28px) scale(.95); } }

/* ---------- Avisos y distintivos ---------- */
.aviso { animation: surgir var(--t-media) var(--curva-entrada) backwards; }
.distintivo { transition: background-color var(--t-corta) var(--curva), color var(--t-corta) var(--curva); }

/* ---------- Menús desplegables ---------- */
.menu-acciones-lista, .pr-menu-lista, .menu-asociado-lista, .resultados {
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-elevada);
  animation: abrir-menu var(--t-media) var(--resorte-suave);
  transform-origin: top right;
}
.resultados { transform-origin: top center; }
@keyframes abrir-menu { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  /* El encabezado no puede empujar la pantalla: el título se recorta y los botones que
     no caben pasan a la línea de abajo, pegados a la derecha. */
  .encabezado { flex-wrap: wrap; row-gap: 8px; }
  .encabezado > div:not(.acciones):not(.barra-progreso) { flex: 1 1 auto; min-width: 0; }
  .encabezado .acciones { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; min-width: 0; }
  .encabezado .acciones .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Lo mismo dentro de las tarjetas: sus acciones bajan de línea en vez de salirse. */
  .tarjeta > header { flex-wrap: wrap; row-gap: 8px; }
  .tarjeta > header .acciones { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
  .pr-buscar { min-width: 0; }
  .pr-buscar input { max-width: 100%; }

  /* Campos cómodos de tocar: 16 px evita que el teléfono acerque la pantalla al
     escribir, y todo lo que se toca llega al tamaño mínimo de un dedo. */
  input[type=text], input[type=password], input[type=email], input[type=number],
  input[type=date], input[type=month], input[type=search], select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; }
  .btn.icono { width: 38px; min-height: 38px; }
  .interruptor input { width: 20px; height: 20px; }
  .casilla-novedad { padding: 8px 13px; }
  .campos { gap: 14px 12px; }
  .pr-buscar input { min-height: 38px; }

  /* Las tablas avisan cuando siguen hacia el lado: sombra en el borde que oculta algo. */
  .tabla-envoltura {
    background:
      linear-gradient(to right, var(--tarjeta) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--tarjeta) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(6, 35, 21, .14), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(6, 35, 21, .14), transparent) right center / 12px 100% no-repeat scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table.tabla th, table.tabla td { padding: 9px 10px; }

  /* Las ventanas suben desde abajo, como una hoja. */
  .fondo-modal, .modal-saliente { align-items: flex-end; padding: 0; }
  .modal, .modal.ancho {
    max-width: none;
    width: 100%;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    border-radius: 24px 24px 0 0;
    animation: subir-hoja var(--t-larga) var(--curva-entrada);
  }
  .modal::before {
    content: '';
    flex: none;
    width: 38px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #d3dedb;
  }
  .modal > .cuerpo { overflow-y: auto; overscroll-behavior: contain; }
  .modal > footer { border-radius: 0; padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
  .modal-saliente .modal { animation: bajar-hoja var(--t-corta) var(--curva-salida) forwards; }

  /* Ni los mensajes ni la barra de guardar pueden quedar debajo de la navegación. */
  .mensajes { left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); max-width: none; }
  .barra-ficha { bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* Mientras el menú está abierto, el fondo no se desplaza. */
  body.menu-abierto { overflow: hidden; }

  .barra-lateral {
    transition: transform var(--t-larga) var(--curva);
    will-change: transform;
    box-shadow: var(--sombra-flotante);
  }
  body.arrastrando-menu .barra-lateral { transition: none; }
  body.menu-abierto::after { animation: aparecer-fondo var(--t-media) var(--curva-entrada); }
  .barra-inferior {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
  }
  .barra-inferior a { transition: color var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); }
  .barra-inferior a svg { transition: transform var(--t-media) var(--resorte); }
  .barra-inferior a.activo svg { transform: translateY(-2px) scale(1.12); }
}

/* ---------- Pantalla de entrada ---------- */
/* El panel de marca respira: el degradado se desplaza muy despacio y dos halos flotan
   detrás del texto. */
.entrada-lado {
  position: relative;
  overflow: hidden;
  background-size: 170% 170%;
  background-position: 0% 40%;
  animation: aurora 24s var(--curva) infinite alternate;
}
@keyframes aurora { to { background-position: 100% 60%; } }
.entrada-lado::before, .entrada-lado::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
}
.entrada-lado::before {
  width: 420px; height: 420px;
  top: -120px; right: -90px;
  background: radial-gradient(circle, rgba(0, 176, 240, .38), transparent 68%);
  animation: flotar-halo 19s ease-in-out infinite alternate;
}
.entrada-lado::after {
  width: 340px; height: 340px;
  bottom: -110px; left: -70px;
  background: radial-gradient(circle, rgba(0, 168, 88, .4), transparent 68%);
  animation: flotar-halo 23s ease-in-out infinite alternate-reverse;
}
@keyframes flotar-halo { to { transform: translate3d(-50px, 70px, 0) scale(1.18); } }
.entrada-lado > * { position: relative; z-index: 1; }
.entrada-lado > *, .entrada-formulario form > * { animation: surgir var(--t-larga) var(--curva-entrada) backwards; }
.entrada-lado > *:nth-child(2) { animation-delay: 60ms; }
.entrada-lado > *:nth-child(3) { animation-delay: 110ms; }
.entrada-lado > *:nth-child(4) { animation-delay: 160ms; }
.entrada-formulario form > *:nth-child(2) { animation-delay: 50ms; }
.entrada-formulario form > *:nth-child(3) { animation-delay: 90ms; }
.entrada-formulario form > *:nth-child(n+4) { animation-delay: 130ms; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .onda { display: none; }
  .girador { animation: pulso-suave 1.2s ease-in-out infinite !important; }
}