/* Panel de administración — La Casona Chaitén
   Estilo claro de vidrio esmerilado, con el movimiento suave de macOS / iOS.
   Colores y tipografías tomados del sitio público.
   Responsivo: el dueño lo usa desde el celular.

   La CSP del panel no permite estilos en línea (style="…"): todo vive aquí.
   panel.js solo agrega animaciones; sin él, el panel se ve y funciona igual. */

@font-face { font-family: 'Cormorant Garamond'; src: url('/estatico/fuentes/CormorantGaramond.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/estatico/fuentes/CormorantGaramond-italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/estatico/fuentes/Jost.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap; }

/* ================================================================ tokens */
:root {
  /* marca */
  --verde: #2F5D50;
  --verde-claro: #3E7A68;
  --cafe: #8B5E3C;
  --naranjo: #C97A3D;
  --arena: #F4F0E8;
  --crema: #FDFAF3;
  --tinta: #201A11;
  --texto: #2E2E2E;
  --texto-2: rgba(46, 46, 46, 0.58);
  --rojo: #A4442A;
  --exito: #2F7D50;

  /* vidrio */
  --vidrio: rgba(255, 255, 255, 0.62);
  --vidrio-fuerte: rgba(255, 255, 255, 0.78);
  --vidrio-borde: rgba(255, 255, 255, 0.75);
  --linea: rgba(139, 94, 60, 0.12);
  --borde: rgba(139, 94, 60, 0.18);
  --desenfoque: blur(24px) saturate(160%);
  --sombra: 0 1px 2px rgba(32, 26, 17, 0.04), 0 12px 32px -8px rgba(32, 26, 17, 0.10);
  --sombra-alta: 0 2px 4px rgba(32, 26, 17, 0.05), 0 22px 48px -12px rgba(32, 26, 17, 0.18);
  --radio: 22px;
  --radio-control: 12px;

  /* movimiento */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --t-hover: 180ms;
  --t-estado: 350ms;
  --t-entrada: 700ms;

  --ancho-lateral: 240px;
  color-scheme: light;
}

/* ================================================================== base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--texto); background: var(--crema);
  font-family: 'Jost', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Fondo: crema con luz cálida arriba y un reflejo verde bosque abajo. Capa fija
   aparte (no background-attachment) para que el scroll en el celular sea fluido. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(232, 201, 168, 0.42), transparent 62%),
    radial-gradient(900px 640px at -8% 108%, rgba(47, 93, 80, 0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, var(--crema) 0%, var(--arena) 100%);
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; margin: 0;
  color: var(--tinta); letter-spacing: -0.005em; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
a { color: var(--cafe); text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--t-hover) var(--ease-apple); }
a:hover { color: var(--naranjo); }
strong { font-weight: 600; }

/* Iconos de línea del menú (SVG dentro del HTML). */
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ====================================================== marca del negocio */
.marca-casa h1 { font-size: 24px; line-height: 1.05; }
.marca-casa .sub, .cabecera .sub {
  display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cafe); font-weight: 500; }

/* ====================================================== barra lateral */
.lateral {
  position: fixed; z-index: 20; top: 16px; bottom: 16px; left: 16px; width: var(--ancho-lateral);
  display: flex; flex-direction: column; gap: 28px; padding: 26px 16px 16px;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde); border-radius: 26px; box-shadow: var(--sombra);
  view-transition-name: lateral;
}
.lateral .marca-casa { padding: 0 12px; }

.pestanas { display: flex; flex-direction: column; gap: 4px; }
.pestanas a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 0 14px; border-radius: 14px; color: var(--texto); text-decoration: none;
  font-size: 14.5px; font-weight: 400; letter-spacing: 0.01em;
  transition: background-color var(--t-hover) var(--ease-apple), color var(--t-hover) var(--ease-apple),
              transform var(--t-estado) var(--ease-spring);
}
.pestanas a .icono { color: var(--cafe); transition: color var(--t-hover) var(--ease-apple); }
.pestanas a:hover { background: rgba(32, 26, 17, 0.05); color: var(--tinta); }
.pestanas a:active { transform: scale(0.97); transition-duration: 120ms; }

/* Ítem activo: la pastilla oscura. Lleva su propio nombre de transición para
   deslizarse de una sección a otra al navegar. */
.pestanas a.activa { padding: 0; }
.pestanas a.activa:hover { background: none; }
.indicador {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px;
  border-radius: 14px; background: var(--tinta); color: var(--crema); font-weight: 500;
  box-shadow: 0 8px 18px -8px rgba(32, 26, 17, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  view-transition-name: indicador;
}
.indicador .icono { color: #E8C9A8; }

.cuenta {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 4px;
  border-top: 1px solid var(--linea);
}
.cuenta .usuario { font-size: 12px; color: var(--texto-2); letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir { margin: 0; }
.salir button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px;
  margin-left: -12px; border: 0; border-radius: 14px; background: none; color: var(--texto);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-apple), transform var(--t-estado) var(--ease-spring);
}
.salir button .icono { color: var(--cafe); }
.salir button:hover { background: rgba(32, 26, 17, 0.05); }
.salir button:active { transform: scale(0.97); transition-duration: 120ms; }

/* ======================================================= cabecera simple */
/* Pantallas sin menú: resultado de pago para el huésped y página de pruebas. */
.cabecera {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 14px 24px;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--vidrio-borde); box-shadow: 0 1px 0 var(--linea);
}
.cabecera h1 { font-size: 22px; line-height: 1.1; }

/* ============================================================== contenido */
main { display: block; max-width: 1280px; margin: 0 auto; padding: 28px 24px 56px; }
body.con-lateral main {
  margin-left: calc(var(--ancho-lateral) + 32px); margin-right: auto;
  padding: 40px 40px 64px; max-width: 1360px;
}
.contenido { view-transition-name: contenido; }

/* ============================================================== secciones */
.seccion { margin-bottom: 40px; }
.seccion > h2 { font-size: 34px; line-height: 1.1; margin-bottom: 18px; }
.seccion > p { margin-bottom: 14px; }

/* "Hoy y los próximos 7 días": panel grande y destacado, con una línea de luz. */
.seccion.destacada {
  position: relative; overflow: hidden; padding: 32px; border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48) 60%, rgba(232, 201, 168, 0.22));
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-alta);
}
.seccion.destacada::before {
  content: ''; position: absolute; top: -40%; right: 14%; width: 2px; height: 180%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 45%, transparent);
  transform: rotate(28deg); filter: blur(0.5px); pointer-events: none;
}
.seccion.destacada > h2 { font-size: 42px; margin-bottom: 20px; }
.seccion.destacada .tarjeta { background: rgba(255, 255, 255, 0.58); }

/* =============================================================== tarjetas */
.tarjeta {
  position: relative; isolation: isolate; padding: 22px;
  background: var(--vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde); border-radius: var(--radio);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(139, 94, 60, 0.04);
  transition: transform var(--t-estado) var(--ease-apple), box-shadow var(--t-estado) var(--ease-apple);
}
.tarjeta h3 { font-size: 21px; line-height: 1.15; margin-bottom: 10px; }
.tarjeta h3.separado { margin-top: 18px; }
.tarjeta h4 { font-size: 18px; margin-bottom: 8px; color: var(--verde); }
h3.verde { color: var(--verde); }
.tarjeta.separada { margin-top: 18px; }
.tarjeta.apilada { margin-bottom: 18px; }
.tarjeta.angosta { max-width: 620px; }
.tarjeta.centrada { margin: 6vh auto; }
.tarjeta .intro { margin-bottom: 16px; }

/* Brillo especular que sigue al cursor (panel.js mueve --mx / --my). */
.rejilla > .tarjeta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.9), transparent 45%);
  opacity: 0; transition: opacity var(--t-estado) var(--ease-apple);
}
@media (hover: hover) {
  .rejilla > .tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
  .rejilla > .tarjeta:hover::before { opacity: 1; }
}

.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =================================================================== KPI */
.kpi { display: flex; flex-direction: column; min-height: 148px; }
.kpi .etiqueta { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cafe); font-weight: 500; }
.kpi .valor {
  margin: 18px 0 4px; font-size: 38px; line-height: 1.05; font-weight: 300;
  letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.kpi .nota { font-size: 12.5px; color: var(--texto-2); }
.kpi .valor.verde { color: var(--verde); }
.kpi .valor.naranjo { color: var(--naranjo); }

.variacion { margin-top: 14px; }
.sube { color: var(--exito); }
.baja { color: var(--rojo); }
.monto-grande { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; color: var(--tinta);
  font-variant-numeric: tabular-nums; }

/* ======================================================= filtros y chips */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }

/* Cabañas: "segmented control" de iOS. La opción activa se desliza entre
   páginas con su propio nombre de transición. */
.segmentado {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 14px;
  background: rgba(118, 98, 72, 0.10); box-shadow: inset 0 0 0 1px rgba(139, 94, 60, 0.06);
}
.filtros a.chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 11px;
  color: var(--texto); text-decoration: none; font-size: 13.5px; white-space: nowrap;
  transition: color var(--t-hover) var(--ease-apple), background-color var(--t-hover) var(--ease-apple),
              transform var(--t-estado) var(--ease-spring);
}
.filtros a.chip:hover { color: var(--tinta); background: rgba(255, 255, 255, 0.45); }
.filtros a.chip:active { transform: scale(0.97); transition-duration: 120ms; }
.filtros a.chip.activa {
  background: #fff; color: var(--tinta); font-weight: 500;
  box-shadow: 0 1px 2px rgba(32, 26, 17, 0.08), 0 3px 10px -2px rgba(32, 26, 17, 0.10);
  view-transition-name: chip-activo;
}

/* ===================================================== campos de formulario */
.filtros select, .filtros input, .campo input, .campo select {
  font: inherit; font-size: 14.5px; color: var(--texto); min-height: 44px; padding: 10px 14px;
  background: rgba(255, 255, 255, 0.70); border: 1px solid var(--borde); border-radius: var(--radio-control);
  box-shadow: inset 0 1px 2px rgba(32, 26, 17, 0.03);
  transition: border-color var(--t-hover) var(--ease-apple), background-color var(--t-hover) var(--ease-apple),
              box-shadow var(--t-hover) var(--ease-apple);
}
.filtros select:hover, .filtros input:hover, .campo input:hover, .campo select:hover:hover {
  border-color: rgba(139, 94, 60, 0.32); background: rgba(255, 255, 255, 0.88); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B5E3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cafe); font-weight: 500; margin-bottom: 6px; }
.campo input, .campo select { width: 100%; }
.campo .mini { display: block; margin-top: 6px; }

/* ================================================================ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
  background: var(--tinta); color: var(--crema);
  box-shadow: 0 8px 20px -10px rgba(32, 26, 17, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--t-estado) var(--ease-spring), box-shadow var(--t-estado) var(--ease-apple),
              background-color var(--t-hover) var(--ease-apple), color var(--t-hover) var(--ease-apple);
}
/* Reflejo que cruza el botón oscuro al pasar el mouse. */
.boton::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-out-expo);
}
.boton:hover { color: var(--crema); box-shadow: 0 12px 26px -10px rgba(32, 26, 17, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.boton:hover::after { transform: translateX(120%); }
.boton:active { transform: scale(0.97); transition: transform 120ms var(--ease-apple); }
.boton.ancho { width: 100%; }

.boton.secundario {
  background: rgba(255, 255, 255, 0.70); color: var(--texto);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  box-shadow: inset 0 0 0 1px var(--borde), 0 1px 2px rgba(32, 26, 17, 0.04);
}
.boton.secundario::after { display: none; }
.boton.secundario:hover { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(139, 94, 60, 0.28), 0 6px 16px -8px rgba(32, 26, 17, 0.18); }
.boton.peligro { background: var(--rojo); color: #fff; box-shadow: 0 8px 20px -10px rgba(164, 68, 42, 0.7); }
.boton.peligro:hover { color: #fff; }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }

/* Foco visible con teclado: anillo verde bosque separado 2 px. */
.boton:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px; }
.campo input:focus, .campo select:focus:focus, .filtros select:focus, .filtros input:focus {
  border-color: rgba(47, 93, 80, 0.45); background: #fff; }

/* ================================================================= tablas */
.tabla-env {
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px;
  background: var(--vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
/* Dentro de una tarjeta, la tabla no lleva su propio vidrio. */
.tarjeta .tabla-env { padding: 0; margin: 0 -6px; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cafe); padding: 12px 12px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid rgba(139, 94, 60, 0.08); vertical-align: top;
  transition: background-color var(--t-hover) var(--ease-apple); }
tr:last-child td, tr:last-child th { border-bottom: none; }
tbody th { font-size: 10.5px; vertical-align: top; }
@media (hover: hover) {
  tbody tr:hover td { background: rgba(255, 255, 255, 0.55); }
  tbody tr:hover td:first-child { border-radius: 12px 0 0 12px; }
  tbody tr:hover td:last-child { border-radius: 0 12px 12px 0; }
}
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.col-barra { width: 55%; vertical-align: middle; }
.celda-cambio { max-width: 320px; word-break: break-word; }

/* ======================================================== marcas de estado */
.marca { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap; }
.e-Confirmada { background: rgba(79, 124, 130, 0.14); color: #3c6166; }
.e-Pagada { background: rgba(47, 93, 80, 0.12); color: var(--verde); }
.e-Completada { background: rgba(139, 94, 60, 0.12); color: var(--cafe); }
.e-Cancelada { background: rgba(164, 68, 42, 0.10); color: var(--rojo); }
.e-Pendiente { background: rgba(201, 122, 61, 0.16); color: #8a4d1c; }

/* ================================================================= avisos */
.aviso {
  position: relative; margin-bottom: 12px; padding: 14px 18px 14px 40px; border-radius: 16px;
  font-size: 14px; color: var(--texto);
  background: var(--vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde); box-shadow: 0 1px 2px rgba(32, 26, 17, 0.04), 0 8px 22px -12px rgba(32, 26, 17, 0.12);
}
.aviso::before {
  content: ''; position: absolute; left: 18px; top: 21px; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.aviso.compacto { margin-bottom: 8px; padding-top: 11px; padding-bottom: 11px; }
.aviso.compacto::before { top: 18px; }
.aviso.critica { background: rgba(253, 236, 234, 0.72); }
.aviso.critica::before { background: var(--rojo); box-shadow: 0 0 0 4px rgba(164, 68, 42, 0.14); }
.aviso.advertencia { background: rgba(253, 244, 231, 0.72); }
.aviso.advertencia::before { background: var(--naranjo); box-shadow: 0 0 0 4px rgba(201, 122, 61, 0.16); }
.aviso.info::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(47, 93, 80, 0.12); }
.aviso.exito { background: rgba(232, 243, 236, 0.72); }
.aviso.exito::before { background: var(--exito); box-shadow: 0 0 0 4px rgba(47, 125, 80, 0.14); }
.aviso.separado { margin-top: 16px; }

/* ================================================================= barras */
.barra { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(139, 94, 60, 0.12); }
.barra > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--verde), var(--verde-claro));
  transform-origin: left center; transform: scaleX(var(--valor, 0));
}
.barra.separada { margin: 12px 0; }

/* ================================================================== login */
.pantalla-entrar main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.entrar { width: 100%; max-width: 400px; padding: 34px 30px 30px; border-radius: 28px; box-shadow: var(--sombra-alta); }
.entrar .marca-casa { text-align: center; margin-bottom: 26px; }
.entrar .marca-casa h1 { font-size: 30px; }
.entrar h2 { font-size: 26px; margin-bottom: 18px; color: var(--verde); }
.entrar .boton { margin-top: 6px; }

/* ======================================================= piezas sueltas */
.separado { margin-top: 16px; }
.subtitulo { font-size: 24px; color: var(--verde); margin: 30px 0 12px; }
.titulo-resultado { font-size: 30px; color: var(--verde); margin-bottom: 10px; }
.separador { margin: 22px 0; border: none; border-top: 1px solid var(--linea); }
.lista-pasos { padding-left: 18px; line-height: 1.7; }
.texto-rojo { color: var(--rojo); }
.vacio { padding: 26px; text-align: center; color: var(--texto-2); font-size: 14px; }
.mini { font-size: 12.5px; color: var(--texto-2); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.url-ical { font-size: 11px; word-break: break-all; }

/* Token de Transbank: largo, hay que poder copiarlo entero sin que rompa la tabla. */
code.token {
  font-size: 12px; word-break: break-all; display: inline-block; max-width: 100%; user-select: all;
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--borde); border-radius: 6px; padding: 2px 6px;
}

/* ============================================================= responsivo */
/* Tablet: la barra lateral muestra solo los iconos. */
@media (max-width: 1023px) {
  :root { --ancho-lateral: 76px; }
  .lateral { padding: 20px 10px 12px; gap: 22px; align-items: center; }
  .lateral .marca-casa { padding: 0; }
  .lateral .marca-casa::before {
    content: 'LC' / ''; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--crema);
    background: var(--verde); box-shadow: 0 6px 14px -6px rgba(47, 93, 80, 0.6);
  }
  .lateral .marca-casa h1, .lateral .marca-casa .sub, .lateral .texto, .cuenta .usuario {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pestanas { align-items: center; }
  .pestanas a, .indicador { width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .pestanas a.activa { width: 48px; }
  .cuenta { padding: 12px 0 0; align-items: center; }
  .salir button { margin: 0; padding: 0; width: 48px; justify-content: center; }
  body.con-lateral main { padding: 32px 28px 56px; }
  .rejilla.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular: cabecera de vidrio fija y las secciones como pastillas desplazables. */
@media (max-width: 639px) {
  .lateral {
    position: sticky; top: 0; left: auto; bottom: auto; width: auto; z-index: 20;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
    padding: 12px 14px 10px; border-radius: 0; border-width: 0 0 1px; box-shadow: 0 1px 0 var(--linea);
  }
  .lateral .marca-casa::before { content: none; }
  .lateral .marca-casa h1, .lateral .marca-casa .sub {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .lateral .marca-casa h1 { font-size: 20px; }
  .lateral .marca-casa .sub { margin-top: 3px; font-size: 8.5px; }

  .cuenta { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 6px; }
  .cuenta .usuario { position: static; width: auto; height: auto; clip: auto; max-width: 84px; font-size: 11.5px; }
  .salir button { width: auto; min-height: 40px; padding: 0 12px; gap: 6px; font-size: 13px;
    background: rgba(32, 26, 17, 0.05); border-radius: 999px; }
  .salir button .icono { width: 17px; height: 17px; }
  .salir .texto { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }

  .pestanas {
    grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 6px; margin: 0 -14px -8px; padding: 2px 14px 12px;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 14px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas a, .indicador, .pestanas a.activa { width: auto; min-height: 44px; }
  .pestanas a { flex: none; scroll-snap-align: start; padding: 0 14px; gap: 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--linea); font-size: 13.5px; }
  .pestanas a.activa { padding: 0; background: none; box-shadow: none; }
  .indicador { padding: 0 16px; gap: 8px; border-radius: 999px; }
  .pestanas .icono { width: 18px; height: 18px; }
  .pestanas .texto { position: static !important; width: auto !important; height: auto !important;
    overflow: visible !important; clip: auto !important; }

  body.con-lateral main, main { margin: 0; padding: 22px 14px 48px; }
  .seccion { margin-bottom: 32px; }
  .seccion > h2 { font-size: 28px; margin-bottom: 14px; }
  .seccion.destacada { padding: 20px 16px; border-radius: 24px; margin-left: -4px; margin-right: -4px; }
  .seccion.destacada > h2 { font-size: 32px; }
  .rejilla { gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .rejilla.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta { padding: 18px 16px; border-radius: 20px; }
  .kpi { min-height: 124px; }
  .kpi .valor { font-size: 27px; }
  .kpi .etiqueta { font-size: 9.5px; letter-spacing: 0.13em; }
  .tabla-env { border-radius: 18px; padding: 2px 4px; }
  table { font-size: 13px; }
  th, td { padding: 9px 8px; }
  .filtros { gap: 8px; }
  .filtros select, .filtros input { flex: 1 1 140px; }
  .segmentado { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .segmentado::-webkit-scrollbar { display: none; }
  .filtros a.chip { flex: 1 0 auto; justify-content: center; min-height: 40px; }
  .cabecera { padding: 12px 16px; }
  .entrar { padding: 28px 20px 24px; }
}

/* ===================================================== movimiento: entrada */
/* Cascada al cargar. panel.js asigna --i (0–10) para escalonar; sin JS todo
   entra a la vez. `backwards` y no `both`: al terminar, el hover vuelve a
   controlar el transform. */
@keyframes entrar-tarjeta {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}
@keyframes entrar-titulo {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(-8px); }
}
@keyframes crecer-barra {
  from { transform: scaleX(0); }
}
@keyframes aparecer {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta, .tabla-env, .seccion.destacada {
    animation: entrar-tarjeta var(--t-entrada) var(--ease-out-expo) backwards;
    animation-delay: calc(var(--i, 0) * 50ms + 60ms);
  }
  .seccion > h2 { animation: entrar-titulo 600ms var(--ease-out-expo) backwards; }
  .aviso { animation: entrar-aviso 500ms var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
  .seccion.destacada .tarjeta, .seccion.destacada .tabla-env { animation-delay: calc(var(--i, 0) * 50ms + 140ms); }
  .tarjeta .tabla-env { animation: none; }
  .barra > i { animation: crecer-barra 900ms var(--ease-out-expo) backwards; animation-delay: 280ms; }
  .lateral { animation: aparecer 400ms var(--ease-apple) backwards; }

  /* ================================================ transición entre páginas */
  /* Cada sección es una página distinta: View Transitions entre documentos.
     La barra lateral queda quieta, la pastilla activa se desliza y el contenido
     entra con un fundido. Sin soporte, la página cambia sin animación. */
  @view-transition { navigation: auto; }

  ::view-transition-group(indicador),
  ::view-transition-group(chip-activo) {
    animation-duration: 420ms; animation-timing-function: var(--ease-out-expo);
  }
  ::view-transition-old(indicador), ::view-transition-new(indicador),
  ::view-transition-old(chip-activo), ::view-transition-new(chip-activo) {
    animation-duration: 260ms; animation-timing-function: var(--ease-apple);
    height: 100%;
  }
  ::view-transition-group(lateral) { animation: none; }
  ::view-transition-old(lateral), ::view-transition-new(lateral) { animation-duration: 260ms; }

  ::view-transition-group(contenido) { animation: none; }
  ::view-transition-old(contenido) { animation: vt-salir 180ms var(--ease-apple) both; }
  ::view-transition-new(contenido) { animation: vt-entrar 520ms var(--ease-out-expo) both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
}

@keyframes vt-salir { to { opacity: 0; } }
@keyframes vt-entrar {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
}

/* Movimiento reducido: sin cascada, conteos, brillo ni deslizamientos. Solo
   fundidos cortos, y barras y números aparecen ya con su valor final. */
@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tabla-env, .aviso, .seccion > h2 { animation: aparecer 150ms linear backwards; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .rejilla > .tarjeta::before, .boton::after { display: none; }
}

/* ===================================================== ancho de las barras */
/* Una regla por porcentaje: así la barra se dibuja sin estilos en línea y sin
   depender de JavaScript. Generado; no editar a mano. */
.barra[data-valor="0"]{--valor:0}.barra[data-valor="1"]{--valor:0.01}.barra[data-valor="2"]{--valor:0.02}.barra[data-valor="3"]{--valor:0.03}.barra[data-valor="4"]{--valor:0.04}
.barra[data-valor="5"]{--valor:0.05}.barra[data-valor="6"]{--valor:0.06}.barra[data-valor="7"]{--valor:0.07}.barra[data-valor="8"]{--valor:0.08}.barra[data-valor="9"]{--valor:0.09}
.barra[data-valor="10"]{--valor:0.1}.barra[data-valor="11"]{--valor:0.11}.barra[data-valor="12"]{--valor:0.12}.barra[data-valor="13"]{--valor:0.13}.barra[data-valor="14"]{--valor:0.14}
.barra[data-valor="15"]{--valor:0.15}.barra[data-valor="16"]{--valor:0.16}.barra[data-valor="17"]{--valor:0.17}.barra[data-valor="18"]{--valor:0.18}.barra[data-valor="19"]{--valor:0.19}
.barra[data-valor="20"]{--valor:0.2}.barra[data-valor="21"]{--valor:0.21}.barra[data-valor="22"]{--valor:0.22}.barra[data-valor="23"]{--valor:0.23}.barra[data-valor="24"]{--valor:0.24}
.barra[data-valor="25"]{--valor:0.25}.barra[data-valor="26"]{--valor:0.26}.barra[data-valor="27"]{--valor:0.27}.barra[data-valor="28"]{--valor:0.28}.barra[data-valor="29"]{--valor:0.29}
.barra[data-valor="30"]{--valor:0.3}.barra[data-valor="31"]{--valor:0.31}.barra[data-valor="32"]{--valor:0.32}.barra[data-valor="33"]{--valor:0.33}.barra[data-valor="34"]{--valor:0.34}
.barra[data-valor="35"]{--valor:0.35}.barra[data-valor="36"]{--valor:0.36}.barra[data-valor="37"]{--valor:0.37}.barra[data-valor="38"]{--valor:0.38}.barra[data-valor="39"]{--valor:0.39}
.barra[data-valor="40"]{--valor:0.4}.barra[data-valor="41"]{--valor:0.41}.barra[data-valor="42"]{--valor:0.42}.barra[data-valor="43"]{--valor:0.43}.barra[data-valor="44"]{--valor:0.44}
.barra[data-valor="45"]{--valor:0.45}.barra[data-valor="46"]{--valor:0.46}.barra[data-valor="47"]{--valor:0.47}.barra[data-valor="48"]{--valor:0.48}.barra[data-valor="49"]{--valor:0.49}
.barra[data-valor="50"]{--valor:0.5}.barra[data-valor="51"]{--valor:0.51}.barra[data-valor="52"]{--valor:0.52}.barra[data-valor="53"]{--valor:0.53}.barra[data-valor="54"]{--valor:0.54}
.barra[data-valor="55"]{--valor:0.55}.barra[data-valor="56"]{--valor:0.56}.barra[data-valor="57"]{--valor:0.57}.barra[data-valor="58"]{--valor:0.58}.barra[data-valor="59"]{--valor:0.59}
.barra[data-valor="60"]{--valor:0.6}.barra[data-valor="61"]{--valor:0.61}.barra[data-valor="62"]{--valor:0.62}.barra[data-valor="63"]{--valor:0.63}.barra[data-valor="64"]{--valor:0.64}
.barra[data-valor="65"]{--valor:0.65}.barra[data-valor="66"]{--valor:0.66}.barra[data-valor="67"]{--valor:0.67}.barra[data-valor="68"]{--valor:0.68}.barra[data-valor="69"]{--valor:0.69}
.barra[data-valor="70"]{--valor:0.7}.barra[data-valor="71"]{--valor:0.71}.barra[data-valor="72"]{--valor:0.72}.barra[data-valor="73"]{--valor:0.73}.barra[data-valor="74"]{--valor:0.74}
.barra[data-valor="75"]{--valor:0.75}.barra[data-valor="76"]{--valor:0.76}.barra[data-valor="77"]{--valor:0.77}.barra[data-valor="78"]{--valor:0.78}.barra[data-valor="79"]{--valor:0.79}
.barra[data-valor="80"]{--valor:0.8}.barra[data-valor="81"]{--valor:0.81}.barra[data-valor="82"]{--valor:0.82}.barra[data-valor="83"]{--valor:0.83}.barra[data-valor="84"]{--valor:0.84}
.barra[data-valor="85"]{--valor:0.85}.barra[data-valor="86"]{--valor:0.86}.barra[data-valor="87"]{--valor:0.87}.barra[data-valor="88"]{--valor:0.88}.barra[data-valor="89"]{--valor:0.89}
.barra[data-valor="90"]{--valor:0.9}.barra[data-valor="91"]{--valor:0.91}.barra[data-valor="92"]{--valor:0.92}.barra[data-valor="93"]{--valor:0.93}.barra[data-valor="94"]{--valor:0.94}
.barra[data-valor="95"]{--valor:0.95}.barra[data-valor="96"]{--valor:0.96}.barra[data-valor="97"]{--valor:0.97}.barra[data-valor="98"]{--valor:0.98}.barra[data-valor="99"]{--valor:0.99}
.barra[data-valor="100"]{--valor:1}