/* Monarca · sistema de diseño "Centro de mando" (rediseño del tramo 2)
   Colores del logo (Documento Madre V4, sección 9); todo lo demás son transparencias de ellos.
   Principios: mucho espacio, pocas líneas, una acción principal por pantalla, sistema vivo pero
   discreto, primero celular y escritorio de verdad. Sin fuentes externas: funciona sin internet.
   Nada en línea: la política de seguridad no permite estilos ni código dentro de la página. */

:root {
  --fondo: #0A1A3F;
  --superficie: #13285A;
  --superficie-2: #1A3470;
  --acento: #2563A0;
  --acento-fuerte: #1D4F82;
  --destacado: #4FB3E6;
  --texto: #F5F8FC;
  --texto-suave: #B9C6DC;
  --borde: rgba(79, 179, 230, .14);
  --borde-fuerte: rgba(79, 179, 230, .32);
  --capa: rgba(19, 40, 90, .62);
  --capa-fuerte: rgba(19, 40, 90, .9);
  --resalte: rgba(79, 179, 230, .12);
  --rejilla: rgba(79, 179, 230, .07);
  --sombra: 0 10px 30px rgba(0, 0, 0, .28);
  --sombra-boton: 0 8px 22px rgba(37, 99, 160, .38);
  --foco: #4FB3E6;
  --verde: #34D399;   --verde-fondo: rgba(52, 211, 153, .14);
  --ambar: #FBBF24;   --ambar-fondo: rgba(251, 191, 36, .14);
  --naranja: #FB923C; --naranja-fondo: rgba(251, 146, 60, .15);
  --rojo: #FF9B9B;    --rojo-fondo: rgba(248, 113, 113, .15);
  --peligro: #B42318;
  --radio: 18px;
  --radio-chico: 12px;
  --letra: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --rapido: .16s cubic-bezier(.2, .7, .2, 1);
  /* biblioteca de movimiento (V5, ver docs/SISTEMA_DE_DISENO.md) */
  --curva-entra: cubic-bezier(.16, 1, .3, 1);     /* lo que aparece: rápido al inicio, se posa suave */
  --curva-sale: cubic-bezier(.7, 0, .84, 0);      /* lo que se va: arranca suave y se acelera */
  --curva-estandar: cubic-bezier(.2, .7, .2, 1);  /* cambios dentro de la pantalla */
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);/* rebote suave (confirmaciones) */
  --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.004 83.8%, 1);
  --dur-micro: 150ms; --dur-corta: 220ms; --dur-media: 280ms; --dur-larga: 350ms;
  color-scheme: dark;
}

[data-tema="claro"] {
  --fondo: #F5F8FC;
  --superficie: #FFFFFF;
  --superficie-2: #EAF1FA;
  --acento: #2563A0;
  --acento-fuerte: #1D4F82;
  --destacado: #1B6EA6;
  --texto: #0A1A3F;
  --texto-suave: #3D4F75;
  --borde: rgba(10, 26, 63, .10);
  --borde-fuerte: rgba(27, 110, 166, .35);
  --capa: rgba(255, 255, 255, .85);
  --capa-fuerte: rgba(255, 255, 255, .96);
  --resalte: rgba(27, 110, 166, .08);
  --rejilla: rgba(27, 110, 166, .07);
  --sombra: 0 8px 24px rgba(10, 26, 63, .08);
  --sombra-boton: 0 8px 20px rgba(37, 99, 160, .25);
  --foco: #1B6EA6;
  --verde: #047857;   --verde-fondo: #E3F6EE;
  --ambar: #8A4B00;   --ambar-fondo: #FFF4D6;
  --naranja: #9A3412; --naranja-fondo: #FFEBDD;
  --rojo: #B42318;    --rojo-fondo: #FDE8E7;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body {
  margin: 0; color: var(--texto); font: 16px/1.5 var(--letra); min-height: 100vh; -webkit-font-smoothing: antialiased;
  /* rejilla de puntos muy suave: sensación de consola sin ruido */
  background: var(--fondo) radial-gradient(var(--rejilla) 1px, transparent 1px) 0 0 / 22px 22px;
}
a { color: var(--destacado); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
small, .suave { color: var(--texto-suave); }
.numero, .monto, td.numero, .num { font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); letter-spacing: -.02em; }
.mono { font-family: var(--mono); letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Movimiento: corto, suave y siempre apagable ---------- */
@keyframes respira { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
@keyframes brillo { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes barrido { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes onda { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
/* menos movimiento (pedido por el teléfono o por la persona): todo pasa casi al instante; las
   transiciones entre pantallas quedan como un fundido corto y los efectos estrella se apagan */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
.sin-movimiento *, .sin-movimiento *::before, .sin-movimiento *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
.vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: respira 2.4s ease-in-out infinite; flex: none; }
.vivo.alerta { background: var(--rojo); }
.vivo.quieto { background: var(--ambar); animation: none; }
.esqueleto { display: block; border-radius: 10px; min-height: 18px; background: linear-gradient(90deg, var(--resalte), var(--borde-fuerte), var(--resalte)); background-size: 200% 100%; animation: brillo 1.3s linear infinite; }
.esqueleto + .esqueleto { margin-top: 10px; }
.esqueleto.alto { min-height: 64px; }
/* las pantallas entran con un movimiento corto (solo con el código de la página activo; sin él, todo aparece directo) */
.con-js .contenido > * { animation: entra var(--dur-larga) var(--curva-entra) both; }

/* ---------- Armazón: barra de mando arriba, sin menú lateral ---------- */
.saltar { position: absolute; left: -999px; top: 8px; display: inline-flex; align-items: center; min-height: 44px; background: var(--acento); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; }
.barra-mando {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--texto); text-decoration: none; font-weight: 700; letter-spacing: .03em; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca span { display: none; }
.marca span.siempre { display: inline; }
.barra-motor { border-bottom: 2px solid var(--acento, #4FB3E6); }
.pulso-sistema { display: none; align-items: center; gap: 8px; font-size: .78rem; color: var(--texto-suave); padding: 5px 10px; border: 1px solid var(--borde); border-radius: 999px; white-space: nowrap; }
.barra-mando .espacio { flex: 1; }
.zonas { display: none; }
.abrir-comando {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--radio-chico);
  background: var(--capa); border: 1px solid var(--borde-fuerte); color: var(--texto-suave); font: 500 .92rem var(--letra); cursor: pointer;
}
.abrir-comando svg { width: 18px; height: 18px; color: var(--destacado); }
.abrir-comando .txt, .abrir-comando kbd { display: none; }
kbd { font: 600 .7rem var(--mono); border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: 1px 6px; color: var(--destacado); background: transparent; }
.contenido { padding: 18px 16px 120px; max-width: 1240px; margin: 0 auto; }
.titulo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.titulo-pagina h1 { margin: 0; }
.antetitulo { margin: 0 0 4px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }

/* secciones de la zona (chips debajo de la barra) */
.subzonas { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; max-width: 1240px; margin: 0 auto; }
.subzonas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--texto-suave); font-weight: 600; font-size: .9rem; border: 1px solid var(--borde); }
.subzonas a[aria-current="page"] { color: var(--texto); background: var(--resalte); border-color: var(--borde-fuerte); }

/* dock del celular: 4 destinos y la barra de comando al centro */
.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center;
  padding: 6px; border-radius: 22px; background: var(--capa-fuerte); backdrop-filter: blur(12px); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra);
}
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: var(--texto-suave); text-decoration: none; font-size: .7rem; border-radius: 14px; }
.dock a svg { width: 22px; height: 22px; }
.dock a[aria-current="page"] { color: var(--texto); font-weight: 600; }
.dock a[aria-current="page"] svg { color: var(--destacado); }
.dock .centro { width: 56px; height: 56px; margin: -26px 6px 0; border-radius: 18px; border: 4px solid var(--fondo); background: var(--acento); color: #fff; display: grid; place-items: center; box-shadow: var(--sombra-boton); cursor: pointer; }
.dock .centro svg { width: 22px; height: 22px; }

@media (min-width: 1000px) {
  .marca span { display: inline; }
  .pulso-sistema { display: inline-flex; }
  .zonas { display: flex; gap: 2px; margin-left: 10px; }
  .zonas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: .92rem; }
  .zonas a:hover { color: var(--texto); }
  .zonas a[aria-current="page"] { color: var(--texto); background: var(--resalte); }
  .abrir-comando { min-width: 280px; }
  .abrir-comando .txt { display: inline; flex: 1; text-align: left; }
  .abrir-comando kbd { display: inline; }
  .dock { display: none; }
  .contenido { padding: 26px 32px 48px; }
  .subzonas { padding: 14px 32px 0; }
  h1 { font-size: 2rem; }
}

/* ---------- Barra de comando (Ctrl+K) ---------- */
.comando { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding: 64px 12px 12px; background: rgba(6, 17, 43, .72); backdrop-filter: blur(6px); }
.caja-cmd { width: 100%; max-width: 640px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden;
  transition: opacity var(--dur-corta) var(--curva-entra), transform var(--dur-corta) var(--curva-entra); }
@starting-style { .caja-cmd { opacity: 0; transform: translateY(-8px) scale(.98); } }
.caja-cmd .buscar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--borde); }
.caja-cmd .buscar svg { width: 20px; height: 20px; color: var(--destacado); flex: none; }
.caja-cmd input { flex: 1; min-height: 52px; background: none; border: 0; color: var(--texto); font: 1.05rem var(--letra); outline: none; }
.caja-cmd .lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.caja-cmd .grupo { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); padding: 10px 12px 4px; }
.caja-cmd .opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.caja-cmd .opcion svg { width: 20px; height: 20px; color: var(--destacado); flex: none; }
.caja-cmd .opcion small { margin-left: auto; font: .72rem var(--mono); color: var(--texto-suave); text-align: right; }
.caja-cmd .opcion[aria-selected="true"], .caja-cmd .opcion:hover { background: var(--resalte); }
.caja-cmd .pista { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--borde); font-size: .75rem; color: var(--texto-suave); margin: 0; }
.caja-cmd .nada { padding: 18px 12px; color: var(--texto-suave); }

/* ---------- Superficies ---------- */
.tarjeta { background: var(--capa); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin: 0 0 14px; }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.tarjeta > h2:first-child { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.tarjeta.destacada { border-color: var(--borde-fuerte); background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 30%, transparent), var(--capa)); }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.rejilla-2 { display: grid; gap: 14px; }
@media (min-width: 720px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }
/* dos columnas reales en escritorio: lo principal y lo de apoyo */
.columnas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.columnas > * { min-width: 0; }
@media (min-width: 1000px) { .columnas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; } .columnas.mando { grid-template-columns: minmax(0, 1fr) 380px; } .lado-fijo { position: sticky; top: 76px; } }

/* cifras grandes con gráfica fina */
.rejilla-cifras { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: 0 0 14px; }
@media (max-width: 719px) { .rejilla-cifras { grid-template-columns: 1fr 1fr; } }
.cifra { position: relative; overflow: hidden; background: var(--capa); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 0; }
.cifra .etiqueta { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: .82rem; }
.cifra .valor { font: 700 1.55rem/1.15 var(--mono); letter-spacing: -.03em; margin-top: 6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cifra .valor .moneda, .cifra .valor small { display: inline-block; white-space: nowrap; font: 600 .5em var(--letra); color: var(--texto-suave); letter-spacing: 0; margin-left: 4px; }
.cifra .cambio { font-size: .82rem; margin-top: 4px; }
.cifra .chispa { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; opacity: .55; pointer-events: none; }
.cifra.alerta .valor { color: var(--rojo); }
@media (min-width: 1000px) { .cifra .valor { font-size: 1.75rem; } }
@media (max-width: 719px) { .cifra .valor { font-size: 1.2rem; } .cifra { padding: 14px 12px; } }
.cifra-gigante { font: 700 2.9rem/1.02 var(--mono); letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra-gigante .moneda { font: 600 .4em var(--letra); color: var(--texto-suave); letter-spacing: 0; margin-left: 6px; }
@media (min-width: 1000px) { .cifra-gigante { font-size: 4rem; } }

/* ---------- Botones: uno principal por pantalla ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  border-radius: 14px; border: 1px solid transparent; font: 650 1rem/1.2 var(--letra); cursor: pointer; text-decoration: none;
  transition: background var(--rapido), transform var(--rapido), box-shadow var(--rapido); -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.98); }
.boton svg { width: 20px; height: 20px; }
.boton-primario { background: var(--acento); color: #FFFFFF; box-shadow: var(--sombra-boton); }
.boton-primario:hover { background: var(--acento-fuerte); }
.boton-secundario { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--resalte); }
.boton-peligro { background: var(--peligro); color: #FFFFFF; }
.boton-whatsapp { background: #0F7A40; color: #FFFFFF; }
.boton-bloque { width: 100%; }
.boton-chico { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.boton[aria-busy="true"] { opacity: .7; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.zona-peligro { margin-top: 24px; padding: 16px; border: 1px dashed var(--rojo); border-radius: var(--radio); }
.zona-peligro h3 { color: var(--rojo); }
.boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde); background: transparent; color: var(--texto); cursor: pointer; text-decoration: none; }
.boton-icono svg { width: 20px; height: 20px; }

/* accesos rápidos (lo que más hace cada persona) */
.rapidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.rapido { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 92px; padding: 14px; border-radius: 16px; background: var(--capa); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-weight: 650; font-size: .92rem; }
.rapido svg { width: 22px; height: 22px; color: var(--destacado); }
.rapido.estrella { background: var(--resalte); border-color: var(--borde-fuerte); }

/* ---------- Estados (siempre con texto) ---------- */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.estado-verde { color: var(--verde); background: var(--verde-fondo); }
.estado-ambar { color: var(--ambar); background: var(--ambar-fondo); }
.estado-naranja { color: var(--naranja); background: var(--naranja-fondo); }
.estado-rojo { color: var(--rojo); background: var(--rojo-fondo); }
.estado-neutro { color: var(--texto-suave); background: var(--resalte); }
.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid; margin: 0 0 14px; }
.aviso-info { border-color: var(--borde-fuerte); background: var(--resalte); }
.aviso-exito { border-color: var(--verde); background: var(--verde-fondo); }
.aviso-alerta { border-color: var(--ambar); background: var(--ambar-fondo); }
.aviso-error { border-color: var(--rojo); background: var(--rojo-fondo); }

/* ---------- Asistente: una propuesta concreta con su botón ---------- */
.asistente { border-color: var(--borde-fuerte); background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 32%, transparent), var(--capa)); }
.asistente .frase { font-size: 1.1rem; line-height: 1.45; margin: 0 0 14px; }
.asistente .frase b { color: var(--destacado); }

/* ---------- Línea de tiempo de vencimientos ---------- */
.linea-tiempo { position: relative; height: 66px; margin: 4px 10px 6px; }
.linea-tiempo .eje { position: absolute; left: 0; right: 0; top: 24px; height: 2px; border-radius: 2px; background: var(--borde-fuerte); }
.linea-tiempo .hoy { position: absolute; left: 0; top: 15px; width: 2px; height: 20px; background: var(--destacado); }
.linea-tiempo .punto { position: absolute; top: 18px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid var(--fondo); }
.linea-tiempo .marcas { position: absolute; left: 0; right: 0; top: 44px; display: flex; justify-content: space-between; font: .7rem var(--mono); color: var(--texto-suave); }
.punto.tono-verde { background: var(--verde); } .punto.tono-ambar { background: var(--ambar); } .punto.tono-naranja { background: var(--naranja); } .punto.tono-rojo { background: var(--rojo); } .punto.tono-neutro { background: var(--destacado); }
.dia-0 { left: 0%; } .dia-1 { left: 7.14%; } .dia-2 { left: 14.29%; } .dia-3 { left: 21.43%; } .dia-4 { left: 28.57%; } .dia-5 { left: 35.71%; } .dia-6 { left: 42.86%; } .dia-7 { left: 50%; }
.dia-8 { left: 57.14%; } .dia-9 { left: 64.29%; } .dia-10 { left: 71.43%; } .dia-11 { left: 78.57%; } .dia-12 { left: 85.71%; } .dia-13 { left: 92.86%; } .dia-14 { left: 100%; }

/* filas con anillo de progreso (licencias, vencimientos) */
.lista-filas { list-style: none; margin: 0; padding: 0; }
.fila-anillo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); min-width: 0; }
.fila-anillo:first-child { border-top: 0; }
.fila-anillo .texto { flex: 1; min-width: 0; }
.fila-anillo .texto b, .fila-anillo .texto a { display: block; font-weight: 650; overflow-wrap: anywhere; color: var(--texto); text-decoration: none; }
.fila-anillo .texto a:hover { color: var(--destacado); }
.fila-anillo .texto small { font: .78rem var(--mono); overflow-wrap: anywhere; }
.anillo { width: 46px; height: 46px; flex: none; position: relative; display: grid; place-items: center; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo .pista { stroke: var(--borde-fuerte); }
.anillo .progreso { stroke-linecap: round; }
.anillo .dias { font: 700 .78rem var(--mono); }
.tono-verde .progreso { stroke: var(--verde); } .tono-ambar .progreso { stroke: var(--ambar); } .tono-naranja .progreso { stroke: var(--naranja); } .tono-rojo .progreso { stroke: var(--rojo); } .tono-neutro .progreso { stroke: var(--texto-suave); }

/* ---------- Tarjetas de licencia ---------- */
.rejilla-licencias { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.licencia-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 16px; border-radius: var(--radio); background: var(--capa); border: 1px solid var(--borde); }
.licencia-tarjeta .anillo { width: 58px; height: 58px; }
.licencia-tarjeta .titulo { font-weight: 700; color: var(--texto); text-decoration: none; display: block; }
.licencia-tarjeta .detalle { font: .78rem var(--mono); color: var(--texto-suave); overflow-wrap: anywhere; display: block; }
.licencia-tarjeta .acciones { grid-column: 1 / -1; }
.licencia-tarjeta .acciones .boton { flex: 1; }

/* ---------- Tienda: tarjetas por servicio, compra en dos toques ---------- */
.rejilla-productos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.servicio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--radio); background: var(--capa); border: 1px solid var(--borde); margin: 0; }
.servicio .inicial { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 800 1.2rem var(--letra); background: var(--resalte); color: var(--destacado); }
.servicio .nombre { font-weight: 700; font-size: 1.02rem; margin: 0; overflow-wrap: anywhere; }
.servicio .nombre small { font-weight: 500; }
.servicio .precio { font: 700 1.35rem var(--mono); letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.servicio .precio .moneda { font: 600 .55em var(--letra); color: var(--texto-suave); margin-left: 3px; }
.servicio .stock { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.medidor { display: block; width: 70px; height: 4px; border-radius: 4px; background: var(--borde-fuerte); overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 4px; background: var(--destacado); }
.medidor .tono-naranja, .medidor .tono-rojo { background: var(--naranja); }
.lleno-0 { width: 0; } .lleno-1 { width: 10%; } .lleno-2 { width: 20%; } .lleno-3 { width: 30%; } .lleno-4 { width: 40%; } .lleno-5 { width: 50%; }
.lleno-6 { width: 60%; } .lleno-7 { width: 70%; } .lleno-8 { width: 80%; } .lleno-9 { width: 90%; } .lleno-10 { width: 100%; }
.servicio .compra { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.servicio .compra .boton-primario { flex: 1; }
.servicio .compra .primer-toque { display: none; flex: 1; }
.servicio .compra .segundo-toque { display: flex; flex: 1; gap: 8px; }
/* con el código de la página: primer toque "Comprar", segundo toque "Pagar" */
.con-js .servicio .compra .primer-toque { display: inline-flex; }
.con-js .servicio .compra .segundo-toque { display: none; }
.con-js .servicio[data-estado="confirmar"] { border-color: var(--borde-fuerte); }
.con-js .servicio[data-estado="confirmar"] .primer-toque { display: none; }
.con-js .servicio[data-estado="confirmar"] .segundo-toque { display: flex; }
.servicio.agotado { opacity: .6; }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 14px; }
.contador button { width: 44px; height: 46px; background: none; border: 0; color: var(--texto); font: 600 1.15rem var(--letra); cursor: pointer; }
.contador input { width: 44px; height: 46px; background: none; border: 0; color: var(--texto); text-align: center; font: 600 1rem var(--mono); -moz-appearance: textfield; }
.contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Filtros segmentados ---------- */
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--capa); border: 1px solid var(--borde); margin: 0 0 16px; max-width: 100%; }
.pestanas a { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 10px; color: var(--texto-suave); text-decoration: none; font-weight: 600; white-space: nowrap; min-height: 44px; }
.pestanas a[aria-current="page"] { background: var(--acento); color: #FFFFFF; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo .ayuda { font-size: .8rem; color: var(--texto-suave); }
.campo .error { font-size: .85rem; color: var(--rojo); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: color-mix(in srgb, var(--fondo) 70%, transparent); color: var(--texto); font: 1rem/1.4 var(--letra); transition: border-color var(--rapido), box-shadow var(--rapido);
}
.entrada:focus { border-color: var(--foco); box-shadow: 0 0 0 4px var(--resalte); outline: none; }
.entrada[aria-invalid="true"] { border-color: var(--rojo); }
.con-boton { display: flex; gap: 8px; }
.con-boton .entrada { flex: 1; }
.buscador { margin: 0 0 14px; }
.buscador .entrada { padding-left: 42px; background: var(--capa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%234FB3E6' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
.confirmacion { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; min-height: 44px; cursor: pointer; }
.confirmacion input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--peligro); flex: none; }

/* ---------- Tablas (solo del equipo): limpias, sin rejas; en celular cada fila es una tarjeta ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave); font-weight: 600; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla tbody tr:hover { background: var(--resalte); }
.tabla td.numero, .tabla th.numero { text-align: right; font-family: var(--mono); }
@media (max-width: 719px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--capa); border: 1px solid var(--borde); border-radius: 16px; padding: 6px 4px; margin: 0 0 10px; }
  .tabla td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; border: 0; padding: 6px 12px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .tabla td::before { content: attr(data-etiqueta); color: var(--texto-suave); font-size: .82rem; text-align: left; flex: none; }
  .tabla td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .tabla td.acciones-fila { justify-content: flex-end; }
  .tabla td.acciones-fila::before { content: none; }
}

/* ---------- Urgencias del centro de mando ---------- */
.urgencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.urgencia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--capa); border: 1px solid var(--borde); }
.urgencia .nivel { font: 700 .68rem var(--mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 8px; white-space: nowrap; margin-top: 2px; }
.nivel.ahora { background: var(--rojo-fondo); color: var(--rojo); } .nivel.hoy { background: var(--naranja-fondo); color: var(--naranja); } .nivel.semana { background: var(--resalte); color: var(--destacado); }
.urgencia .texto b { display: block; }
.urgencia .texto small { display: block; }
.urgencia .boton { grid-column: 1 / -1; }
@media (min-width: 720px) { .urgencia { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .urgencia .boton { grid-column: auto; } }
.todo-en-orden { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--texto-suave); }

/* feed de alertas en vivo */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--borde); animation: entra .35s ease-out both; }
.feed li:first-child { border-top: 0; }
.feed .hora { justify-self: end; font: .72rem var(--mono); color: var(--texto-suave); }
.feed .mensaje { grid-column: 1 / -1; font-size: .92rem; overflow-wrap: anywhere; }
.feed .boton { grid-column: 1 / -1; justify-self: start; }

/* ---------- Licencia, secretos y datos ---------- */
.licencia { display: grid; gap: 8px; }
.licencia .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.secreto { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radio-chico); background: color-mix(in srgb, var(--fondo) 70%, transparent); border: 1px solid var(--borde); }
.secreto .valor { flex: 1; font-family: var(--mono); overflow-wrap: anywhere; }
.monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.monto .moneda { font-weight: 600; color: var(--texto-suave); font-size: .8em; margin-left: 4px; }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
.vacio { text-align: center; padding: 32px 16px; color: var(--texto-suave); }
.filas-resumen { display: grid; gap: 10px; margin: 8px 0; }
.filas-resumen > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.filas-resumen .total { border-top: 1px solid var(--borde); padding-top: 10px; font-size: 1.15rem; font-weight: 700; }

/* ---------- El momento estrella: obtener un código ---------- */
.caja-codigo { position: relative; overflow: hidden; text-align: center; padding: 26px 18px; }
.escaner { position: relative; width: 132px; height: 132px; margin: 6px auto 16px; border-radius: 50%; border: 1px solid var(--borde-fuerte); display: grid; place-items: center; overflow: hidden; }
.escaner::before, .escaner::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--destacado); animation: onda 2.2s ease-out infinite; }
.escaner::after { animation-delay: 1.1s; }
.escaner .haz { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--destacado) 35%, transparent)); animation: barrido 1.6s linear infinite; }
.escaner svg { width: 34px; height: 34px; color: var(--destacado); position: relative; }
.cronometro { font: 700 1.1rem var(--mono); color: var(--destacado); }
.codigo-grande { position: relative; font: 700 2.6rem/1.1 var(--mono); letter-spacing: .14em; text-align: center; padding: 20px 12px; border-radius: 16px; background: color-mix(in srgb, var(--fondo) 70%, transparent); border: 2px solid var(--destacado); overflow-wrap: anywhere; box-shadow: 0 0 0 6px var(--resalte); }
@media (min-width: 720px) { .codigo-grande { font-size: 3.4rem; } }
.codigo-listo .tiempo { font: 600 .85rem var(--mono); color: var(--verde); margin: 10px 0 0; }
.espera { display: flex; align-items: center; gap: 12px; text-align: left; }
.girando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--borde-fuerte); border-top-color: var(--destacado); animation: girar 1s linear infinite; flex: none; }

/* mensaje flotante */
.aviso-flotante { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 60; box-shadow: var(--sombra);
  transition: opacity var(--dur-corta) var(--curva-entra), transform var(--dur-media) var(--resorte); }
@starting-style { .aviso-flotante { opacity: 0; transform: translateY(12px) scale(.9); } }

/* ---------- Pantallas públicas (ingreso y códigos) ---------- */
.publica { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.publica .caja { width: 100%; max-width: 440px; }
.publica .logo-grande { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; text-align: center; }
.publica .logo-grande svg { width: 76px; height: 76px; filter: drop-shadow(0 10px 30px rgba(79, 179, 230, .25)); }
.pie { text-align: center; font-size: .8rem; color: var(--texto-suave); margin-top: 18px; }
.fijos-landing { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 30; }
.nombre-usuario { display: none; }

/* utilidades pequeñas (sin estilos en línea) */
.separado { margin: 4px 0 16px; }
.arriba { margin-top: 12px; }
.fila-lista { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.monto-grande { font-size: 1.3rem; }
.entrada.cantidad { width: 84px; flex: none; }
.quiebre { word-break: break-all; }
.positivo { color: var(--verde); }
.pre { white-space: pre-wrap; word-break: break-word; }

/* acceso */
.pasos { padding-left: 20px; margin: 0 0 14px; }
.pasos li { margin: 0 0 10px; }
.pasos .secreto { margin-top: 8px; }
.codigos-respaldo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 1.1rem; }
.codigos-respaldo li { padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: color-mix(in srgb, var(--fondo) 70%, transparent); text-align: center; }
.fila-permiso { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.fila-permiso span:first-of-type { flex: 1; min-width: 140px; }
/* inventario */
.texto-carga { min-height: 180px; font-size: .85rem; white-space: pre; overflow-x: auto; }
.archivo { position: relative; overflow: hidden; margin-bottom: 12px; }
.archivo input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lista-chica { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; }
.lista-chica li { margin: 2px 0; word-break: break-word; }
.entrada.precio { width: 9rem; min-width: 0; }
/* dinero */
.saldo-grande { display: grid; gap: 12px; margin-bottom: 16px; }
.saldo-grande .cifra .valor { font-size: 2rem; }
/* compras */
.producto h2 { margin: 0 0 4px; font-size: 1.1rem; }
.precio-grande { font: 700 1.5rem var(--mono); margin: 8px 0; }

/* métricas: barras finas sin estilos en línea */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barra span { width: 100%; background: linear-gradient(180deg, var(--destacado), color-mix(in srgb, var(--destacado) 40%, transparent)); border-radius: 4px 4px 0 0; min-height: 2px; }
.barra small { font-size: .6rem; color: var(--texto-suave); }
.barra .alto-0 { height: 0%; } .barra .alto-1 { height: 10%; } .barra .alto-2 { height: 20%; } .barra .alto-3 { height: 30%; } .barra .alto-4 { height: 40%; } .barra .alto-5 { height: 50%; }
.barra .alto-6 { height: 60%; } .barra .alto-7 { height: 70%; } .barra .alto-8 { height: 80%; } .barra .alto-9 { height: 90%; } .barra .alto-10 { height: 100%; }
form.periodo { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
form.periodo .entrada { width: auto; min-width: 0; max-width: 100%; flex: 1 1 140px; }
@media print { .barra-mando, .dock, .subzonas, .comando, form, .boton { display: none !important; } body { background: #fff; color: #000; } }
/* ajustes finos */
.cifra .estado { white-space: normal; text-align: left; }
.tabla a { text-decoration: none; font-weight: 600; }
.tabla a:hover { text-decoration: underline; }
@media (max-width: 999px) {
  .subzonas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .subzonas::-webkit-scrollbar { display: none; }
  .subzonas a { flex: none; }
}
/* todo lo que se toca mide al menos 44 px */
.fila-anillo .texto a, .licencia-tarjeta .titulo { display: flex; align-items: center; min-height: 44px; }
.trampa input { min-height: 44px; }
/* movimientos del monedero (sin tabla) */
.movimientos .signo { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 700 1.1rem var(--mono); background: var(--resalte); color: var(--texto-suave); }
.movimientos .signo.entra { background: var(--verde-fondo); color: var(--verde); }
.movimientos .cifra-fila { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.movimientos .cifra-fila .num { font-weight: 700; }
/* filtros de Mis licencias: lentes compactas que no se parten (y la lupa abre la barra de comando) */
.lentes { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.lentes::-webkit-scrollbar { display: none; }
.lentes a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: .9rem; }
.lentes a[aria-current="page"] { color: var(--texto); background: var(--resalte); border-color: var(--borde-fuerte); }
.lente-buscar { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--destacado); display: grid; place-items: center; cursor: pointer; }
.lente-buscar svg { width: 18px; height: 18px; }
/* correos largos: una línea con puntos suspensivos (el correo completo está en la licencia) */
.fila-anillo .texto small, .licencia-tarjeta .detalle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* desenfoque solo en la barra, el dock y los diálogos; en equipos lentos, color sólido */
.barra-mando { background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(12px) saturate(1.3); }
.dock { background: color-mix(in srgb, var(--superficie) 80%, transparent); backdrop-filter: blur(14px) saturate(1.4); }
.comando { backdrop-filter: blur(4px); }
.equipo-lento .barra-mando { backdrop-filter: none; background: var(--fondo); }
.equipo-lento .dock { backdrop-filter: none; background: var(--capa-fuerte); }
.equipo-lento .comando { backdrop-filter: none; }
.marca { min-width: 44px; }
/* modo claro: el asistente con borde de acento en vez de degradado */
[data-tema="claro"] .asistente, [data-tema="claro"] .tarjeta.destacada { background: var(--superficie); border-left: 4px solid var(--acento); }
/* en celular la barra de comando se abre desde el dock: arriba no se repite */
@media (max-width: 999px) { .barra-mando .abrir-comando { display: none; } .pulso-sistema { display: inline-flex; padding: 4px 8px; font-size: .72rem; } }
@media (max-width: 420px) { .pulso-sistema span:last-child { display: none; } .pulso-sistema { padding: 0; border: 0; min-width: 20px; justify-content: center; } }

/* =====================================================================================
   V5 · Biblioteca de movimiento (docs/SISTEMA_DE_DISENO.md)
   Reglas: se anima solo transform/translate/scale/rotate, opacity, clip-path y propiedades
   registradas con @property (excepción documentada: la altura de <details> con interpolate-size).
   Todo se apaga con "menos movimiento" (.sin-movimiento, que pone tema.js antes de pintar) y los
   efectos estrella también en equipos lentos (.equipo-lento). Nada en línea: el código de la
   página solo cambia clases y variables con el CSSOM, que la política de seguridad permite.
   ===================================================================================== */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --halo { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --revela { syntax: '<percentage>'; inherits: false; initial-value: 120%; }
@property --luz { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@keyframes entra { from { opacity: 0; translate: 0 8px; } }
@keyframes aparece { from { opacity: 0; translate: 0 18px; scale: .98; } }
@keyframes llena { from { transform: scaleX(0); } }
@keyframes crece { from { transform: scaleY(0); } }
@keyframes compacta { to { scale: .84; } }
@keyframes linea-aparece { to { opacity: 1; } }
@keyframes girar-borde { to { --giro: 360deg; } }
@keyframes dibuja { from { stroke-dasharray: 0 126; } }
@keyframes traza { from { stroke-dashoffset: 100; } }
@keyframes posa { from { opacity: 0; scale: .55; } }
@keyframes revela-codigo { from { clip-path: inset(0 50% 0 50% round 16px); opacity: .35; } to { clip-path: inset(-10px round 26px); opacity: 1; } }
@keyframes barre { from { translate: -110% 0; } to { translate: 110% 0; } }
@keyframes halo { 0% { --halo: 0px; } 35% { --halo: 26px; } 100% { --halo: 0px; } }
@keyframes revela-saldo { from { --revela: -20%; } to { --revela: 120%; } }
@keyframes luz-entrega { 0%, 100% { --luz: 0%; } 50% { --luz: 70%; } }
@keyframes logo-entra { from { opacity: 0; scale: .6; rotate: -18deg; } }
@keyframes logo-entra-barra { from { opacity: 0; rotate: -24deg; } }
@keyframes vt-sale { to { opacity: 0; scale: .985; } }
@keyframes vt-entra { from { opacity: 0; translate: 0 12px; } }
@keyframes vt-fundido-sale { to { opacity: 0; } }
@keyframes vt-fundido-entra { from { opacity: 0; } }
@keyframes tema-revela { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); } to { clip-path: circle(150% at var(--tx, 50%) var(--ty, 0)); } }

/* ---------- Transiciones entre pantallas: la barra y el dock se quedan quietos; la tarjeta tocada se vuelve la pantalla siguiente ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--dur-corta) var(--curva-sale) both vt-sale; }
::view-transition-new(root) { animation: var(--dur-media) var(--curva-entra) both vt-entra; }
.barra-mando { view-transition-name: barra; }
.dock { view-transition-name: dock; }
/* el título de cada pantalla es el "objeto": al tocar una tarjeta, la tarjeta toma ese lugar y se convierte en el título de la siguiente */
.contenido > .titulo-pagina:not(.sin-vt), .vt-objeto { view-transition-name: objeto; view-transition-class: tarjeta; }
::view-transition-group(*.tarjeta) { animation-duration: var(--dur-larga); animation-timing-function: var(--curva-entra); }
/* cambio de tema: el modo nuevo se abre en círculo desde el botón */
.cambiando-tema .barra-mando, .cambiando-tema .dock, .cambiando-tema .vt-objeto, .cambiando-tema .contenido > .titulo-pagina { view-transition-name: none; }
/* cambios dentro de una tarjeta: solo esa caja se transforma; el resto de la pantalla queda quieto */
:root.vt-local { view-transition-name: none; }
.vt-local .barra-mando, .vt-local .dock, .vt-local .vt-objeto, .vt-local .contenido > .titulo-pagina { view-transition-name: none; }
.vt-local .vt-cambio { view-transition-name: cambio; }
::view-transition-group(cambio) { animation-duration: var(--dur-corta); animation-timing-function: var(--curva-estandar); }
.cambiando-tema::view-transition-old(root) { animation: none; }
.cambiando-tema::view-transition-new(root) { animation: 480ms var(--curva-entra) both tema-revela; }
/* con menos movimiento: solo un fundido corto, nada se desplaza */
.sin-movimiento::view-transition-group(*) { animation: none !important; }
.sin-movimiento::view-transition-old(*) { animation: 120ms linear both vt-fundido-sale !important; }
.sin-movimiento::view-transition-new(*) { animation: 120ms linear both vt-fundido-entra !important; }

/* ---------- Entradas suaves: menús, diálogos, ayudas y desplegables ---------- */
[popover], dialog {
  transition: opacity var(--dur-corta) var(--curva-entra), transform var(--dur-corta) var(--curva-entra),
    overlay var(--dur-corta) allow-discrete, display var(--dur-corta) allow-discrete;
}
[popover]:not(:popover-open), dialog:not([open]) { opacity: 0; transform: translateY(6px) scale(.98); }
@starting-style { [popover]:popover-open, dialog[open] { opacity: 0; transform: translateY(6px) scale(.98); } }
dialog { color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 20px; padding: 20px; max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
dialog::backdrop { background: rgba(6, 17, 43, .62); backdrop-filter: blur(4px); }
.equipo-lento dialog::backdrop { backdrop-filter: none; }
.desplegable { border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--capa); margin: 0 0 12px; }
.desplegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 650; list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--destacado); border-bottom: 2px solid var(--destacado); rotate: 45deg; transition: rotate var(--dur-corta) var(--curva-estandar); }
.desplegable[open] > summary::after { rotate: 225deg; }
.desplegable > .cuerpo { padding: 0 16px 14px; }
.desplegable::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-media) var(--curva-estandar), content-visibility var(--dur-media) allow-discrete; }
.desplegable[open]::details-content { block-size: auto; }
/* ayuda que sale del botón tocado (popover; con posición anclada donde el navegador la entiende) */
.ayuda-boton { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--destacado); font: 700 1rem var(--letra); cursor: pointer; vertical-align: middle; }
.ayuda-globo { max-width: min(320px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-size: .92rem; }
@supports (position-area: bottom) {
  .ayuda-globo.anclada { inset: auto; margin: 8px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
}

/* ---------- Al bajar: las tarjetas aparecen, las barras se llenan, la barra de arriba se compacta ---------- */
@supports (animation-timeline: view()) {
  /* (con distancia fija: una tarjeta más alta que la pantalla ya se ve entera a los 120 px; las anidadas no se animan dos veces) */
  :root.con-js:not(.sin-movimiento) :is(.tarjeta, .servicio, .licencia-tarjeta, .urgencia, .rapido, .cifra):not(:is(.tarjeta, .servicio, .licencia-tarjeta) *) {
    animation: aparece linear both; animation-timeline: view(); animation-range: entry 0 entry 120px;
  }
  :root.con-js:not(.sin-movimiento) .medidor i { transform-origin: left; animation: llena linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
  :root.con-js:not(.sin-movimiento) .barra span { transform-origin: bottom; animation: crece linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
  :root.con-js:not(.sin-movimiento) .barra-mando .marca svg { animation: compacta linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  /* la primera vez de la visita, el logo de la barra entra girando y después se compacta al bajar */
  :root.con-js.primera-vez:not(.sin-movimiento) .barra-mando .marca svg { animation: logo-entra-barra .8s var(--resorte) both, compacta linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 140px; }
  :root.con-js:not(.sin-movimiento) .barra-mando::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--borde-fuerte); opacity: 0; animation: linea-aparece linear both; animation-timeline: scroll(root); animation-range: 0 90px; }
}

/* ---------- Tarjetas que se inclinan (con mouse) o se hunden (al tocar) ---------- */
.servicio, .licencia-tarjeta, .rapido, .cifra { transition: transform var(--dur-media) var(--curva-estandar), border-color var(--dur-corta) var(--curva-estandar); }
.servicio:active, .licencia-tarjeta:active, .rapido:active { transform: scale(.985); transition-duration: var(--dur-micro); }
@media (hover: hover) and (pointer: fine) {
  :root.con-js:not(.sin-movimiento):not(.equipo-lento) .inclinable { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
  :root.con-js:not(.sin-movimiento):not(.equipo-lento) .inclinable:hover { border-color: var(--borde-fuerte); }
}

/* ---------- Bordes que se iluminan (asistente y lo más importante de la pantalla) ---------- */
.asistente, .borde-vivo { position: relative; isolation: isolate; }
:root:not(.sin-movimiento):not(.equipo-lento) :is(.asistente, .borde-vivo)::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--giro), transparent 0deg 240deg, color-mix(in srgb, var(--destacado) 90%, transparent) 300deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girar-borde 6s var(--curva-estandar) 2;   /* dos vueltas y queda quieto: no repinta para siempre */
}
.fuera-de-vista::before, .fuera-de-vista::after { animation-play-state: paused !important; }

/* ---------- Anillos y gráficas que se dibujan ---------- */
.anillo .progreso { animation: dibuja .9s var(--curva-entra) both; }
.logo-aro { stroke-dasharray: 100; }
.primera-vez :is(.marca, .logo-grande) svg { animation: logo-entra .8s var(--resorte) both; }
.primera-vez :is(.marca, .logo-grande) .logo-aro { animation: traza 1.1s .1s var(--curva-entra) both; }

/* ---------- Momentos estrella ---------- */
/* el código: se abre desde el centro, pasa un brillo y (con el código de la página) saltan partículas */
.codigo-grande { overflow: hidden; animation: revela-codigo .6s var(--curva-entra) both; }
.codigo-grande::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--destacado) 40%, transparent) 50%, transparent 65%); translate: -110% 0; animation: barre .9s .35s var(--curva-estandar) both; }
.caja-codigo { isolation: isolate; }
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* compra lista: la licencia "llega" con un visto que se dibuja y confeti liviano */
.entrega { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; animation: posa .7s var(--resorte) both, luz-entrega 1.6s .5s var(--curva-estandar) 2;
  background: radial-gradient(circle, color-mix(in srgb, var(--verde) 28%, transparent) 0%, transparent var(--luz)); }
.entrega svg { width: 88px; height: 88px; }
.entrega .aro, .entrega .visto { fill: none; stroke: var(--verde); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.entrega .aro { animation: traza .7s .1s var(--curva-entra) both; }
.entrega .visto { animation: traza .45s .55s var(--curva-entra) both; }
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confeti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; }
/* saldo: el número sube contando con un brillo */
.cifra-gigante { --halo: 0px; text-shadow: 0 0 var(--halo) color-mix(in srgb, var(--destacado) 75%, transparent); }
.cifra-gigante.brilla { animation: halo 1.3s var(--curva-estandar) both; }
.revela-saldo { -webkit-mask-image: linear-gradient(90deg, #000 var(--revela), transparent calc(var(--revela) + 20%)); mask-image: linear-gradient(90deg, #000 var(--revela), transparent calc(var(--revela) + 20%)); animation: revela-saldo .8s var(--curva-entra) both; }
/* fondo vivo del centro de mando (puntos que respiran; se pausa si la pestaña no se ve) */
.fondo-vivo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .55; }
:is(.sin-movimiento, .equipo-lento) :is(.fondo-vivo, .particulas, .confeti) { display: none; }

/* ---------- Carruseles con imán (celular) ---------- */
.dock { overscroll-behavior: none; }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 0 14px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; flex: 0 0 min(82%, 320px); }
.lentes, .subzonas { scroll-snap-type: x proximity; }
.lentes > *, .subzonas > * { scroll-snap-align: start; }

/* ---------- Catálogo de movimiento (vista V5-01) ---------- */
.muestra-mov { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.interruptores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.interruptores .boton[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }
.curva { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde); }
.curva:first-child { border-top: 0; }
.curva .pista-curva { position: relative; flex: 1; height: 8px; container-type: inline-size; border-radius: 8px; background: var(--resalte); overflow: hidden; }
.curva .bola { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--destacado); }
.curva-en-marcha .bola { animation: recorre 1.4s infinite alternate; }
.curva-en-marcha .c-entra .bola { animation-timing-function: var(--curva-entra); }
.curva-en-marcha .c-sale .bola { animation-timing-function: var(--curva-sale); }
.curva-en-marcha .c-estandar .bola { animation-timing-function: var(--curva-estandar); }
.curva-en-marcha .c-rebote .bola { animation-timing-function: var(--curva-rebote); }
.curva-en-marcha .c-resorte .bola { animation-timing-function: var(--resorte); }
@keyframes recorre { to { translate: calc(100cqw - 8px) 0; } }

/* al imprimir: todo quieto y visible, sin efectos */
@media print { *, *::before, *::after { animation: none !important; transition: none !important; } .fondo-vivo, .confeti, .particulas { display: none !important; } }

/* =====================================================================================
   V5 · Tienda completa (fase 2)
   ===================================================================================== */
/* estrella de favorito (arriba a la derecha de la tarjeta) */
.servicio { position: relative; }
.favorito { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--texto-suave); cursor: pointer; }
.favorito svg { width: 22px; height: 22px; transition: scale var(--dur-corta) var(--curva-rebote); }
.favorito.activa { color: var(--ambar); }
.favorito.activa svg { fill: currentColor; }
.favorito:active svg { scale: .85; }
.servicio .precio { margin-right: 40px; }
.servicio .compra { flex-wrap: wrap; }
.servicio .al-carrito { flex: 1 1 100%; }
.con-js .servicio .al-carrito { flex: 0 0 auto; }
.con-js .servicio[data-estado="confirmar"] .al-carrito { display: none; }
@media (min-width: 420px) { .servicio .al-carrito { flex: 0 0 auto; } }
/* servicios en fila con imán (celular) */
.carrusel-chips { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; }
.carrusel-chips::-webkit-scrollbar { display: none; }
.carrusel-chips a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: .9rem; }
.carrusel-chips a[aria-current="page"] { color: var(--texto); background: var(--resalte); border-color: var(--borde-fuerte); }
/* carrito */
.lista-carrito { list-style: none; margin: 0 0 12px; padding: 0; }
.linea-carrito { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--borde); }
.linea-carrito:first-child { border-top: 0; }
.linea-carrito .inicial { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 1rem var(--letra); background: var(--resalte); color: var(--destacado); }
.linea-carrito .texto { min-width: 0; }
.linea-carrito .texto b { display: block; overflow-wrap: anywhere; }
.linea-carrito .texto small { display: block; color: var(--texto-suave); }
.linea-carrito .subtotal { font-weight: 700; text-align: right; }
.linea-carrito .cantidad-linea { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 720px) { .linea-carrito { grid-template-columns: auto minmax(0, 1fr) auto auto auto; } .linea-carrito .cantidad-linea { grid-column: auto; } }
/* lotes y filtros de Mis licencias */
.licencia-tarjeta { position: relative; }
.licencia-tarjeta .elegir { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.licencia-tarjeta .elegir input { width: 22px; height: 22px; accent-color: var(--acento); }
.licencia-tarjeta > div { padding-right: 36px; }
.etiqueta-privada { display: inline-block; max-width: 100%; margin-bottom: 4px; padding: 2px 8px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--destacado); background: var(--resalte); overflow-wrap: anywhere; }
.barra-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ficha { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--resalte); color: var(--texto); text-decoration: none; font-size: .88rem; font-weight: 600; border: 1px solid var(--borde-fuerte); }
.ficha.limpiar { background: transparent; color: var(--destacado); }
form.filtros { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
form.filtros .boton { grid-column: 1 / -1; }
/* calendario de vencimientos */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendario .dia-semana { text-align: center; font: 600 .72rem var(--letra); color: var(--texto-suave); letter-spacing: .1em; }
.calendario .dia { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto-suave); }
.calendario .dia b { font: 600 .9rem var(--mono); }
.calendario .vacio-dia { border: 0; }
.calendario .con-vencimientos { color: var(--texto); background: var(--ambar-fondo); border-color: var(--ambar); }
.calendario .con-vencimientos small { font: 700 .7rem var(--mono); color: var(--ambar); }
/* inicio: insignia, campana y anuncios */
.fila-saludo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila-saludo .antetitulo { margin: 0; flex: 1; }
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 .78rem var(--letra); border: 1px solid; }
.insignia svg { width: 16px; height: 16px; fill: currentColor; }
.insignia-bronce { color: #E3A06B; border-color: #E3A06B; } .insignia-plata { color: #D6DEEA; border-color: #D6DEEA; }
.insignia-oro { color: #FBBF24; border-color: #FBBF24; } .insignia-diamante { color: var(--destacado); border-color: var(--destacado); }
[data-tema="claro"] .insignia-bronce { color: #8A4B1E; border-color: #8A4B1E; } [data-tema="claro"] .insignia-plata { color: #4B5568; border-color: #4B5568; }
[data-tema="claro"] .insignia-oro { color: #8A5A00; border-color: #8A5A00; }
.campana { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde); color: var(--texto); }
.campana svg { width: 20px; height: 20px; }
.campana.con-avisos svg { color: var(--destacado); }
.globo-num { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--rojo-fondo); color: var(--rojo); border: 1px solid var(--rojo); font: 700 .7rem/18px var(--mono); text-align: center; }
.anuncio { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde-fuerte); background: var(--resalte); margin: 0 0 12px; }
.anuncio p { margin: 4px 0 0; }
.anuncio-importante { border-color: var(--ambar); background: var(--ambar-fondo); }
.anuncio-urgente { border-color: var(--rojo); background: var(--rojo-fondo); }
.feed li.sin-leer .mensaje { font-weight: 650; }
.feed .mensaje a { display: flex; align-items: center; min-height: 44px; }

/* ---------- V5 fase 3: panel (licencias, pendientes, deshacer) ---------- */
.licencias-panel { display: grid; gap: 8px; }
.fila-licencia { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 10px 12px 10px 4px; border-radius: 14px; background: var(--capa); border: 1px solid var(--borde); }
.fila-licencia .elegir { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.fila-licencia .elegir input { width: 22px; height: 22px; accent-color: var(--acento); }
.fila-licencia .texto { color: inherit; text-decoration: none; min-width: 0; padding-top: 4px; }
.fila-licencia .texto b, .fila-licencia .texto small { display: block; }
.fila-licencia .lado { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (min-width: 720px) { .fila-licencia { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; } .fila-licencia .lado { grid-column: auto; justify-content: flex-end; } }
.barra-lote .con-boton { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barra-lote .con-boton .entrada { width: auto; min-width: 0; flex: 1 1 160px; }
.filtros-guardados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.filtros-guardados .ficha a { color: inherit; text-decoration: none; }
.filtros-guardados .ficha form { display: inline; }
.filtros-guardados .con-boton .entrada { width: auto; flex: 1 1 160px; }
.boton-icono.chico { width: 32px; height: 32px; min-width: 32px; }
.cronologia { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--borde-fuerte); display: grid; gap: 12px; }
.cronologia .hito { position: relative; padding-left: 16px; }
.cronologia .hito b, .cronologia .hito small { display: block; }
.cronologia .punto { position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--borde-fuerte); border: 2px solid var(--fondo); }
.cronologia .tono-verde .punto { background: var(--verde); } .cronologia .tono-ambar .punto { background: var(--ambar); }
.cronologia .tono-naranja .punto { background: var(--naranja); } .cronologia .tono-rojo .punto { background: var(--rojo); }
.notas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.notas li { padding: 10px 12px; border-radius: 12px; background: var(--resalte); }
.notas li p { margin: 0 0 4px; }
.aviso.deshacer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.aviso.deshacer form { margin: 0; }
.aviso.deshacer .cuenta-atras { font: 700 .8rem var(--mono); opacity: .7; }
.aviso.deshacer.vencido form { display: none; }
.urgencia .acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.urgencia .acciones .con-boton { display: inline-flex; gap: 6px; align-items: center; }
.urgencia .acciones .entrada { width: auto; min-width: 140px; }
@media (min-width: 720px) { .urgencia .acciones { grid-column: auto; justify-content: flex-end; } }
/* centro de mando con datos */
.asistente .frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.asistente .frases li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.filtros.en-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0 0 14px; }
.filtros.en-linea .campo { margin: 0; flex: 1 1 140px; }
.filas-barra li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; }
.barra-dato { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.medidor.ancho { width: 110px; height: 8px; }
.calor { display: grid; gap: 4px; overflow-x: auto; }
.calor .fila { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: center; }
.calor .fila:first-child { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); }
.calor .hora, .calor .dia { font: .7rem var(--mono); color: var(--texto-suave); }
.calor .celdas { display: grid; grid-template-columns: repeat(24, minmax(6px, 1fr)); gap: 2px; }
.calor .celdas i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--borde); }
.calor .calor-1 { background: color-mix(in srgb, var(--destacado) 25%, transparent); } .calor .calor-2 { background: color-mix(in srgb, var(--destacado) 50%, transparent); }
.calor .calor-3 { background: color-mix(in srgb, var(--destacado) 75%, transparent); } .calor .calor-4 { background: var(--destacado); }
.tabla-desliza { overflow-x: auto; }
.tabla.compacta td, .tabla.compacta th { padding: 8px 10px; }
.lista-filas li.en-papelera { opacity: .6; }
.lista-filas.caja li { display: grid; gap: 8px; }
/* herramientas del panel */
.franja-ver-como { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--ambar-fondo); border-bottom: 2px solid var(--ambar); color: var(--texto); }
.franja-ver-como nav { display: flex; flex-wrap: wrap; gap: 6px; }
.franja-ver-como nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: inherit; font-weight: 600; }
.franja-ver-como nav a[aria-current="page"] { background: var(--capa); }
main[inert] { opacity: .92; }
.servicio .inicial svg, .inicial.grande svg { width: 60%; height: 60%; }
.inicial.grande { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; background: var(--resalte); font-weight: 800; }
.iconos-servicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0 0 10px; }
.iconos-servicio label { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; min-height: 44px; border-radius: 12px; border: 1px solid var(--borde); cursor: pointer; font-size: .78rem; }
.iconos-servicio label svg { width: 22px; height: 22px; }
.iconos-servicio input { position: absolute; opacity: 0; }
.iconos-servicio label:has(input:checked) { border-color: var(--destacado); background: var(--resalte); }
.iconos-servicio label:has(input:focus-visible) { outline: 2px solid var(--destacado); outline-offset: 2px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.dias-semana legend { font-weight: 600; margin-bottom: 6px; }
.dias-semana label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); }
.filas-barra .barra-dato .num { white-space: normal; text-align: right; }
@media (max-width: 520px) { .filas-barra li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .filas-barra .barra-dato { justify-content: flex-start; } }
.filas-resumen a, .tabla td a { display: inline-flex; align-items: center; min-height: 44px; }
.filtros-guardados .ficha a { display: inline-flex; align-items: center; min-height: 44px; }
.filtros-guardados .boton-icono.chico, .fichas .boton-icono.chico { width: 44px; height: 44px; min-width: 44px; }
.filtros-guardados .con-boton { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }

/* V5 fase 4: lápiz del dueño sobre los textos editables */
.lapiz { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-inline-start: 2px; border-radius: 10px; color: var(--acento); text-decoration: none; font-size: 1rem; vertical-align: middle; }
.lapiz:hover, .lapiz:focus-visible { background: var(--capa); }
.barra-lapiz { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 16px; background: var(--capa); border-bottom: 1px solid var(--borde); }
.barra-lapiz a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texto); text-decoration: none; font-weight: 600; }
.barra-lapiz a[aria-current="page"] { background: var(--acento); color: #FFFFFF; }
.quiebre-suave { overflow-wrap: anywhere; }
.lista-textos > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-textos > li .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.lista-textos > li .texto > a { display: flex; align-items: center; min-height: 44px; color: inherit; }
.lista-textos > li .lado { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lista-textos > li .lado form { display: inline; }
fieldset.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; }

/* V5 fase 6.2: centro de ayuda */
.publica .caja.caja-ancha { max-width: 640px; }
.grupo-ayuda { margin: 0 0 18px; }
.grupo-ayuda h2 { font-size: 1.1rem; margin: 18px 0 6px; }
.grupo-ayuda h3 { font-size: .9rem; margin: 10px 0 6px; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.articulo-ayuda { margin: 0 0 8px; }
.articulo-ayuda summary { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.icono-ayuda { display: inline-flex; width: 22px; height: 22px; flex: none; color: var(--acento); }
.icono-ayuda svg { width: 22px; height: 22px; }
.pasos-ayuda { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }

/* V5 fase 6.1: página de códigos (elegir servicio, guía mientras espera, "no me llegó", vencimiento) */
.pagina-codigos .fila-tema { display: flex; justify-content: flex-end; margin-bottom: -38px; }
:root:not(.con-js) .tema-publico { display: none; }
.elegir-servicio { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.elegir-servicio legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.servicios-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.opcion-servicio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 12px 8px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--superficie-2); cursor: pointer; text-align: center;
  transition: transform var(--dur-micro) var(--curva-estandar), border-color var(--dur-micro) var(--curva-estandar); }
.opcion-servicio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion-servicio .icono-servicio { display: inline-flex; width: 30px; height: 30px; color: var(--destacado); }
.opcion-servicio .icono-servicio svg { width: 30px; height: 30px; }
.opcion-servicio .nombre { font-weight: 600; overflow-wrap: anywhere; }
/* navegadores sin :has() (Android viejos): al menos el ícono y el nombre del elegido se marcan */
.opcion-servicio input:checked ~ .icono-servicio { border-radius: 50%; background: var(--resalte); box-shadow: 0 0 0 4px var(--resalte), 0 0 0 6px var(--destacado); }
.opcion-servicio input:checked ~ .nombre { color: var(--destacado); text-decoration: underline; text-underline-offset: 3px; }
.opcion-servicio input:focus-visible ~ .icono-servicio { outline: 3px solid var(--foco); outline-offset: 4px; }
@supports selector(:has(*)) { .opcion-servicio input:checked ~ .icono-servicio { background: none; box-shadow: none; } .opcion-servicio input:checked ~ .nombre { color: inherit; text-decoration: none; }
  .opcion-servicio input:focus-visible ~ .icono-servicio { outline: none; } }
.opcion-servicio:has(input:checked) { border-color: var(--destacado); background: var(--resalte); box-shadow: inset 0 0 0 2px var(--destacado); }
.opcion-servicio:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion-servicio:active { transform: scale(.97); }
.guia-servicio h2 { font-size: 1.05rem; }
.guia-texto { white-space: pre-line; margin: 0; }
.no-llego summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.no-llego .consejos { margin: 8px 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; }
.no-llego button[disabled] { opacity: .6; cursor: not-allowed; }
.vence-acceso { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; text-align: center; }
/* cuando aparece el código, la guía y "no me llegó" sobran */
.pagina-codigos:has(.codigo-listo) :is(.guia-servicio, .no-llego) { display: none; }
@media (prefers-reduced-motion: reduce) { .opcion-servicio { transition: none; } .opcion-servicio:active { transform: none; } }
.sin-movimiento .opcion-servicio { transition: none; }

/* Tablas con textos largos (patrones de reglas, correos): se parten en vez de salirse del ancho */
.tabla td { overflow-wrap: break-word; }
.tabla td .mono, .tabla td a.mono { overflow-wrap: anywhere; }
.tabla td small { overflow-wrap: break-word; }
.tabla .boton, .tabla button { white-space: nowrap; }
.tabla-desliza > .tabla { min-width: 640px; }
@media (max-width: 719px) { .tabla-desliza > .tabla { min-width: 0; } }
/* Desplegables sin clase (paneles viejos): también 44 px para tocarlos */
details:not([class]) > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }

/* ---------- Acciones rápidas en las listas del panel ----------
   Íconos SVG propios (se dibujan una vez por página), 44 px de área tocable, texto al pasar el cursor
   o al mantener presionado. En el celular: los 3 más usados y "Más"; en el computador: todos. */
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.fila-licencia .acciones-rapidas { grid-column: 1 / -1; padding-left: 40px; }
.accion-icono { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px;
  color: var(--texto-suave); background: transparent; border: 1px solid transparent; text-decoration: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
  -webkit-touch-callout: none; transition: background var(--dur-micro) var(--curva-estandar), color var(--dur-micro) var(--curva-estandar); }
.accion-icono:hover { color: var(--texto); background: var(--resalte); border-color: var(--borde); }
.accion-icono:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; color: var(--texto); }
.ia, .accion-icono::before { width: 20px; height: 20px; flex: none; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ia { display: inline-block; }
.accion-icono::before { content: ""; }
/* (generado con iconosAccionCss() de src/web/acciones-rapidas.ts; la prueba 46 revisa que esté al día) */
.i-reponer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a8 8 0 0 1 14-4l2 2'/%3E%3Cpath d='M20 3v4h-4'/%3E%3Cpath d='M20 15a8 8 0 0 1-14 4l-2-2'/%3E%3Cpath d='M4 21v-4h4'/%3E%3C/svg%3E")}
.i-credenciales{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E")}
.i-precio{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E")}
.i-renovar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}
.i-avisar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.6-4.8A8.5 8.5 0 1 1 8 19.5z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1.2-1.5-2-1-1 .8a4 4 0 0 1-2-2l.8-1-1-2z'/%3E%3C/svg%3E")}
.i-copiar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E")}
.i-codigos{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M7 10v4M10.5 10v4M14 10v4M17.5 10v4'/%3E%3C/svg%3E")}
.i-clave{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E")}
.i-vence{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E")}
.i-nota{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10l4 4v14H5z'/%3E%3Cpath d='M15 3v4h4'/%3E%3Cpath d='M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.i-linea{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-papelera{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E")}
.i-recuperar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14l-5-5 5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-4'/%3E%3C/svg%3E")}
.i-ficha{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
.i-recargar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M12 13v4M10 15h4'/%3E%3C/svg%3E")}
.i-licencias{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h10'/%3E%3C/svg%3E")}
.i-ver{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.i-editar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3Cpath d='M12.5 7.5l4 4'/%3E%3Cpath d='M14 20h6'/%3E%3C/svg%3E")}
.i-mas{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E")}
.accion-icono.tono-whatsapp { color: var(--verde); }
.accion-icono.tono-peligro { color: var(--rojo); }
.accion-icono.con-texto span { white-space: nowrap; }
/* texto de cada ícono: al pasar el cursor, con el teclado o al mantener presionado (lo pone monarca.js).
   Solo existe mientras se ve: escondido no ocupa lugar (el último ícono de la fila no ensancha la página). */
.acciones-rapidas .accion-icono::after { content: attr(aria-label); position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; padding: 5px 9px; border-radius: 8px;
  background: var(--capa-fuerte); color: var(--texto); border: 1px solid var(--borde-fuerte); font-size: .78rem; font-weight: 600; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, 0); display: none; animation: texto-icono var(--dur-micro) var(--curva-entra); }
.acciones-rapidas .accion-icono:last-child::after, .acciones-rapidas .accion-icono:nth-last-child(2)::after { left: auto; right: 0; transform: none; }
.acciones-rapidas .accion-icono:hover::after, .acciones-rapidas .accion-icono:focus-visible::after, .acciones-rapidas .accion-icono.mostrar-texto::after { display: block; }
@keyframes texto-icono { from { opacity: 0; translate: 0 4px; } }
@media (hover: none) { .acciones-rapidas .accion-icono:hover:not(.mostrar-texto)::after { display: none; } }
/* celular (V6): las acciones directas se ven TODAS en una franja que se desliza de lado (nunca escondidas);
   solo las secundarias van en "Más". El texto de cada ícono sale como aviso (monarca.js), porque la
   franja recorta lo que sobresale. */
@media (max-width: 719px) {
  .acciones-rapidas .accion-icono:not(.p):not(.mas) { display: none; }
  .acciones-rapidas, .tabla td.acciones-fila .acciones-rapidas { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 4px; scrollbar-width: none; padding: 4px; margin: 0 -4px; }
  .acciones-rapidas::-webkit-scrollbar { display: none; }
  .acciones-rapidas .accion-icono { flex: none; scroll-snap-align: start; }
  .acciones-rapidas .accion-icono::after { display: none !important; }
  .fila-licencia .acciones-rapidas { padding-left: 4px; }
  .deslizada .acciones-rapidas { flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 720px) { .acciones-rapidas .accion-icono.mas { display: none; } }
/* menú "Más" (celular) y página de todas las acciones */
.menu-acciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.opcion-accion { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 600; }
.opcion-accion:hover, .opcion-accion:focus-visible { background: var(--resalte); outline: none; }
.opcion-accion:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); }
.opcion-accion span { flex: 1; min-width: 0; }
.opcion-accion kbd { font-family: var(--mono); font-size: .75rem; color: var(--texto-suave); border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: 1px 6px; }
.opcion-accion.tono-whatsapp .ia { color: var(--verde); }
.opcion-accion.tono-peligro { color: var(--rojo); }
.menu-mas { margin: 0; padding: 8px; min-width: 240px; max-width: calc(100vw - 32px); border-radius: 16px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra); }
/* fila elegida con el teclado, recién cambiada y deslizada (celular) */
.fila-licencia { position: relative; }
.fila-licencia:focus-visible, .fila-licencia.elegida-teclado { outline: 2px solid var(--foco); outline-offset: 2px; }
.fila-licencia.recien { animation: fila-recien var(--dur-larga) var(--curva-entra) both; }
@keyframes fila-recien { from { background: var(--resalte); transform: scale(.985); } to { transform: none; } }
.fila-licencia > .texto, .fila-licencia > .lado { transition: transform var(--dur-corta) var(--curva-entra); }
.fila-licencia.deslizada > .texto, .fila-licencia.deslizada > .lado { transform: translateX(-24px); opacity: .55; }
.deslizada .acciones-rapidas { background: var(--resalte); border-radius: 12px; }
.deslizada .acciones-rapidas .accion-icono:not(.mas) { display: inline-flex; }
.deslizada .acciones-rapidas .accion-icono.mas { display: none; }
tr[data-fila]:focus-visible, tr.elegida-teclado { outline: 2px solid var(--foco); outline-offset: -2px; }
tr.recien { animation: fila-recien var(--dur-larga) var(--curva-entra) both; }
.tabla td.acciones-fila .acciones-rapidas { justify-content: flex-end; flex-wrap: nowrap; }
.licencias-panel { contain: layout; }
.licencias-panel > li { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.ayuda-lista { font-size: .85rem; margin: 0 0 10px; }
/* textos que se cortan con "…" (el completo, al pasar el cursor) */
.corta { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* barra de lote: sin JavaScript va al final de la lista; con JavaScript aparece fija abajo al elegir filas */
.barra-lote.fija { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--capa-fuerte); border: 1px solid var(--borde-fuerte); margin: 12px 0; }
.barra-lote.fija .lote-cabeza, .barra-lote.fija .lote-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.barra-lote.fija .cuantas { font-weight: 650; }
.con-js .barra-lote.fija { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 15; box-shadow: var(--sombra); }
.con-js .barra-lote.fija:not(.activa) { position: static; box-shadow: none; }
.con-js .barra-lote.fija:not(.activa) .lote-acciones { display: none; }
@media (min-width: 1000px) { .con-js .barra-lote.fija { bottom: 12px; } }
@media (max-width: 719px) { .barra-lote.fija .accion-icono.con-texto span { display: none; } }
.confirmacion.chica { font-size: .85rem; min-height: 44px; }
.pie-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.por-pagina { display: flex; align-items: center; gap: 4px; }
.por-pagina a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 10px; color: var(--texto-suave); text-decoration: none; font-variant-numeric: tabular-nums; }
.por-pagina a[aria-current="page"] { color: var(--texto); background: var(--resalte); font-weight: 650; }
/* ventana de la acción: panel lateral en el computador, hoja desde abajo en el celular */
.dialogo-rapido { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 88dvh; padding: 0; border-radius: 22px 22px 0 0; overflow: auto; overscroll-behavior: contain; }
.dialogo-rapido:not([open]) { transform: translateY(24px); }
@starting-style { .dialogo-rapido[open] { opacity: 0; transform: translateY(24px); } }
@media (min-width: 720px) {
  .dialogo-rapido { inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 22px 0 0 22px; }
  .dialogo-rapido:not([open]) { transform: translateX(24px); }
  @starting-style { .dialogo-rapido[open] { opacity: 0; transform: translateX(24px); } }
}
.dialogo-barra { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 8px 8px 0; background: var(--superficie); }
.dialogo-cuerpo { padding: 0 18px 24px; }
.dialogo-cuerpo[aria-busy="true"] { opacity: .6; }
.rapida-cabeza { margin: 0 0 14px; }
.rapida-cabeza h2 { margin: 0 0 4px; font-size: 1.2rem; }
.rapida-cabeza p { margin: 0; }
.rapida form + form { margin-top: 14px; }
.buscador-rapido { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.buscador-rapido .entrada { flex: 1; min-width: 0; }
.opciones-cuenta { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.opciones-cuenta > * { flex-shrink: 0; }
.opciones-cuenta legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.opcion-radio { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--capa); cursor: pointer; }
.opcion-radio input { width: 20px; height: 20px; flex: none; accent-color: var(--acento); }
.opcion-radio span { min-width: 0; display: grid; }
.opcion-radio:has(input:checked) { border-color: var(--destacado); background: var(--resalte); }
.pagina-rapida { max-width: 560px; }
/* tablas en pantallas medianas (tableta): como en el celular, 3 íconos y "Más" (la tabla no se sale del ancho) */
@media (min-width: 720px) and (max-width: 1099px) {
  .tabla .acciones-rapidas .accion-icono:not(.p):not(.mas) { display: none; }
  .tabla .acciones-rapidas .accion-icono.mas { display: inline-flex; }
  .tabla td.acciones-fila .acciones-rapidas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; }
  .tabla td.acciones-fila .accion-icono { flex: none; scroll-snap-align: start; }
}
/* tarjeta "Usuarios" del centro de mando (V6) */
.usuarios-ahora .cifra.sin-borde { border: 0; background: transparent; padding: 0 0 10px; }
.usuarios-periodos td b { font-variant-numeric: tabular-nums; }
.chispa-14 { position: relative; height: 56px; margin: 10px 0 4px; }
.chispa-14 .chispa { position: static; width: 100%; height: 40px; opacity: .9; }
.chispa-pie { display: flex; justify-content: space-between; font-size: .72rem; }
/* elegir licencias de una cuenta (renovar, notificar o reemplazar varias) y "editar todo" */
.elegir-licencias { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.elegir-licencias legend { font-weight: 650; margin-bottom: 4px; }
.elegir-licencias .opcion-radio input { accent-color: var(--acento); }
.elegir-licencias .todas { background: var(--resalte); }
.campos-2 { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.campos-2 legend { font-weight: 650; margin-bottom: 4px; }
.opciones-en-linea { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.opciones-en-linea legend { width: 100%; font-weight: 650; margin-bottom: 4px; }
.opciones-en-linea .opcion-radio { flex: 1 1 140px; }
/* filas de lista (anuncios, cierre de caja, importación, gastos, códigos…): el título y cada detalle en su
   propio renglón; los textos largos se parten sin salirse */
.lista-filas .texto { min-width: 0; }
.lista-filas .texto > b, .lista-filas .texto > strong, .lista-filas .texto > small { display: block; overflow-wrap: anywhere; }
.lista-filas .texto > .estado { margin: 4px 6px 2px 0; }

/* estado vacío: un dibujo y el texto (nunca un espacio en blanco) */
.vacio::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; background-color: var(--destacado); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.5-7.5A2 2 0 0 1 7.4 4h9.2a2 2 0 0 1 1.9 1.5L21 13'/%3E%3Cpath d='M3 13v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-5l-1.5 2.5h-5L8 13z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.5-7.5A2 2 0 0 1 7.4 4h9.2a2 2 0 0 1 1.9 1.5L21 13'/%3E%3Cpath d='M3 13v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-5l-1.5 2.5h-5L8 13z'/%3E%3C/svg%3E") center / contain no-repeat; }
.calendario .vacio::before, .vacio-dia::before, .vacio.sin-dibujo::before { content: none; }
/* textos cortados con "…": al tocarlos (o con el teclado) se ven completos */
.corta.abierta { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* montos muy largos: si no caben en su lugar, bajan de renglón en vez de salirse */

/* ---------- Pulido (trabajo 2): textos y datos larguísimos nunca se salen de su lugar ---------- */
/* una palabra larga (un correo, un código, un nombre sin espacios) se parte antes de salirse */
/* (break-word: solo se parte una palabra que de verdad no cabe; las cortas, los números y los rótulos quedan enteros) */
body { overflow-wrap: break-word; }
/* correos, códigos y textos de una sola pieza: se parten donde haga falta */
.mono, .quiebre, .correo, .suave, .ayuda, .texto small, .filas-resumen > div > :last-child { overflow-wrap: anywhere; }
/* rótulos, números y chips: nunca se parten a la mitad (uno larguísimo se corta con "…") */
.estado { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-flex; min-width: 0; }
.num, .numero, td.numero, .cifra .valor, .tabla th { overflow-wrap: normal; word-break: keep-all; }
.tabla th { white-space: nowrap; }
/* un monto pasa de renglón solo entre el número y la moneda */
.monto { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .2em; overflow-wrap: normal; white-space: nowrap; max-width: 100%; }
.monto .moneda { white-space: nowrap; }
/* menú de arriba y marca: enteros; el aviso del sistema se acorta con "…" */
.zonas a, .marca, .marca span { white-space: nowrap; flex-shrink: 0; }
.pulso-sistema { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pulso-sistema span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* casillas y opciones con el color de la marca en los dos temas (no el rojo ni el gris del navegador) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
/* pestañas: una sola fila que se desliza (igual en todas las secciones) */
.pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; }
/* campos: nunca más angostos que un dedo, nunca más anchos que su lugar (una opción larga no estira la lista) */
.entrada { min-width: 44px; }
select.entrada { max-width: 100%; text-overflow: ellipsis; }
.con-boton > .entrada, .con-boton > select { flex: 1 1 140px; min-width: 0; }
/* calendario en el celular: cada día de al menos 44 px (la tarjeta cede su margen interno) */
@media (max-width: 420px) {
  .tarjeta:has(> .calendario), .tarjeta:has(> * > .calendario) { padding-left: 6px; padding-right: 6px; }
  .calendario { gap: 1px; }
}
/* tarjeta de producto: el nombre nunca se aprieta a una letra por renglón; un precio larguísimo baja de renglón */
.servicio { grid-template-columns: auto minmax(min(6em, 100%), 1fr) auto; }
/* (un precio de más de 9 cifras va en su propio renglón, debajo del nombre, en vez de apretarlo) */
.servicio { container-type: inline-size; }
.servicio .precio.precio-largo { grid-column: 2 / -1; text-align: left; font-size: min(1.15rem, 6.5cqi); }
.servicio .compra > *, .servicio .compra .segundo-toque > * { min-width: 0; }
.servicio .compra .segundo-toque { flex-wrap: wrap; }
.servicio .compra .boton { white-space: normal; }
/* un formulario corto (lista + botón) nunca es más ancho que su lugar, aunque una opción sea larguísima */
.con-boton { max-width: 100%; min-width: 0; flex-wrap: wrap; }
.con-boton > select.entrada { flex: 1 1 160px; width: 0; min-width: 120px; }
/* calendario: la cantidad de cada día como insignia legible y el día con vencimientos bien marcado en los dos temas */
.calendario .dia small { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin-top: 2px; border-radius: 999px;
  font: 700 .72rem var(--mono); background: color-mix(in srgb, var(--ambar) 28%, transparent); color: var(--texto); }
.calendario .dia.con-vencimientos { background: color-mix(in srgb, var(--ambar) 12%, transparent); border-color: color-mix(in srgb, var(--ambar) 55%, transparent); color: var(--texto); }
/* textos importantes de pie (entrega única, ingreso): legibles y con contraste */
.pie, .letra-chica { font-size: .8rem; color: var(--texto-suave); }
/* cifras: el número nunca se parte; su tamaño se ajusta al ancho de su tarjeta (aunque tenga 12 cifras) */
.cifra { container-type: inline-size; }
.cifra .valor { font-size: min(1.55rem, 10.5cqi); }
.cifra .etiqueta { flex-wrap: wrap; }
/* montos dentro de filas y tarjetas angostas: también se achican antes de salirse */
.metrica .monto, .filas-resumen .monto { font-size: min(1em, 6.2cqi); }

/* saldo grande: el número entero en un renglón (se achica en pantallas angostas); la moneda puede bajar */
.cifra-gigante { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .2em; overflow-wrap: normal; font-size: min(2.9rem, 9vw); }
.cifra-gigante > * { white-space: nowrap; }
/* resumen "rótulo · valor": el rótulo entero; si no cabe al lado, el valor baja */
.filas-resumen > div { flex-wrap: wrap; column-gap: 12px; }
.filas-resumen > div > .suave:first-child { overflow-wrap: break-word; flex: 0 1 auto; }
/* movimientos del monedero: el texto nunca se aprieta; si el monto no cabe al lado, baja de renglón */
.movimientos .fila-anillo { flex-wrap: wrap; }
.movimientos .fila-anillo .texto { flex: 1 1 11em; }
.movimientos .cifra-fila { margin-left: auto; text-align: right; }
.movimientos .cifra-fila .num { white-space: nowrap; }

/* tablas en computador y tableta: las palabras quedan enteras; si la tabla no cabe, se desliza dentro de su tarjeta */
.tabla-marco, .tabla-desliza { overflow-x: auto; max-width: 100%; min-width: 0; position: relative; }
.columnas > *, .tarjeta { min-width: 0; }
/* cantidades en pestañas y lentes: una insignia separada del nombre (no un índice pegado) */
.lentes a .num, .pestanas a .num { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--resalte); border: 1px solid var(--borde-fuerte); font-size: .72rem; font-weight: 700; vertical-align: middle; }
/* renovar en lote: una fila por licencia, con el precio a la derecha; la que no se renueva, apagada */
.lista-precios li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.lista-precios li:first-child { border-top: 0; }
.lista-precios li .texto { flex: 1 1 12em; }
.lista-precios li .lado { flex: none; text-align: right; }
.lista-precios li.no-se-renueva { opacity: .6; }

/* V6 parte 4: atajos (?), respuestas rápidas, QR, mensajes de avisar */
.atajos { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 16px; background: rgba(6, 17, 43, .72); }
.atajos[hidden] { display: none; }
.caja-atajos { background: var(--fondo); color: inherit; border: 1px solid var(--borde-fuerte); border-radius: 16px; padding: 18px 18px 14px; width: min(100%, 440px); max-height: 85vh; overflow: auto; }
.caja-atajos h2 { margin: 0 0 10px; font-size: 1.1rem; } .caja-atajos h3 { margin: 12px 0 6px; font-size: .9rem; color: var(--texto-suave); }
.caja-atajos dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 10px; align-items: center; } .caja-atajos dd { margin: 0; }
.respuesta-rapida { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 10px; }
.mensajes-todos { font: inherit; min-height: 180px; white-space: pre-wrap; }
.qr-grande { width: min(100%, 300px); margin: 0 auto 12px; } .qr-grande svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.ultima-consulta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
@media print { .qr-grande { width: 70mm; } .barra-mando, .dock, .acciones, .fila-tema { display: none !important; } }