/* App de Real iarte — tema «noche de aurora»: índigo profundo, vidrio esmerilado, degradado azul→violeta→magenta y movimiento corto.
   Tokens semánticos; escala de espacio de 4/8; movimiento 150–300 ms con ease-out; contraste ≥ 4,5:1 en texto. */

:root {
  /* superficies (translúcidas: dejan pasar el fondo de aurora) y texto */
  --fondo: oklch(13.5% 0.035 275);
  --superficie: oklch(19% 0.045 278 / .74);
  --superficie-2: oklch(24% 0.05 280 / .82);
  --superficie-3: oklch(31% 0.055 282 / .85);
  --campo: oklch(11.5% 0.035 275 / .75);
  --linea: oklch(98% 0.01 280 / .09);
  --linea-fuerte: oklch(98% 0.01 280 / .2);
  --texto: oklch(97% 0.008 280);
  --texto-2: oklch(86% 0.02 280);
  --texto-3: oklch(73% 0.03 280);
  /* acento: azul → violeta → magenta */
  --acento: oklch(76% 0.15 288);               /* texto/íconos de acento sobre fondo oscuro */
  --acento-suave: oklch(72% 0.16 288 / .16);
  --acento-borde: oklch(72% 0.16 288 / .45);
  --grad: linear-gradient(135deg, oklch(55% .21 258), oklch(53% .23 292) 55%, oklch(57% .23 345));
  --grad-suave: linear-gradient(135deg, oklch(55% .21 258 / .22), oklch(53% .23 292 / .22) 55%, oklch(57% .23 345 / .22));
  --brillo: 0 8px 28px oklch(55% .22 290 / .38);
  --sobre-acento: oklch(99% 0 0);
  --tinta: oklch(15% 0.03 280);                /* texto oscuro sobre colores claros (avatares) */
  --ok: oklch(80% 0.15 155);  --ok-suave: oklch(80% 0.15 155 / .15);
  --aviso: oklch(84% 0.14 85); --aviso-suave: oklch(84% 0.14 85 / .15);
  --error: oklch(76% 0.17 25); --error-suave: oklch(76% 0.17 25 / .15);
  /* forma, sombra y movimiento */
  --r-s: .7rem; --r-m: 1rem; --r-l: 1.4rem;
  --sombra-1: 0 1px 0 oklch(100% 0 0 / .05) inset, 0 6px 20px oklch(0% 0 0 / .28);
  --sombra-2: 0 14px 40px oklch(0% 0 0 / .4);
  --sombra-3: 0 28px 80px oklch(0% 0 0 / .55);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-1: 150ms; --t-2: 220ms; --t-3: 320ms;
  --f-titulo: "Fraunces", Georgia, serif;
  --f-texto: "Jost", "Segoe UI", system-ui, sans-serif;
  --lat-ancho: 17rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1rem/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* aurora: luces suaves que se mueven despacio detrás de todo */
body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem 30rem at 82% 8%, oklch(52% .2 295 / .34), transparent 70%), radial-gradient(34rem 28rem at 8% 92%, oklch(52% .18 250 / .30), transparent 70%), radial-gradient(28rem 22rem at 55% 55%, oklch(55% .2 345 / .14), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
h1, h2, h3 { font-family: var(--f-texto); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 1.02rem; color: var(--texto-2); letter-spacing: .01em; }
h3 { font-size: 1.05rem; }
p { margin: 0; } a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }
a, label, summary { -webkit-tap-highlight-color: transparent; }
small { font-size: .8rem; color: var(--texto-3); }
code { font: .85em ui-monospace, Consolas, monospace; padding: .1rem .4rem; background: var(--superficie-3); border-radius: .4rem; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-s); }
::selection { background: oklch(60% .2 290); color: #fff; }
svg { width: 1.25rem; height: 1.25rem; flex: none; }
.logo { font-family: var(--f-titulo); } .logo i { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.saltar { position: absolute; left: -999px; top: .5rem; z-index: 200; padding: .6rem 1rem; background: var(--grad); color: var(--sobre-acento); border-radius: var(--r-s); }
.saltar:focus { left: .5rem; }

/* ───────────── Estructura: panel lateral + contenido ───────────── */
.app { display: flex; min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; width: var(--lat-ancho); flex: none; display: flex; flex-direction: column; background: oklch(15% .04 277 / .72); backdrop-filter: blur(22px) saturate(1.3); border-right: 1px solid var(--linea); transition: width var(--t-2) var(--ease); z-index: 60; overflow: hidden; }
.lat-cab { display: flex; align-items: center; gap: .5rem; padding: calc(env(safe-area-inset-top) + .9rem) .9rem .6rem 1.1rem; min-height: 4.2rem; }
.lat-marca { flex: 1; min-width: 0; font-size: 1.35rem; white-space: nowrap; text-decoration: none; display: flex; align-items: center; gap: .65rem; }
.lat-marca .sello { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .85rem; display: grid; place-items: center; background: var(--grad); color: var(--sobre-acento); font-size: 1.2rem; box-shadow: var(--brillo); }
.lat-boton { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: transparent; color: var(--texto-3); transition: background var(--t-1), color var(--t-1); }
.lat-boton:hover { background: var(--superficie-3); color: var(--texto); }
.lat-boton svg { transition: transform var(--t-2) var(--ease); }
.lat-nav { flex: 1; overflow-y: auto; padding: .4rem .75rem; display: grid; gap: 1.1rem; align-content: start; scrollbar-width: thin; }
.grupo-t { padding: 0 .75rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: .3rem; white-space: nowrap; }
.nav-lista { display: grid; gap: .22rem; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 2.9rem; padding: 0 .85rem; border-radius: var(--r-m); text-decoration: none; color: var(--texto-2); white-space: nowrap; transition: background var(--t-1), color var(--t-1), transform var(--t-1) var(--ease); }
.nav-item:hover { background: oklch(98% 0.01 280 / .07); color: var(--texto); }
.nav-item:active { transform: scale(.98); }
.nav-item[aria-current="page"] { background: var(--grad-suave); color: var(--texto); font-weight: 500; box-shadow: 0 0 0 1px var(--acento-borde) inset; }
.nav-item[aria-current="page"] svg { color: var(--acento); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -.75rem; top: .6rem; bottom: .6rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); }
.nav-item .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item .pt { flex: none; width: 1.65rem; height: 1.65rem; border-radius: .55rem; display: grid; place-items: center; font-family: var(--f-titulo); font-size: .9rem; color: var(--tinta); font-weight: 600; }
.insignia { flex: none; min-width: 1.4rem; height: 1.4rem; padding: 0 .45rem; border-radius: 99px; display: grid; place-items: center; font-size: .72rem; font-weight: 600; background: var(--grad); color: var(--sobre-acento); }
.insignia.alerta { background: oklch(60% .22 25); }
.insignia[hidden] { display: none; }
.lat-pie { padding: .75rem; border-top: 1px solid var(--linea); display: grid; gap: .55rem; padding-bottom: calc(env(safe-area-inset-bottom) + .75rem); }
.lat-usuario { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem; min-width: 0; }
.avatar-usuario { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--sobre-acento); font-weight: 600; }
.lat-usuario .quien { min-width: 0; line-height: 1.25; }
.lat-usuario .quien b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-acciones { display: flex; gap: .4rem; }
.lat-acciones > * { flex: 1; }
.btn-lat { min-height: 2.65rem; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .7rem; border-radius: var(--r-m); border: 1px solid var(--linea); background: oklch(98% 0.01 280 / .04); color: var(--texto-2); text-decoration: none; font-size: .9rem; transition: background var(--t-1), color var(--t-1), border-color var(--t-1); }
.btn-lat:hover { background: oklch(98% 0.01 280 / .09); color: var(--texto); }
.btn-lat.salir:hover { color: var(--error); border-color: var(--error); }

/* panel reducido (solo escritorio) */
@media (min-width: 900px) {
  .app[data-colapsado="1"] { --lat-ancho: 4.85rem; }
  .app[data-colapsado="1"] .lat-marca .txt, .app[data-colapsado="1"] .grupo-t, .app[data-colapsado="1"] .nav-item .txt,
  .app[data-colapsado="1"] .lat-usuario .quien, .app[data-colapsado="1"] .btn-lat .txt { display: none; }
  .app[data-colapsado="1"] .lat-cab { flex-direction: column; padding-inline: .6rem; padding-bottom: .4rem; gap: .3rem; }
  .app[data-colapsado="1"] .lat-marca { flex: none; }
  .app[data-colapsado="1"] .lat-boton svg { transform: rotate(180deg); }
  .app[data-colapsado="1"] .nav-item { justify-content: center; padding: 0; }
  .app[data-colapsado="1"] .nav-item .insignia { position: absolute; top: .2rem; right: .35rem; min-width: .9rem; height: .9rem; padding: 0; font-size: 0; }
  .app[data-colapsado="1"] .lat-usuario { justify-content: center; padding: .2rem 0; }
  .app[data-colapsado="1"] .lat-acciones { flex-direction: column; }
  .app[data-colapsado="1"] .nav-item:hover::after, .app[data-colapsado="1"] .nav-item:focus-visible::after, .app[data-colapsado="1"] .btn-lat:hover::after {
    content: attr(data-tip); position: fixed; left: 5.2rem; padding: .4rem .75rem; border-radius: var(--r-s); background: var(--superficie-3); backdrop-filter: blur(14px); border: 1px solid var(--linea-fuerte);
    box-shadow: var(--sombra-2); font-size: .85rem; color: var(--texto); white-space: nowrap; pointer-events: none; z-index: 100; }
  .menu-boton { display: none !important; }
  .scrim { display: none !important; }
}
/* en el teléfono el panel es un cajón que se abre con el botón de menú */
@media (max-width: 899px) {
  .lateral { position: fixed; left: 0; top: 0; width: min(86vw, 19rem); transform: translateX(-104%); transition: transform var(--t-3) var(--ease); box-shadow: var(--sombra-3); background: oklch(15% .04 277 / .94); }
  .app[data-menu="1"] .lateral { transform: none; }
  .lat-boton.reducir { display: none; }
  .scrim { position: fixed; inset: 0; z-index: 50; background: oklch(0% 0 0 / .6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--t-2) var(--ease); }
  .app[data-menu="1"] .scrim { opacity: 1; pointer-events: auto; }
}

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .55rem; min-height: 4.2rem; padding: calc(env(safe-area-inset-top) + .5rem) 1rem .5rem; background: oklch(14% .035 276 / .6); backdrop-filter: blur(20px) saturate(1.3); border-bottom: 1px solid var(--linea); }
@media (min-width: 900px) { .barra { padding-inline: 2rem; } }
.barra h1 { font-size: 1.4rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra h1 small { display: block; font-weight: 400; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; }
.icono-btn { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); text-decoration: none; transition: background var(--t-1), color var(--t-1), transform var(--t-1) var(--ease); }
.icono-btn:hover { background: oklch(98% 0.01 280 / .09); color: var(--texto); }
.icono-btn:active { transform: scale(.94); }
.vista { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 1.25rem 1rem calc(2.5rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; outline: none; }
@media (min-width: 900px) { .vista { padding: 1.9rem 2rem 3rem; } }
.vista.entra > * { animation: entra var(--t-3) var(--ease) both; }
.vista.entra > *:nth-child(2) { animation-delay: 40ms; } .vista.entra > *:nth-child(3) { animation-delay: 80ms; }
.vista.entra > *:nth-child(4) { animation-delay: 110ms; } .vista.entra > *:nth-child(n+5) { animation-delay: 140ms; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ───────────── Piezas ───────────── */
.tarjeta { position: relative; background: linear-gradient(180deg, oklch(24% .05 280 / .6), oklch(19% .045 278 / .66)); backdrop-filter: blur(14px); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1.15rem 1.25rem; display: grid; gap: .6rem; box-shadow: var(--sombra-1); min-width: 0; }
a.tarjeta, button.tarjeta { text-align: left; color: inherit; text-decoration: none; width: 100%; transition: transform var(--t-2) var(--ease), border-color var(--t-1), box-shadow var(--t-2); }
a.tarjeta:hover, button.tarjeta:hover { border-color: var(--acento-borde); transform: translateY(-3px); box-shadow: var(--sombra-2), 0 0 0 1px var(--acento-suave); }
a.tarjeta:active, button.tarjeta:active { transform: scale(.985); }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.rejilla > *, .vista > *, .tarjeta > * { min-width: 0; }
.fila { display: flex; align-items: center; gap: .8rem; }
a.fila { text-decoration: none; }
.crece { flex: 1; min-width: 0; }
.nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nombre.libre { white-space: normal; }
.sub { font-size: .86rem; color: var(--texto-3); overflow-wrap: anywhere; }
.sub b { color: var(--texto-2); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.punto { flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--texto-3); }
.punto.e-ok { background: var(--ok); box-shadow: 0 0 0 .25rem var(--ok-suave), 0 0 14px var(--ok); }
.punto.e-aviso { background: var(--aviso); box-shadow: 0 0 0 .25rem var(--aviso-suave), 0 0 14px var(--aviso); }
.punto.e-caida { background: var(--error); box-shadow: 0 0 0 .25rem var(--error-suave), 0 0 14px var(--error); }
.punto.e-sin_senal { opacity: .5; }
.etiqueta { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--linea-fuerte); color: var(--texto-2); white-space: nowrap; background: oklch(98% 0.01 280 / .04); }
.etiqueta svg { width: .9rem; height: .9rem; }
.etiqueta.acento { border-color: var(--acento-borde); color: var(--acento); background: var(--acento-suave); }
.etiqueta.e-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-suave); }
.etiqueta.e-aviso { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-suave); }
.etiqueta.e-caida { border-color: var(--error); color: var(--error); background: var(--error-suave); }
.etiqueta.demo { border-style: dashed; color: var(--texto-3); }
.avatar { flex: none; width: 3rem; height: 3rem; border-radius: var(--r-m); display: grid; place-items: center; font-family: var(--f-titulo); font-size: 1.3rem; color: var(--tinta); font-weight: 600; box-shadow: 0 6px 18px oklch(0% 0 0 / .35), 0 1px 0 oklch(100% 0 0 / .35) inset; }
.avatar.chico { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; border-radius: .75rem; }
.btn { min-height: 2.9rem; padding: .6rem 1.2rem; border-radius: var(--r-m); border: 1px solid var(--linea-fuerte); background: oklch(98% 0.01 280 / .05); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; text-decoration: none; transition: background var(--t-1), border-color var(--t-1), transform var(--t-1) var(--ease), box-shadow var(--t-2); }
.btn:hover { background: oklch(98% 0.01 280 / .1); border-color: var(--acento-borde); }
.btn:active { transform: scale(.97); }
.btn.pri { background: var(--grad); border-color: transparent; color: var(--sobre-acento); box-shadow: var(--brillo); }
.btn.pri:hover { box-shadow: 0 10px 34px oklch(55% .24 290 / .55); filter: brightness(1.08); }
.btn.peligro { border-color: var(--error); color: var(--error); } .btn.peligro:hover { background: var(--error-suave); }
.btn.ancho { width: 100%; }
.btn.chico { min-height: 2.55rem; padding: .35rem .95rem; font-size: .9rem; }
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn[aria-busy="true"]::after { content: ""; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.campo { display: grid; gap: .35rem; font-size: .86rem; color: var(--texto-2); }
.campo input, .campo textarea, .campo select, .buscar input { width: 100%; min-height: 2.95rem; padding: .6rem .9rem; border-radius: var(--r-m); border: 1px solid var(--linea-fuerte); background: var(--campo); font-size: 1rem; transition: border-color var(--t-1), box-shadow var(--t-1); }
.campo input:focus, .campo select:focus, .buscar input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.campo-clave { position: relative; }
.campo-clave input { padding-right: 3rem; }
.ver-clave { position: absolute; right: .25rem; bottom: .22rem; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--texto-3); border-radius: var(--r-s); display: grid; place-items: center; }
.ver-clave:hover { color: var(--texto); }
.buscar { position: relative; }
.buscar svg { position: absolute; left: 1rem; top: .9rem; color: var(--texto-3); pointer-events: none; }
.buscar input { padding-left: 2.9rem; border-radius: 99px; }
.formulario { display: grid; gap: .95rem; }
.aviso { padding: .8rem 1rem; border-radius: var(--r-m); border: 1px solid var(--linea-fuerte); font-size: .92rem; background: oklch(98% 0.01 280 / .05); display: flex; gap: .6rem; align-items: flex-start; }
.aviso svg { margin-top: .1rem; }
.aviso.error { border-color: var(--error); color: var(--error); background: var(--error-suave); }
.aviso.ok { border-color: var(--ok); background: var(--ok-suave); }
.aviso.acento { border-color: var(--acento-borde); background: var(--acento-suave); }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-3); display: grid; gap: .8rem; justify-items: center; }
.vacio svg { width: 2.4rem; height: 2.4rem; opacity: .6; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { position: relative; overflow: hidden; background: linear-gradient(160deg, oklch(26% .06 285 / .7), oklch(19% .045 278 / .66)); backdrop-filter: blur(14px); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1.1rem 1.2rem; display: grid; gap: .25rem; box-shadow: var(--sombra-1); }
.kpi::after { content: ""; position: absolute; right: -2rem; top: -2rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--grad); opacity: .18; filter: blur(18px); }
.kpi .ic { width: 2.6rem; height: 2.6rem; border-radius: .9rem; display: grid; place-items: center; background: var(--grad); color: var(--sobre-acento); margin-bottom: .45rem; box-shadow: var(--brillo); }
.kpi b { font-family: var(--f-titulo); font-weight: 500; font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .82rem; color: var(--texto-3); }
.barras { display: flex; align-items: flex-end; gap: .3rem; height: 7.5rem; }
.barras .par { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.barras i { flex: 1; min-height: 3px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, oklch(70% .2 300), oklch(55% .21 258)); transform-origin: bottom; animation: crece var(--t-3) var(--ease) both; }
.barras i.resp { background: linear-gradient(180deg, oklch(86% .02 280 / .7), oklch(60% .03 280 / .5)); }
.barras i.cero { background: var(--linea-fuerte); }
@keyframes crece { from { transform: scaleY(.1); opacity: .4; } }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--texto-3); }
.leyenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: 4px; margin-right: .35rem; background: var(--grad); vertical-align: -1px; }
.leyenda i.resp { background: oklch(75% .03 280 / .7); }
.medida { height: .65rem; border-radius: 99px; background: oklch(98% 0.01 280 / .08); overflow: hidden; display: flex; }
.medida i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width var(--t-3) var(--ease); }
.pila i:nth-child(1) { background: var(--ok); } .pila i:nth-child(2) { background: var(--aviso); } .pila i:nth-child(3) { background: var(--error); }
.conmut { display: flex; align-items: center; gap: .85rem; cursor: pointer; }
.conmut input { appearance: none; flex: none; width: 3.2rem; height: 1.85rem; border-radius: 99px; background: oklch(98% 0.01 280 / .1); border: 1px solid var(--linea-fuerte); position: relative; transition: background var(--t-2), border-color var(--t-2), box-shadow var(--t-2); cursor: pointer; }
.conmut input::after { content: ""; position: absolute; top: .2rem; left: .22rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--texto-2); transition: transform var(--t-2) var(--ease), background var(--t-2); }
.conmut input:checked { background: var(--grad); border-color: transparent; box-shadow: var(--brillo); }
.conmut input:checked::after { transform: translateX(1.32rem); background: #fff; }
.conmut input:disabled { opacity: .5; }
.lista-ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .3rem; }
.clave-visible { margin: 0; padding: .85rem; border-radius: var(--r-s); background: var(--campo); border: 1px solid var(--linea-fuerte); font: .85rem ui-monospace, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.previa { margin: 0; padding: .95rem; border-radius: var(--r-m); background: var(--campo); border: 1px solid var(--linea); font: .86rem/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 26rem; overflow: auto; }
.segmentos { display: inline-flex; padding: .25rem; gap: .2rem; border-radius: 99px; background: var(--campo); border: 1px solid var(--linea); }
.segmentos a, .segmentos button { min-height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 99px; background: transparent; color: var(--texto-2); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; transition: background var(--t-1), color var(--t-1); }
.segmentos [aria-current="true"] { background: var(--grad); color: var(--sobre-acento); font-weight: 500; box-shadow: var(--brillo); }

/* Vista cliente: la app del cliente dentro de una ventana de computador */
.preparar { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.preparar .campo { min-width: min(100%, 16rem); }
.ventana { border-radius: var(--r-l); border: 1px solid var(--linea-fuerte); background: oklch(14% .035 276 / .85); backdrop-filter: blur(16px); box-shadow: var(--sombra-3); overflow: hidden; display: flex; flex-direction: column; }
.ven-barra { display: flex; align-items: center; gap: .45rem; padding: .65rem .95rem; background: oklch(22% .05 280 / .8); border-bottom: 1px solid var(--linea); }
.ven-pt { width: .72rem; height: .72rem; border-radius: 50%; background: oklch(70% .15 25); }
.ven-pt:nth-child(2) { background: oklch(82% .14 85); } .ven-pt:nth-child(3) { background: oklch(76% .16 150); }
.ven-url { margin-left: .6rem; flex: 1; min-width: 0; padding: .28rem .85rem; border-radius: 99px; background: var(--campo); border: 1px solid var(--linea); font-size: .8rem; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ven-cuerpo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 34rem; }
.mini-lat { display: grid; gap: .25rem; align-content: start; padding: 1rem .7rem; background: oklch(16% .04 277 / .7); border-right: 1px solid var(--linea); }
.mini-item { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: 0 .7rem; border-radius: var(--r-m); text-decoration: none; color: var(--texto-2); transition: background var(--t-1), color var(--t-1); }
.mini-item:hover { background: oklch(98% 0.01 280 / .07); color: var(--texto); }
.mini-item[aria-current="page"] { background: var(--grad-suave); color: var(--texto); font-weight: 500; box-shadow: 0 0 0 1px var(--acento-borde) inset; }
.mini-item .pt { flex: none; width: 1.65rem; height: 1.65rem; border-radius: .55rem; display: grid; place-items: center; font-family: var(--f-titulo); font-size: .9rem; color: var(--tinta); font-weight: 600; }
.mini-item .pt svg { width: 1rem; height: 1rem; }
.mini-main { min-width: 0; display: flex; flex-direction: column; }
.mini-cab { display: flex; align-items: center; gap: .5rem; min-height: 4.2rem; padding: .6rem 1.4rem; border-bottom: 1px solid var(--linea); }
.mini-cab h1 { font-size: 1.3rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cab h1 small { display: block; font-weight: 400; color: var(--texto-3); }
.mini-vista { padding: 1.4rem; display: grid; gap: 1.1rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.mini-vista.entra > * { animation: entra var(--t-3) var(--ease) both; }
@media (max-width: 899px) {
  .ven-cuerpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mini-lat { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linea); padding: .6rem; scrollbar-width: none; }
  .mini-lat .grupo-t { display: none; }
  .mini-item { flex: none; padding: 0 .9rem 0 .5rem; border: 1px solid var(--linea-fuerte); border-radius: 99px; min-height: 2.5rem; }
  .mini-cab { padding-inline: 1rem; } .mini-vista { padding: 1rem; }
}

/* ───────────── Entrada y registro ───────────── */
.portada { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.portada-tarjeta { width: 100%; max-width: 26rem; display: grid; gap: 1.1rem; background: linear-gradient(180deg, oklch(25% .055 282 / .72), oklch(18% .045 278 / .78)); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--linea-fuerte); border-radius: 1.8rem; padding: 2.2rem 1.7rem; box-shadow: var(--sombra-3), 0 0 0 1px var(--acento-suave); animation: entra var(--t-3) var(--ease) both; }
.portada-tarjeta .logo { font-size: 2.5rem; line-height: 1; }
.portada-tarjeta .lema { color: var(--texto-3); font-size: .93rem; }
.portada-tarjeta a { color: var(--acento); }

/* ───────────── Avisos, cajón de confirmación, esqueletos ───────────── */
.avisos { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 1rem); transform: translateX(-50%); z-index: 300; display: grid; gap: .5rem; width: min(92vw, 26rem); pointer-events: none; }
.aviso-flota { pointer-events: auto; padding: .85rem 1.05rem; border-radius: var(--r-m); background: oklch(26% .05 282 / .92); backdrop-filter: blur(16px); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-2); display: flex; gap: .6rem; align-items: center; animation: entra var(--t-2) var(--ease) both; }
.aviso-flota.ok { border-color: var(--ok); } .aviso-flota.error { border-color: var(--error); }
dialog { border: 1px solid var(--linea-fuerte); border-radius: var(--r-l); background: oklch(21% .05 280); color: var(--texto); padding: 1.5rem; width: min(92vw, 24rem); box-shadow: var(--sombra-3); }
dialog::backdrop { background: oklch(0% 0 0 / .62); backdrop-filter: blur(4px); }
dialog h3 { margin-bottom: .5rem; } dialog .fila { margin-top: 1.1rem; justify-content: flex-end; }
.esq { border-radius: var(--r-m); background: linear-gradient(90deg, oklch(98% 0.01 280 / .04) 25%, oklch(98% 0.01 280 / .1) 50%, oklch(98% 0.01 280 / .04) 75%); background-size: 200% 100%; animation: brilla 1.3s linear infinite; }
@keyframes brilla { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}