/* ============================================================
   MANODATA — styles.css
   Layout: 100vh sin scroll en desktop. Header arriba, main flex,
   info-bar fija al fondo. Card hero ocupa toda la altura.
   Paleta: blanco + negro + naranja (#a95036).
   ============================================================ */

/* Mulish autoalojada (variable, pesos 200-1000) — antes venía de Google
   Fonts con display=optional: si la descarga no llegaba antes del primer
   pintado (p.ej. Ctrl+F5 o red lenta), TODA la vista quedaba con la fuente
   de respaldo y "se normalizaba" recién al recargar. Local + preload +
   swap: carga casi instantánea y siempre converge a Mulish. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fuente de reserva con métricas ajustadas a Mulish (~3% más ancha que
   Segoe UI/Arial). Con size-adjust ocupa el mismo espacio, así el texto
   no "encoge y crece" si Mulish aún no cargó en la primera visita. */
@font-face {
  font-family: 'Mulish Fallback';
  src: local('Segoe UI'), local('Arial'), local('Helvetica Neue');
  size-adjust: 103%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- Tokens (LIGHT) ---------- */
:root {
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --bg-pill: #F4F4F4;
  --ink: #0A0A0A;
  --ink-2: #5A5A5A;
  --ink-3: #9A9A9A;
  --line: #ECECEC;
  --accent: #a95036;
  --accent-2: #91422e;

  /* Alias de compatibilidad — varios componentes (recarga, soporte, panel de
     ayuda, onboarding, yape) se escribieron con nomenclatura de tema oscuro
     (--ink-1, --surface-*, --border) que NUNCA se definió, así que caían
     siempre en su respaldo oscuro y se veían mal en modo claro. Al apuntar a
     los tokens reales —que ya cambian por tema— se adaptan solos a claro/oscuro. */
  --ink-1: var(--ink);
  --surface-0: var(--bg);
  --surface-1: var(--bg-soft);
  --surface-2: var(--bg-pill);
  --border: var(--line);
  --bg-card: var(--bg-soft);   /* fondo de tarjetas (ej. resultado IMEI): antes caía en #fff y en modo oscuro quedaba blanco */
  --muted: var(--ink-2);       /* texto secundario/etiquetas: antes sin definir, quedaba invisible */

  --radius-card: 22px;
  --radius-pill: 999px;
  --radius-input: 12px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);

  --font: 'Mulish', 'Mulish Fallback', -apple-system, 'Avenir Next', 'Avenir', BlinkMacSystemFont, system-ui, sans-serif;

  --container: 1280px;
  --pad-x: 32px;
  --header-h: 68px;
  --info-bar-h: 56px;

  /* Tokens semánticos para dark mode (light por default) */
  --watermark-color: rgba(10, 10, 10, 0.035);
  --grid-line-color: rgba(10, 10, 10, 0.035);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.30);
  --on-accent: #FFFFFF;
  --ink-pure-bg: #0A0A0A;        /* fondo "negro puro" usado en bot. */
  --ink-pure-bg-hover: #1F1F1F;
  --inset-highlight: rgba(255, 255, 255, 0.5);
  --modal-overlay: rgba(0, 0, 0, 0.42);
  --danger-soft-bg: #FEF2F2;
  --danger-soft-border: #FCA5A5;
  --danger-soft-text: #991B1B;
}

/* ---------- Tokens (DARK) — Linear/GitHub-inspired, cálido y cómodo ---------- */
[data-theme="dark"] {
  --bg: #17191D;             /* base un pelín más claro, sigue cómodo */
  --bg-soft: #1F2127;        /* cards, sidebar, header */
  --bg-pill: #272A31;        /* inputs, pills, hover */
  --ink: #ECEDEE;            /* texto principal (off-white, no #FFF) */
  --ink-2: #A8A9B0;          /* texto secundario */
  --ink-3: #767780;          /* placeholders, terciario */
  --line: #34373F;           /* bordes sutiles pero visibles */
  --accent: #a95036;         /* naranja se mantiene — vibra en dark */
  --accent-2: #FF6845;       /* hover ligeramente más brillante */

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.36);

  --watermark-color: rgba(255, 255, 255, 0.030);
  --grid-line-color: rgba(255, 255, 255, 0.045);
  --scrollbar-thumb: rgba(255, 255, 255, 0.14);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.24);
  --on-accent: #FFFFFF;
  --ink-pure-bg: #272A31;
  --ink-pure-bg-hover: #32353D;
  --inset-highlight: rgba(255, 255, 255, 0.05);
  --modal-overlay: rgba(0, 0, 0, 0.62);
  --danger-soft-bg: rgba(248, 113, 113, 0.10);
  --danger-soft-border: rgba(248, 113, 113, 0.35);
  --danger-soft-text: #FCA5A5;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Las capas decorativas y las tarjetas traseras del carrusel usan
     transformaciones que pueden sobresalir unos píxeles del viewport.
     `clip` evita una barra horizontal fantasma sin crear otro contenedor
     de scroll (como sí haría `overflow: hidden`). */
  overflow-x: clip;
}

/* (zoom 125% definido al final del archivo — necesita estar después de
   las reglas base de body.dashboard-page para sobrescribirlas) */

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--info-bar-h);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }
input { font-family: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* publicidad flotante en el margen izquierdo — popup con cierre */
.ad-left {
  position: fixed;
  left: 28px;
  top: 50%;
  z-index: 40;
  width: 220px;
  height: 72vh;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.10);
  /* estado inicial: oculta y desplazada */
  opacity: 0;
  transform: translateY(-50%) translateX(-24px);
  transition:
    opacity 350ms ease,
    transform 480ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 220ms ease;
  pointer-events: none;
}
.ad-left.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.ad-left.is-closing {
  opacity: 0;
  transform: translateY(-50%) translateX(-24px);
  pointer-events: none;
}
.ad-left:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.14);
}

.ad-left-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ad-left-tag {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 8px 8px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

.ad-left-img-wrap {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: block;
  overflow: hidden;
}
.ad-left-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Portadas del login con arte específico para cada tema. La selección se
   resuelve por CSS para que el modo correcto aparezca desde el primer paint. */
.login-theme-art.is-dark { display: none; }
[data-theme="dark"] .login-theme-art.is-light { display: none; }
[data-theme="dark"] .login-theme-art.is-dark { display: block; }

/* botón cerrar (X) */
.ad-left-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background-color 150ms ease, transform 100ms ease;
}
.ad-left-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.08);
}
.ad-left-close:active { transform: scale(0.94); }
.ad-left-close svg { width: 14px; height: 14px; }

/* sólo se muestra en pantallas con margen suficiente para no chocar con el contenido */
@media (max-width: 1699px) {
  .ad-left { display: none; }
}

/* watermark de marca al fondo: INFO arriba-izquierda, PERU abajo-derecha */
.brand-watermark {
  position: fixed;
  inset: 0;
  font-weight: 900;
  font-size: clamp(180px, 42vw, 480px);
  color: var(--watermark-color);
  letter-spacing: 0.02em;   /* antes -0.05em: las letras (p.ej. "DA" de MANODATA) se encimaban */
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.brand-watermark span {
  position: absolute;
  display: block;
  white-space: nowrap;
}
.brand-watermark span:first-child {
  top: 60px;
  left: 0;
}
.brand-watermark span:last-child {
  bottom: 80px;
  right: 32px;
}

/* ---------- Header ---------- */
.site-header {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 50;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
/* Header mínimo (login): sin nav central de iconos — dos columnas para que
   el bloque derecho (tema/Tutoriales/Planes/Soporte) vuelva al borde derecho. */
.site-header--minima .header-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* logo */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  line-height: 1;
}
.logo-text {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.logo-mark {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

/* search bar */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 300px;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-pill);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
  cursor: text;
}
.search-bar:hover { background: #EEEEEE; }
.search-bar:focus-within {
  background: var(--bg);
  border-color: var(--line);
}
.search-icon { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
}
.search-bar input::placeholder { color: var(--ink-3); }

/* ============================================================
   Modal "Fuentes conectadas" — abre al click en el app-grid
   ============================================================ */
.sources-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.sources-modal.is-open { opacity: 1; pointer-events: auto; }
.sources-modal[hidden] { display: none; }

.sources-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;          /* sin oscurecer la página */
}

/* Popover centrado horizontalmente debajo del header.
   Diseñado para canvas 1280x720 (HD), ancho del card = ~1100px. */
.sources-modal-card {
  position: absolute;
  top: 76px;
  left: 50%;
  width: 1100px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -6px) scale(0.96);
  transform-origin: top center;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sources-modal.is-open .sources-modal-card { transform: translate(-50%, 0) scale(1); }

.sources-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px 10px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.sources-modal-head h2 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.sources-modal-head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-2);
}

.sources-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-pill);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 150ms ease, transform 100ms ease;
}
.sources-modal-close:hover { background: #E8E8E8; transform: scale(1.06); }
.sources-modal-close svg { width: 16px; height: 16px; }

.sources-modal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);     /* 35 items = 7 cols × 5 filas */
  gap: 8px;
  padding: 14px;
  overflow: hidden;                          /* sin scroll */
}

.source-item {
  display: flex;
  flex-direction: column;                    /* logo arriba, texto debajo */
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  transition: border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.source-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(169,80,54, 0.10);
}
.source-logo-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease;
}
.source-item:hover .source-logo-wrap {
  transform: scale(1.05);
  border-color: var(--accent);
}
.source-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.source-name {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .sources-modal-card {
    width: calc(100vw - 24px);
    right: 12px;
    top: 68px;
  }
  .sources-modal-card::before { right: 60px; }
  .sources-modal-grid { gap: 5px; padding: 8px 10px 12px; }
}

/* dropdown del buscador — mismo ancho que el input */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--line);
  padding: 6px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 100;
}
.search-dropdown[hidden] { display: none; }

.search-result {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 100ms ease;
  cursor: pointer;
}
.search-result:hover,
.search-result:focus {
  background: var(--bg-pill);
  outline: none;
}
.search-result-text { min-width: 0; }
.search-result-label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-label mark {
  background: rgba(169,80,54, 0.14);
  color: var(--accent);
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
}
.search-result-cat {
  margin: 1px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* estado "no hay información" — rojo */
.search-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(229, 67, 21, 0.08);
  border: 1px solid rgba(229, 67, 21, 0.22);
  border-radius: 10px;
  color: #C53510;
}
.search-empty svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.search-empty-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.search-empty-text strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #C53510;
}
.search-empty-text small {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
}

/* icon nav */
.icon-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}
.icon-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background-color 150ms ease;
}
.icon-nav-item:hover {
  background: var(--bg-pill);
}
.icon-nav-item .icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink);
}
.icon-nav-item .icon-wrap svg { width: 19px; height: 19px; }
.icon-nav-item .icon-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
}

/* badge NUEVO */
.badge {
  position: absolute;
  top: -8px;
  right: -16px;
  font-size: 7px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* header right */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app-grid {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--ink);
  margin-right: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease;
}
.app-grid:hover { transform: scale(1.08); }
.app-grid svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Static (reposo) y GIF (buscando): mismas dimensiones y filtro
   para que el switch sea imperceptible. Hue-rotate(-150deg) lleva
   el celeste/cyan original (180°) al naranja (30°). */
.app-grid-static,
.app-grid-loader-gif {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: hue-rotate(-150deg) saturate(1.6) brightness(1.05);
}
.app-grid-loader-gif { display: none; }
.app-grid-static    { display: block; }
/* Dark mode: invert flippea las partes negras a blanco (visibles
   sobre fondo oscuro), después hue-rotate(30°) lleva el cyan
   invertido a naranja. El fondo del PNG/GIF ya es transparente. */
[data-theme="dark"] .app-grid-static,
[data-theme="dark"] .app-grid-loader-gif {
  filter: invert(1) hue-rotate(30deg) saturate(1.7) brightness(1.05);
}

/* ============================================================
   Estado "buscando": el plug entra al outlet con chispas y halo.
   ============================================================ */
body.is-searching .app-grid {
  background: rgba(169,80,54, 0.18) !important;
  box-shadow:
    0 0 0 2px rgba(169,80,54, 0.35),
    0 0 16px rgba(169,80,54, 0.50) !important;
  color: var(--accent);
  animation: app-grid-glow 1.4s ease-in-out infinite !important;
}

@keyframes app-grid-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(169,80,54, 0.35),
      0 0 16px rgba(169,80,54, 0.50);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(169,80,54, 0.55),
      0 0 24px rgba(169,80,54, 0.75);
  }
}

/* Al buscar: cambia el static por el GIF animado, sin halo */
body.is-searching .app-grid-static    { display: none; }
body.is-searching .app-grid-loader-gif { display: block; }
body.is-searching .app-grid {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

/* botones del header (todos negros idénticos) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 150ms ease, transform 100ms ease;
}
.btn-ghost,
.btn-primary {
  background: var(--ink-pure-bg);
  color: var(--on-accent);
}
.btn-ghost:hover,
.btn-primary:hover { background: var(--ink-pure-bg-hover); }
.btn-ghost:active,
.btn-primary:active { transform: scale(0.97); }

/* ---------- Main (fill viewport) ---------- */
.home {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* ---------- Columna login ---------- */
.login-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.login-block {
  width: 100%;
  max-width: 380px;
}
.login-block h1 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.45;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.field input {
  height: 46px;
  padding: 0 16px;
  border: 1px solid #D8D8D8;
  border-radius: var(--radius-input);
  background: var(--bg-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.field input::placeholder { color: var(--ink-3); }
.field input:hover {
  background: #EEEEEE;
  border-color: #BFBFBF;
}
.field input:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--ink);
}

/* link "¿Olvidaste...?" centrado, estilo Snapchat */
.forgot {
  align-self: center;
  margin: 4px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  transition: color 150ms ease;
}
.forgot:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

/* CTA principal: degradado NARANJA */
.btn-login {
  margin-top: 4px;
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.25);
  transition: filter 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.btn-login:hover {
  filter: brightness(0.94);
  box-shadow: 0 6px 16px rgba(169,80,54, 0.35);
}
.btn-login:active { transform: scale(0.98); }

.signup-microcopy {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}
.signup-link {
  color: var(--accent);
  font-weight: 700;
  transition: color 150ms ease;
}
.signup-link:hover { color: var(--accent-2); }

/* Mensaje de error en el form de login */
.login-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #DC2626;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin: 0;
}
[data-theme="dark"] .login-error { color: #FCA5A5; }

/* Hint con usuarios de prueba */
.login-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-3);
}
.login-hint strong {
  color: var(--accent);
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 800;
}

/* ---------- Recuperar contraseña (página /recuperar-clave) ---------- */
/* Los pasos se muestran/ocultan por JS con el atributo [hidden]; como los
   contenedores tienen display propio (flex), hay que forzar que hidden gane. */
#rec-form-user[hidden],
#rec-form-reset[hidden],
.rec-result[hidden] { display: none !important; }
.recuperar-lead {
  margin: -4px 0 4px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}
.rec-question-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-pill);
}
.rec-question-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rec-question-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
/* Permite usar .btn-login sobre <a> (CTAs de éxito / fallback) */
a.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-login.is-busy { opacity: 0.75; cursor: progress; }
.rec-back-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-2);
  background: transparent;
  border-radius: 10px;
  transition: color 150ms ease, background 150ms ease;
}
.rec-back-btn:hover { color: var(--ink); background: var(--bg-pill); }
.rec-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px 0 4px;
}
.rec-result-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.rec-result-ico svg { width: 30px; height: 30px; }
.rec-result-ico.is-ok   { background: rgba(34, 197, 94, 0.12);  color: #16A34A; }
.rec-result-ico.is-info { background: rgba(169,80,54, 0.12); color: var(--accent); }
[data-theme="dark"] .rec-result-ico.is-ok   { background: rgba(34, 197, 94, 0.16); color: #4ADE80; }
[data-theme="dark"] .rec-result-ico.is-info { background: rgba(169,80,54, 0.18); color: #FF8A63; }
.rec-result h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.rec-result p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.rec-result .btn-login { margin-top: 6px; }

/* ---------- Columna hero — carrusel ---------- */
.hero-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}
.hero-carousel {
  position: relative;
  height: auto;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 4 / 5;
  outline: none;
}
/* slides apiladas tipo "pila de hojas" — peek hacia la derecha */
.carousel-slide {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg);
  transform-origin: right center;
  transition:
    transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 700ms ease,
    box-shadow 700ms ease;
  cursor: default;
}
.carousel-slide.is-front {
  z-index: 4;
  transform: scale(1) translateX(0);
  opacity: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.08);
}
.carousel-slide.is-back-1 {
  z-index: 3;
  transform: scale(0.95) translateX(36px);
  opacity: 0.92;
  box-shadow: 12px 8px 26px rgba(0, 0, 0, 0.14), 4px 3px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.carousel-slide.is-back-2 {
  z-index: 2;
  transform: scale(0.90) translateX(70px);
  opacity: 0.80;
  box-shadow: 14px 6px 22px rgba(0, 0, 0, 0.12), 4px 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.carousel-slide.is-hidden {
  z-index: 1;
  transform: scale(0.90) translateX(70px);
  opacity: 0;
  pointer-events: none;
}
.slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
  pointer-events: none;
}
.hero-cta {
  pointer-events: auto;
  background: var(--ink-2);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 150ms ease, transform 100ms ease;
}
.hero-cta:hover { background: var(--ink); }
.hero-cta:active { transform: scale(0.97); }


/* ---------- Barra negra inferior (fija) ---------- */
.info-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: var(--info-bar-h);
  background: var(--ink);
  color: #FFFFFF;
  z-index: 90;
}
.info-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 14px;
}
.info-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--accent);
}
.info-bar-icon svg { width: 22px; height: 22px; }
.info-bar p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.info-bar-link {
  color: var(--accent);
  font-weight: 800;
  margin-left: 4px;
  white-space: nowrap;
  transition: color 150ms ease;
}
.info-bar-link:hover {
  color: #FF7A55;
  text-decoration: underline;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.btn-login:focus-visible,
.signup-link:focus-visible,
.forgot:focus-visible,
.info-bar-link:focus-visible {
  outline-color: var(--accent-2);
  outline-offset: 3px;
}

/* ============================================================
   Planes (planes.html) — grid de 5 cards de pricing
   ============================================================ */
body.planes-page {
  background: var(--bg);
  /* hereda flex column de body, pero sin no-scroll */
}

.planes-main {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px var(--pad-x) 64px;
  position: relative;
  z-index: 1;
}

.planes-head {
  margin-bottom: 28px;
}
.planes-head h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.planes-head p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.plan-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}
.plan-card:hover {
  border-color: #D5D5D5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}
.plan-card.is-popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(169,80,54, 0.12);
}

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  min-height: 24px;
}
.plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ink);
  flex-shrink: 0;
}
.plan-icon svg { width: 22px; height: 22px; }

/* Una ilustración horizontal para cada etapa, sin iconos ni marcos circulares. */
.plan-card.has-plan-art {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   TUTORIALES V3 — Centro de aprendizaje cinético
   ============================================================ */
body.tutoriales-page {
  --tut-accent: #a95036;
  --tut-accent-2: #ff7b50;
  --tut-deep: #101216;
  --tut-panel: #171a20;
  --tut-soft: rgba(169,80,54, 0.12);
  background:
    radial-gradient(circle at 8% 2%, rgba(169,80,54, 0.08), transparent 24rem),
    var(--page-bg, var(--bg));
}

.tutoriales-page .tutoriales-main {
  width: min(1240px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 34px 0 88px;
}

.tutoriales-page .tut-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 548px;
  margin: 0 0 28px;
  padding: 64px 64px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  box-shadow: 0 26px 70px rgba(13, 15, 19, 0.2);
  isolation: isolate;
}

.tutoriales-page .tut-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 14, 18, 0.98) 0%, rgba(12, 14, 18, 0.92) 34%, rgba(12, 14, 18, 0.28) 62%, rgba(12, 14, 18, 0.05) 100%);
}

.tutoriales-page .tut-hero::after {
  content: "";
  position: absolute;
  inset: auto auto -38% -8%;
  z-index: 1;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,80,54, 0.18), rgba(169,80,54, 0) 68%);
  animation: tut-hero-breathe 5s ease-in-out infinite;
  pointer-events: none;
}

.tutoriales-page .tut-hero-aurora {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, 0.08) 32%, transparent 50%);
  transform: translateX(-80%);
  animation: tut-hero-sheen 7s ease-in-out infinite;
}

.tutoriales-page .tut-hero-copy {
  position: relative;
  z-index: 4;
  width: min(54%, 590px);
}

.tutoriales-page .tut-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 12px;
  color: #ff9a79;
  background: rgba(169,80,54, 0.12);
  border: 1px solid rgba(169,80,54, 0.24);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tutoriales-page .tut-eyebrow i,
.tutoriales-page .tut-live-pill i,
.tutoriales-page .tut-preview-live i,
.tutoriales-page .tut-player-caption i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tut-accent);
  box-shadow: 0 0 0 5px rgba(169,80,54, 0.14);
  animation: tut-pulse-dot 1.7s ease-out infinite;
}

.tutoriales-page .tut-hero h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.tutoriales-page .tut-hero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #ff7a50, #ffb08f 55%, #a95036);
  -webkit-background-clip: text;
  background-clip: text;
}

.tutoriales-page .tut-hero > .tut-hero-copy > p {
  max-width: 550px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.tutoriales-page .tut-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tutoriales-page .tut-primary-action,
.tutoriales-page .tut-secondary-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.tutoriales-page .tut-primary-action {
  color: #fff;
  background: linear-gradient(135deg, var(--tut-accent-2), var(--tut-accent));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(169,80,54, 0.28);
}

.tutoriales-page .tut-primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(169,80,54, 0.38);
}

.tutoriales-page .tut-action-play {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9px;
}

.tutoriales-page .tut-action-play svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.tutoriales-page .tut-secondary-action {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutoriales-page .tut-secondary-action:hover { color: #fff; background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.tutoriales-page .tut-secondary-action span { color: #ff8a64; font-size: 16px; animation: tut-arrow-bob 1.4s ease-in-out infinite; }

.tutoriales-page .tut-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11.5px;
  font-weight: 700;
}

.tutoriales-page .tut-hero-metrics span {
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.tutoriales-page .tut-hero-metrics span:first-child { padding-left: 0; }
.tutoriales-page .tut-hero-metrics span:last-child { border-right: 0; }
.tutoriales-page .tut-hero-metrics strong { display: block; margin-bottom: 3px; color: #fff; font-size: 15px; }

.tutoriales-page .tut-hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.tutoriales-page .tut-hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.tutoriales-page .tut-float-card,
.tutoriales-page .tut-live-pill {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  color: #fff;
  background: rgba(20, 22, 27, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.25);
}

.tutoriales-page .tut-float-card {
  right: 4.5%;
  gap: 11px;
  min-width: 184px;
  padding: 11px 13px;
  border-radius: 14px;
  animation: tut-float-card 4s ease-in-out infinite;
}

.tutoriales-page .tut-float-card--top { top: 10%; }
.tutoriales-page .tut-float-card--bottom { right: 28%; bottom: 8%; animation-delay: -2s; }
.tutoriales-page .tut-float-card > i { width: 34px; height: 34px; display: grid; place-items: center; color: #ff8a64; background: rgba(169,80,54, 0.14); border-radius: 10px; }
.tutoriales-page .tut-float-card svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tutoriales-page .tut-float-card span { display: flex; flex-direction: column; }
.tutoriales-page .tut-float-card small { margin-bottom: 2px; color: rgba(255, 255, 255, 0.48); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tutoriales-page .tut-float-card strong { font-size: 12px; font-weight: 800; }

.tutoriales-page .tut-live-pill {
  right: 6%;
  bottom: 8%;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Ruta recomendada */
.tutoriales-page .tut-route {
  position: relative;
  margin-bottom: 52px;
  padding: 28px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(18, 21, 27, 0.05);
}

.tutoriales-page .tut-section-head,
.tutoriales-page .tut-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.tutoriales-page .tut-section-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--tut-accent);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tutoriales-page .tut-section-head h2,
.tutoriales-page .tut-library-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
}

.tutoriales-page .tut-section-head > p { max-width: 320px; margin: 0; color: var(--ink-2); font-size: 13px; text-align: right; }

.tutoriales-page .tut-route-track {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 126px;
  height: 2px;
  overflow: hidden;
  background: var(--line);
}

.tutoriales-page .tut-route-track span {
  display: block;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--tut-accent), transparent);
  animation: tut-route-scan 4.4s ease-in-out infinite;
}

.tutoriales-page .tut-route-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.tutoriales-page .tut-route-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 20px 18px;
  color: var(--ink);
  text-align: left;
  background: var(--bg-soft, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.tutoriales-page .tut-route-step:hover {
  z-index: 1;
  transform: translateY(-4px);
  background: var(--bg);
  border-color: rgba(169,80,54, 0.35);
  box-shadow: 0 16px 32px rgba(18, 21, 27, 0.1);
}

.tutoriales-page .tut-route-step > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tut-accent);
  background: var(--tut-soft);
  border-radius: 13px;
}

.tutoriales-page .tut-route-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tutoriales-page .tut-route-step > span:not(.tut-route-num) { display: flex; flex-direction: column; min-width: 0; }
.tutoriales-page .tut-route-step small { margin-bottom: 3px; color: var(--ink-3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tutoriales-page .tut-route-step strong { font-size: 14px; font-weight: 850; }
.tutoriales-page .tut-route-step b { color: var(--tut-accent); font-size: 18px; transition: transform 180ms ease; }
.tutoriales-page .tut-route-step:hover b { transform: translateX(4px); }
.tutoriales-page .tut-route-num { position: absolute; top: 9px; right: 12px; color: var(--ink-3); opacity: .35; font-size: 10px; font-weight: 900; letter-spacing: .08em; }

/* Biblioteca */
.tutoriales-page .tut-library { scroll-margin-top: 92px; }
.tutoriales-page .tut-library-head { margin-bottom: 22px; }

.tutoriales-page .tut-search {
  width: min(390px, 100%);
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px 0 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(18, 21, 27, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.tutoriales-page .tut-search:focus-within { border-color: rgba(169,80,54, 0.55); box-shadow: 0 0 0 4px rgba(169,80,54, 0.1); }
.tutoriales-page .tut-search svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ink-3); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tutoriales-page .tut-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13.5px; }
.tutoriales-page .tut-search input::placeholder { color: var(--ink-3); }
.tutoriales-page .tut-search kbd { padding: 4px 7px; color: var(--ink-3); background: var(--bg-soft, rgba(0,0,0,.04)); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; font-family: inherit; }

.tutoriales-page .tut-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.tutoriales-page .tut-filters { justify-content: flex-start; gap: 7px; margin: 0; }
.tutoriales-page .tut-chip {
  padding: 8px 13px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.tutoriales-page .tut-chip:hover { color: var(--ink); border-color: rgba(169,80,54, .3); transform: translateY(-1px); }
.tutoriales-page .tut-chip.is-active { color: #fff; background: var(--tut-accent); border-color: var(--tut-accent); box-shadow: 0 7px 18px rgba(169,80,54, .22); }
.tutoriales-page .tut-result-count { flex: 0 0 auto; color: var(--ink-3); font-size: 11.5px; font-weight: 750; }

.tutoriales-page .tut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tutoriales-page .tut-card {
  --tut-rx: 0deg;
  --tut-ry: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(20, 23, 29, 0.045);
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.tutoriales-page .tut-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--tut-accent)) 40%, var(--line));
  box-shadow: 0 22px 48px rgba(20, 23, 29, 0.13);
  transform: none;
}
.tutoriales-page .tut-card[hidden] { display: none; }
.tutoriales-page .tut-card[data-cat="primeros-pasos"] { --card-accent: #a95036; }
.tutoriales-page .tut-card[data-cat="consultas"] { --card-accent: #367df2; }
.tutoriales-page .tut-card[data-cat="recargas"] { --card-accent: #16a875; }
.tutoriales-page .tut-card[data-cat="cuenta"] { --card-accent: #7966dd; }
.tutoriales-page .tut-card[data-cat="apis"] { --card-accent: #8792a6; }

.tutoriales-page .tut-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1e25;
}

.tutoriales-page .tut-preview {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  opacity: .76;
  filter: saturate(.82) contrast(1.05) brightness(.78);
  transform: none;
  transition: opacity 220ms ease, filter 220ms ease;
}

.tutoriales-page .tut-card:hover .tut-preview { opacity: .94; filter: saturate(1) contrast(1.03) brightness(.86); transform: none; }

.tutoriales-page .tut-thumb-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 11, 14, .08), rgba(9, 11, 14, .02) 42%, rgba(9, 11, 14, .72));
}

.tutoriales-page .tut-card-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--card-accent) 78%, rgba(14,16,20,.65));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  animation: tut-icon-float 3.2s ease-in-out infinite;
}

.tutoriales-page .tut-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tutoriales-page .tut-thumb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(14, 16, 20, .58);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,.25), inset 0 0 0 5px rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  transform: translate(-50%, -50%);
  transition: transform 200ms ease, background-color 200ms ease;
}
.tutoriales-page .tut-thumb-play::before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.tutoriales-page .tut-card:hover .tut-thumb-play { background: var(--card-accent); transform: translate(-50%, -50%); }
.tutoriales-page .tut-thumb-play svg { width: 24px; height: 24px; fill: currentColor; }

.tutoriales-page .tut-preview-live,
.tutoriales-page .tut-badge-dur {
  position: absolute;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: rgba(12, 14, 18, .68);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tutoriales-page .tut-preview-live { left: 10px; gap: 7px; padding: 6px 9px; border-radius: 999px; }
.tutoriales-page .tut-preview-live i { width: 6px; height: 6px; box-shadow: none; background: #4de3a1; }
.tutoriales-page .tut-badge-dur { right: 10px; padding: 6px 8px; border-radius: 8px; }

.tutoriales-page .tut-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 17px 18px 16px; }
.tutoriales-page .tut-card-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--ink-3); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tutoriales-page .tut-cat-chip { align-self: auto; padding: 4px 7px; color: var(--card-accent, var(--tut-accent)); background: color-mix(in srgb, var(--card-accent, var(--tut-accent)) 10%, transparent); border-radius: 7px; font-size: 9.5px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.tutoriales-page .tut-card-title { color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1.25; letter-spacing: -.018em; }
.tutoriales-page .tut-card-desc { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.tutoriales-page .tut-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 11px; color: var(--ink-2); border-top: 1px solid var(--line); font-size: 10.5px; font-weight: 850; }
.tutoriales-page .tut-card-footer i { color: var(--card-accent); font-size: 17px; font-style: normal; transition: transform 180ms ease; }
.tutoriales-page .tut-card:hover .tut-card-footer i { transform: translateX(4px); }

.tutoriales-page .tut-empty {
  margin: 18px 0 0;
  padding: 54px 24px;
  color: var(--ink-2);
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 20px;
}
.tutoriales-page .tut-empty > span { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 13px; color: var(--tut-accent); background: var(--tut-soft); border-radius: 15px; }
.tutoriales-page .tut-empty svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tutoriales-page .tut-empty h3 { margin: 0 0 5px; color: var(--ink); font-size: 17px; }
.tutoriales-page .tut-empty p { margin: 0; font-size: 12px; }

/* Modal inmersivo */
body.tutoriales-page.tut-modal-open { overflow: hidden; }
.tutoriales-page .tut-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
}
.tutoriales-page .tut-modal[hidden] { display: none; }
.tutoriales-page .tut-modal-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(7, 8, 11, .82); backdrop-filter: blur(10px); transition: opacity 220ms ease; }
.tutoriales-page .tut-modal-card {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(820px, 92vh);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 35px 100px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(18px) scale(.975);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
.tutoriales-page .tut-modal.is-open .tut-modal-backdrop { opacity: 1; }
.tutoriales-page .tut-modal.is-open .tut-modal-card { opacity: 1; transform: translateY(0) scale(1); }
.tutoriales-page .tut-modal-close {
  position: absolute;
  z-index: 5;
  right: 13px;
  top: 13px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10,12,15,.68);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease, transform 160ms ease;
}
.tutoriales-page .tut-modal-close:hover { background: var(--tut-accent); transform: rotate(4deg); }
.tutoriales-page .tut-modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tutoriales-page .tut-modal-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(340px, .88fr); min-height: 610px; }

.tutoriales-page .tut-player-shell { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px; color: #fff; background: radial-gradient(circle at 70% 25%, rgba(169,80,54,.12), transparent 30%), #0d0f13; }
.tutoriales-page .tut-player-shell::before { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; }
.tutoriales-page .tut-modal-media { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #090a0d; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.tutoriales-page .tut-modal-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.06); border-radius: inherit; box-shadow: inset 0 0 40px rgba(0,0,0,.18); }
.tutoriales-page .tut-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.tutoriales-page .tut-audio-toggle {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  color: #fff;
  background: rgba(10, 12, 15, .72);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  backdrop-filter: blur(9px);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  animation: tut-audio-breathe 2s ease-in-out infinite;
}
.tutoriales-page .tut-audio-toggle[hidden] { display: none; }
.tutoriales-page .tut-audio-toggle:hover { background: var(--tut-accent); }
.tutoriales-page .tut-audio-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tutoriales-page .tut-player-loader { display: inline-flex; align-items: center; gap: 6px; }
.tutoriales-page .tut-player-loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--tut-accent); animation: tut-loader-dot .9s ease-in-out infinite; }
.tutoriales-page .tut-player-loader i:nth-child(2) { animation-delay: .12s; }
.tutoriales-page .tut-player-loader i:nth-child(3) { animation-delay: .24s; }
.tutoriales-page .tut-modal-media:not(.is-loading) .tut-player-loader { display: none; }
.tutoriales-page .tut-media-fallback { display: flex; flex-direction: column; gap: 5px; text-align: center; }
.tutoriales-page .tut-media-fallback strong { color: #fff; }
.tutoriales-page .tut-media-fallback small { color: rgba(255,255,255,.55); }
.tutoriales-page .tut-player-progress { position: relative; z-index: 2; height: 4px; margin: 16px 2px 0; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 999px; }
.tutoriales-page .tut-player-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--tut-accent), #ff9c78); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 180ms linear; box-shadow: 0 0 12px rgba(169,80,54,.6); }
.tutoriales-page .tut-player-caption { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: rgba(255,255,255,.45); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tutoriales-page .tut-player-caption span { display: inline-flex; align-items: center; gap: 8px; }
.tutoriales-page .tut-player-caption strong { color: rgba(255,255,255,.72); font-size: 10px; }

.tutoriales-page .tut-modal-body { min-width: 0; padding: 38px 28px 24px; overflow-y: auto; background: var(--bg); }
.tutoriales-page .tut-modal-body > .tut-cat-chip { display: inline-flex; color: var(--tut-accent); background: var(--tut-soft); }
.tutoriales-page .tut-modal-body h2 { margin: 12px 0 7px; color: var(--ink); font-size: 25px; font-weight: 900; letter-spacing: -.035em; line-height: 1.1; }
.tutoriales-page .tut-modal-desc { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.tutoriales-page .tut-step-status { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.tutoriales-page .tut-step-status span { color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tutoriales-page .tut-step-status small { color: var(--ink-3); font-size: 9px; text-align: right; }
.tutoriales-page .tut-steps { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tutoriales-page .tut-steps li { min-height: 0; padding: 0; display: block; }
.tutoriales-page .tut-steps li::before { display: none; }
.tutoriales-page .tut-steps button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; color: var(--ink-2); text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 12px; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.tutoriales-page .tut-steps button:hover { color: var(--ink); border-color: rgba(169,80,54,.3); transform: translateX(2px); }
.tutoriales-page .tut-steps li.is-active button { color: var(--ink); background: var(--tut-soft); border-color: rgba(169,80,54,.38); box-shadow: inset 3px 0 var(--tut-accent); }
.tutoriales-page .tut-step-num { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-3); background: var(--bg-soft, rgba(0,0,0,.04)); border-radius: 9px; font-size: 9px; font-weight: 900; }
.tutoriales-page .tut-steps li.is-active .tut-step-num { color: #fff; background: var(--tut-accent); }
.tutoriales-page .tut-step-text { font-size: 11.5px; font-weight: 720; line-height: 1.35; }
.tutoriales-page .tut-steps button i { color: var(--tut-accent); font-size: 15px; font-style: normal; opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 160ms ease; }
.tutoriales-page .tut-steps li.is-active button i { opacity: 1; transform: translateX(0); }
.tutoriales-page .tut-step-controls { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tutoriales-page .tut-step-controls button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: 10.5px; font-weight: 850; transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.tutoriales-page .tut-step-controls button:hover:not(:disabled) { color: var(--tut-accent); border-color: rgba(169,80,54,.4); transform: translateY(-1px); }
.tutoriales-page .tut-step-controls button:disabled { opacity: .36; cursor: not-allowed; }

/* Entrada progresiva: se activa solo cuando JavaScript está disponible. */
@media (prefers-reduced-motion: no-preference) {
  .tut-motion-ready .tutoriales-page [data-tut-reveal],
  .tut-motion-ready .tutoriales-page .tut-card { opacity: 0; transform: translateY(24px); }
  .tut-motion-ready .tutoriales-page [data-tut-reveal].is-visible { animation: tut-reveal .72s cubic-bezier(.18,.82,.2,1) forwards; }
  .tut-motion-ready .tutoriales-page .tut-card.is-visible { animation: tut-card-reveal .7s cubic-bezier(.18,.82,.2,1) forwards; animation-delay: calc(var(--tut-index, 0) * 45ms); }
}

@keyframes tut-reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes tut-card-reveal { to { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(var(--tut-rx)) rotateY(var(--tut-ry)); } }
@keyframes tut-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(169,80,54,.35); } 70%,100% { box-shadow: 0 0 0 8px rgba(169,80,54,0); } }
@keyframes tut-hero-breathe { 0%,100% { transform: scale(.94); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes tut-hero-sheen { 0%,58% { transform: translateX(-85%); } 82%,100% { transform: translateX(125%); } }
@keyframes tut-float-card { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tut-arrow-bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes tut-route-scan { 0% { transform: translateX(-130%); } 55%,100% { transform: translateX(390%); } }
@keyframes tut-icon-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes tut-play-ring { 0% { transform: scale(.75); opacity: .55; } 80%,100% { transform: scale(1.25); opacity: 0; } }
@keyframes tut-loader-dot { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-7px); opacity: 1; } }
@keyframes tut-audio-breathe { 0%,100% { box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 0 rgba(169,80,54,.25); } 50% { box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 7px rgba(169,80,54,0); } }

@media (max-width: 1020px) {
  .tutoriales-page .tut-hero { min-height: 510px; padding: 48px 42px; }
  .tutoriales-page .tut-hero-copy { width: 58%; }
  .tutoriales-page .tut-float-card--bottom { right: 21%; }
  .tutoriales-page .tut-route-grid { grid-template-columns: 1fr; }
  .tutoriales-page .tut-route-track { display: none; }
  .tutoriales-page .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutoriales-page .tut-modal-layout { grid-template-columns: 1fr; }
  .tutoriales-page .tut-modal-card { overflow-y: auto; }
  .tutoriales-page .tut-player-shell { padding: 24px; }
  .tutoriales-page .tut-modal-body { overflow: visible; }
}

@media (max-width: 760px) {
  .tutoriales-page .tutoriales-main { width: min(100% - 24px, 1240px); padding-top: 18px; }
  .tutoriales-page .tut-hero { min-height: 760px; align-items: flex-start; padding: 34px 24px 330px; border-radius: 24px; }
  .tutoriales-page .tut-hero::before { background: linear-gradient(180deg, rgba(12,14,18,.99) 0%, rgba(12,14,18,.96) 42%, rgba(12,14,18,.28) 70%, rgba(12,14,18,.35) 100%); }
  .tutoriales-page .tut-hero-copy { width: 100%; }
  .tutoriales-page .tut-hero-visual > img { object-position: 69% center; }
  .tutoriales-page .tut-hero h1 { font-size: clamp(36px, 11vw, 50px); }
  .tutoriales-page .tut-hero > .tut-hero-copy > p { font-size: 14px; }
  .tutoriales-page .tut-hero-metrics { gap: 10px 0; }
  .tutoriales-page .tut-hero-metrics span { width: 50%; padding: 0 10px; }
  .tutoriales-page .tut-hero-metrics span:nth-child(2) { border-right: 0; }
  .tutoriales-page .tut-float-card--top { top: auto; bottom: 20px; right: 18px; }
  .tutoriales-page .tut-float-card--bottom { display: none; }
  .tutoriales-page .tut-live-pill { right: auto; left: 18px; bottom: 23px; }
  .tutoriales-page .tut-route { padding: 22px 18px; }
  .tutoriales-page .tut-section-head, .tutoriales-page .tut-library-head { align-items: flex-start; flex-direction: column; }
  .tutoriales-page .tut-section-head > p { text-align: left; }
  .tutoriales-page .tut-search { width: 100%; }
  .tutoriales-page .tut-toolbar { align-items: flex-start; flex-direction: column; }
  .tutoriales-page .tut-filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .tutoriales-page .tut-filters::-webkit-scrollbar { display: none; }
  .tutoriales-page .tut-chip { flex: 0 0 auto; }
  .tutoriales-page .tut-modal { padding: 8px; }
  .tutoriales-page .tut-modal-card { max-height: 96vh; border-radius: 18px; }
  .tutoriales-page .tut-player-shell { padding: 14px; }
  .tutoriales-page .tut-modal-media { border-radius: 12px; }
  .tutoriales-page .tut-modal-body { padding: 25px 17px 18px; }
}

@media (max-width: 580px) {
  .tutoriales-page .tut-grid { grid-template-columns: 1fr; }
  .tutoriales-page .tut-primary-action, .tutoriales-page .tut-secondary-action { width: 100%; }
  .tutoriales-page .tut-route-step { grid-template-columns: 40px 1fr auto; padding: 17px 14px; }
  .tutoriales-page .tut-route-step > i { width: 40px; height: 40px; }
  .tutoriales-page .tut-search kbd { display: none; }
  .tutoriales-page .tut-player-caption { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tutoriales-page *, .tutoriales-page *::before, .tutoriales-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .tutoriales-page .tut-card,
  .tutoriales-page [data-tut-reveal] { opacity: 1 !important; transform: none !important; }
}
.plan-card.has-plan-art .plan-head {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 32px;
  min-height: 0;
}
.plan-card.has-plan-art .plan-badge {
  margin-top: 0;
  box-shadow: 0 4px 14px rgba(28, 28, 30, 0.14);
}
.plan-art {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 30, 0.10);
  border-radius: 12px;
  background: #F1EEE9;
}
.plan-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Las portadas v9 ya nacen a 768x384 con el mismo busto y laptop.
     No se amplían por CSS para conservar proporciones idénticas. */
  transform: none;
}
.plan-card.has-plan-art:hover .plan-art img {
  transform: none;
}
[data-theme="dark"] .plan-art {
  border-color: rgba(255, 255, 255, 0.14);
  background: #202226;
}

/* El color de cada etapa conecta la ilustración con la información del paquete. */
.plan-tone-green   { --plan-accent: #169B62; --plan-chip-bg: #169B62; --plan-chip-ink: #FFFFFF; --plan-level: "Nivel 01"; }
.plan-tone-sky     { --plan-accent: #4CBDEB; --plan-chip-bg: #6DCFF6; --plan-chip-ink: #073047; --plan-level: "Nivel 02"; }
.plan-tone-blue    { --plan-accent: #2B66D9; --plan-chip-bg: #174EA6; --plan-chip-ink: #FFFFFF; --plan-level: "Nivel 03"; }
.plan-tone-orange  { --plan-accent: #F36B2B; --plan-chip-bg: #F36B2B; --plan-chip-ink: #FFFFFF; --plan-level: "Nivel 04"; }
.plan-tone-black   { --plan-accent: #555B66; --plan-chip-bg: #111317; --plan-chip-ink: #FFFFFF; --plan-level: "Nivel 05"; }
.plan-tone-red     { --plan-accent: #D73A4D; --plan-chip-bg: #C92C3E; --plan-chip-ink: #FFFFFF; --plan-level: "Nivel 06"; }
.plan-tone-gold    { --plan-accent: #D5A31B; --plan-chip-bg: #D5A31B; --plan-chip-ink: #332000; --plan-level: "Nivel 07"; }
.plan-tone-diamond {
  --plan-accent: #9A65F5;
  --plan-chip-bg: linear-gradient(115deg, #62D9FF 0%, #8B71FF 25%, #F56FC7 48%, #FF9A57 68%, #F2D15C 84%, #63D99C 100%);
  --plan-chip-ink: #12131A;
  --plan-level: "Nivel 08";
}

/* Los dos paquetes iniciales conservan su número de nivel, pero su
   identidad visual es: 310 celeste y 410 verde. */
.plan-color-sky   { --plan-accent: #4CBDEB; --plan-chip-bg: #6DCFF6; --plan-chip-ink: #073047; }
.plan-color-green { --plan-accent: #169B62; --plan-chip-bg: #169B62; --plan-chip-ink: #FFFFFF; }

.plan-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-pill);
  color: var(--ink-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.plan-badge.is-pro {
  background: var(--ink);
  color: #FFFFFF;
}
.plan-badge.is-popular-badge {
  background: var(--accent);
  color: #FFFFFF;
}
/* Paquetes de alto volumen — jerarquía de marca ascendente (empresa → mayorista → distribuidor) */
.plan-badge.is-empresa      { background: #E7ECF5; color: #2B3A67; }
.plan-badge.is-mayorista    { background: #2B3A67; color: #FFFFFF; }
.plan-badge.is-distribuidor { background: linear-gradient(135deg, #C88A2C, #F3C34E); color: #3A2A05; }
[data-theme="dark"] .plan-badge.is-empresa   { background: #24304A; color: #C6D4EF; }
[data-theme="dark"] .plan-badge.is-mayorista { background: #3A4B73; color: #FFFFFF; }
/* is-pro es "chip negro" en claro; en oscuro var(--ink) es casi blanco → texto blanco invisible.
   Se invierte a chip claro con texto oscuro para mantener contraste y look premium. */
[data-theme="dark"] .plan-badge.is-pro { background: #ECEDEE; color: #17191D; }
/* Tarjeta "elite" (distribuidor) — anillo dorado sutil, análogo a is-popular */
.plan-card.is-elite {
  border-color: #E4C25E;
  box-shadow: 0 0 0 1px #E4C25E, 0 6px 20px rgba(198, 146, 34, 0.14);
}
[data-theme="dark"] .plan-card.is-elite {
  border-color: #C79A2E;
  box-shadow: 0 0 0 1px #C79A2E, 0 6px 20px rgba(0, 0, 0, 0.30);
}
/* Hover legible en modo oscuro (el borde claro por defecto quedaría casi invisible) */
[data-theme="dark"] .plan-card:hover { border-color: #4A4A4A; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }

.plan-info { display: flex; flex-direction: column; gap: 2px; }
.plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.plan-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.plan-card.has-plan-art .plan-art {
  border-color: color-mix(in srgb, var(--plan-accent) 42%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--plan-accent) 13%, transparent);
}
.plan-card.has-plan-art .plan-info {
  position: relative;
  min-height: 68px;
  gap: 2px;
  margin-top: -2px;
  padding: 12px 84px 11px 14px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 28%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 12%, transparent), transparent 72%),
    var(--bg-pill);
  box-shadow: inset 3px 0 0 var(--plan-accent);
}
.plan-card.has-plan-art .plan-info::before {
  content: "";
  width: 28px;
  height: 3px;
  margin-bottom: 5px;
  border-radius: 999px;
  background: var(--plan-chip-bg);
}
.plan-card.has-plan-art .plan-info::after {
  content: var(--plan-level);
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: var(--plan-chip-bg);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--plan-accent) 25%, transparent);
  color: var(--plan-chip-ink);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.plan-card.has-plan-art .plan-price {
  border: 1px solid color-mix(in srgb, var(--plan-accent) 17%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
[data-theme="dark"] .plan-card.has-plan-art .plan-info {
  border-color: color-mix(in srgb, var(--plan-accent) 34%, #34363B);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 15%, transparent), transparent 72%),
    var(--bg-pill);
}

.plan-price {
  background: var(--bg-pill);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan-price-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.plan-price-period {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}

.plan-tagline {
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  background: var(--bg-pill);
  border-radius: 10px;
  color: var(--ink-2);
  text-align: center;
  letter-spacing: 0.02em;
}
.plan-card.is-popular .plan-tagline {
  background: rgba(169,80,54, 0.08);
  color: var(--accent);
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.plan-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.plan-feature-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 1px;
}
.plan-feature-icon svg { width: 16px; height: 16px; }

.plan-cta {
  width: 100%;
  height: 44px;
  background: var(--ink-pure-bg);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 150ms ease, transform 100ms ease, filter 150ms ease;
}
.plan-cta:hover { background: var(--ink-pure-bg-hover); }
.plan-cta:hover { background: var(--ink-pure-bg-hover); }
.plan-cta:active { transform: scale(0.98); }

.plan-card.is-ghost .plan-cta {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.plan-card.is-ghost .plan-cta:hover {
  background: var(--bg-pill);
  border-color: #D5D5D5;
}

.plan-card.is-popular .plan-cta {
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.25);
}
.plan-card.is-popular .plan-cta:hover { filter: brightness(0.94); }

/* botón activo en el header (Planes / Soporte / etc.) */
.btn-ghost.is-active,
.btn-primary.is-active { background: var(--ink-pure-bg-hover); }

/* ============================================================
   Dashboard (dashboard.html) — layout 3 columnas
   ============================================================ */
body.dashboard-page {
  background-color: var(--bg);
  /* Header y sidebar fijos, solo el área de contenido scrollea */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
/* Marca de agua: grid de cuadritos sutiles SOLO en el área de contenido */
body.dashboard-page .dash-content {
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Header y sidebar quedan sobre fondo sólido para que el grid sólo
   se vea en el área de contenido (efecto marca de agua) */
body.dashboard-page .dash-header,
body.dashboard-page .dash-sidebar {
  background: var(--bg);
  position: relative;
  z-index: 1;
}
body.dashboard-page .info-bar { display: none; }
/* Watermark INFO/PERU detrás de TODO el contenido del dashboard.
   Color naranja del brand con muy poca opacidad para que se sienta como
   textura suave y no compita con el contenido. */
body.dashboard-page .brand-watermark {
  z-index: -1;
  color: rgba(169,80,54, 0.05);
  font-size: clamp(140px, 30vw, 360px);
}
/* Contexto de apilamiento para que z-index: -1 no se "salga" del documento. */
body.dashboard-page { isolation: isolate; }

/* ===== Header del dashboard ===== */
.dash-header { border-bottom: 1px solid var(--line); }
.dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  padding: 0 28px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Logo del header (arriba a la izquierda) */
.dash-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.dash-logo .logo-mark { width: 34px; height: 34px; }
.dash-logo-text {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.dash-logo-text .logo-accent,
.logo-text .logo-accent { color: var(--accent); }

/* ===== Sidebar search (filtro de servicios) ===== */
.dash-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 0 16px;
  padding: 0 14px;
  background: var(--bg-pill);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background-color 150ms, border-color 150ms;
  cursor: text;
}
.dash-sidebar-search:focus-within { background: var(--bg); border-color: var(--line); }
.dash-sidebar-search svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.dash-sidebar-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
}
.dash-sidebar-search input::placeholder { color: var(--ink-3); }

.dash-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;        /* empuja al extremo derecho, deja
                                el theme-toggle pegado al logo */
}

/* Chips de header (rol + créditos) */
.dash-guides-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.dash-guides-toggle:hover { background: rgba(169,80,54, 0.18); transform: translateY(-1px); }
.dash-guides-toggle:active { transform: scale(0.97); }
.dash-guides-toggle[aria-pressed="false"] {
  border-color: var(--line);
  background: var(--bg-pill);
  color: var(--ink-3);
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 150ms, background-color 150ms;
}
.dash-chip:hover { border-color: #BFBFBF; background: var(--bg-soft); }
.dash-chip svg { width: 14px; height: 14px; color: var(--ink-2); }
.dash-chip-label { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.dash-chip strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-chip-credits svg { color: var(--accent); }
.dash-chip-credits strong { color: var(--accent); }

/* Botón "Recargar" del header */
/* Botón Recargar — icono billetera, redondo neutro (igual estilo que .theme-toggle / .app-grid). */
.dash-recargar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bg-pill);
  color: var(--ink);
  border-radius: 50%;
  border: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 180ms ease, transform 120ms ease, color 180ms ease;
}
.dash-recargar-btn svg { width: 18px; height: 18px; }
.dash-recargar-btn:hover {
  background: var(--line);
  transform: scale(1.04);
}
.dash-recargar-btn:active { transform: scale(0.94); }
[data-theme="dark"] .dash-recargar-btn:hover { background: #24262B; }

/* ===== Layout principal: sidebar + content ===== */
.dashboard-main {
  flex: 1;
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 0;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}
.dashboard-main-3col {
  grid-template-columns: 224px 1fr 320px;
}

/* SIDEBAR — fijo en altura completa, sombra suave hacia la izquierda,
   con barra de scroll visible cuando los cajones expandidos exceden la altura */
.dash-sidebar {
  border-right: 1px solid var(--line);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.04), -1px 0 3px rgba(0, 0, 0, 0.03);
  padding: 18px 12px;
  height: 100%;
  /* Columna: buscador (arriba) + nav scrollable (medio) + saldo fijo (abajo).
     Así el saldo NO se mueve aunque se abran los cajones. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-sidebar-search { flex-shrink: 0; }
/* El nav es la única zona que scrollea */
.dash-services-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dash-services-nav::-webkit-scrollbar { width: 8px; }
.dash-services-nav::-webkit-scrollbar-track { background: transparent; }
.dash-services-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}
.dash-services-nav::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ===== Saldo de Monedas fijo al fondo del sidebar ===== */
.dash-sidebar-foot {
  flex-shrink: 0;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
/* Saldo (moneda 3D) a la izquierda + pestaña naranja del carrito a la derecha
   con borde diagonal. Al pasar el cursor, la pestaña se desplaza a la izquierda
   cubriendo el botón y aparece "Comprar monedas". */
.dash-wallet {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 14px;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
}
.dash-wallet:active { transform: scale(0.99); }

/* Cara: moneda + saldo */
.dash-wallet-face {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  flex: 1 1 auto;
  min-width: 0;
}
.dash-wallet-coin { flex-shrink: 0; width: 28px; height: 28px; display: block; }
.dash-wallet-coin .coin3d {
  width: 28px; height: 28px; display: block;
  filter: drop-shadow(0 2px 3px rgba(158, 102, 0, 0.35));
}
.dash-wallet-info {
  display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
}
.dash-wallet-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.dash-wallet-value {
  font-size: 16px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pestaña naranja del carrito (derecha, borde diagonal). Contenido alineado a
   la izquierda: el carrito y el texto quedan a la izquierda. Al hover cubre
   todo el botón. */
.dash-wallet-cart {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60px;                 /* estado normal: solo el carrito */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 12px 0 24px;      /* padding-left para el corte diagonal */
  background: linear-gradient(135deg, #cf8065 0%, #a95036 60%, #91422e 100%);
  color: #FFFFFF;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);   /* corte diagonal a la izquierda */
  white-space: nowrap;
  overflow: hidden;
  box-shadow: -6px 0 16px rgba(169,80,54, 0.18);
  transition: width 340ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dash-wallet-cart-ico { width: 20px; height: 20px; flex-shrink: 0; }
.dash-wallet-cart-text {
  font-size: 13px; font-weight: 800; color: #FFFFFF;
  opacity: 0;
  transition: opacity 200ms ease 120ms;
}
/* Hover: la pestaña se expande cubriendo TODO el botón (el carrito se mueve
   a la izquierda con ella) y aparece el texto. */
.dash-wallet:hover .dash-wallet-cart,
.dash-wallet:focus-visible .dash-wallet-cart {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);   /* recto: cubre todo */
  padding-left: 14px;
  transition: width 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
              clip-path 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
              padding-left 340ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dash-wallet:hover .dash-wallet-cart-text,
.dash-wallet:focus-visible .dash-wallet-cart-text {
  opacity: 1;
}

/* Encabezados de sección del sidebar (Identidad, Registros, etc.) —
   dan aire y jerarquía al listado, que antes era una sola columna saturada */
.dash-nav-group {
  display: block;
  margin: 9px 12px 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dash-nav-group:first-child { margin-top: 2px; }

.dash-cat { border-radius: 10px; }
.dash-cat-summary {
  width: 100%;
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: none;
  text-align: left;
  border-radius: 8px;
  font-family: inherit;
  transition: background-color 100ms ease, color 100ms ease;
}
.dash-cat-summary:hover { background: var(--bg-pill); color: var(--ink); }
.dash-cat .cat-name { flex: 1; }
.dash-cat .cat-count {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--bg-pill);
  color: var(--ink-3);
  letter-spacing: 0;
}
.dash-cat .cat-chevron {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), color 150ms ease;
}
.dash-cat.is-open .cat-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
/* Cuando el cajón está abierto, la opción completa (icono + nombre +
   contador + chevron) se pone naranja del brand. */
.dash-cat.is-open > .dash-cat-summary {
  background: rgba(169,80,54, 0.08);
  color: var(--accent);
}
.dash-cat.is-open > .dash-cat-summary .cat-count {
  background: rgba(169,80,54, 0.14);
  color: var(--accent);
}

/* Animación suave del cajón via grid-template-rows (CSS puro, 60fps).
   El wrapper .cat-items pasa de 0fr (cerrado) a 1fr (abierto).
   El inner mantiene overflow hidden y min-height 0 para colapsar. */
.dash-cat .cat-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dash-cat .cat-items-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-cat.is-open .cat-items {
  grid-template-rows: 1fr;
}
.dash-cat.is-open .cat-items-inner {
  padding: 1px 0 3px;
}
/* Los sub-servicios de una categoría se agrupan con una línea vertical a la
   izquierda (en lugar de iconos por item): lee como un "cajón" anidado.
   Se excluye Favoritos, que conserva sus iconos y su propio recuadro. */
.dash-cat.is-open:not(.dash-favoritos-cat) .cat-items-inner {
  margin-left: 19px;
  border-left: 2px solid rgba(10, 10, 10, 0.16);
}
[data-theme="dark"] .dash-cat.is-open:not(.dash-favoritos-cat) .cat-items-inner {
  border-left-color: rgba(255, 255, 255, 0.18);
}

/* Sub-items dentro de una categoría expandida — más compactos y ligeros
   que los items top-level para diferenciar la jerarquía. */
.cat-items .dash-svc-item {
  padding: 4px 10px 4px 13px;
  gap: 8px;
  border-radius: 6px;
}
.cat-items .svc-icon { width: 12px; height: 12px; }
/* Sin iconos en los sub-items de categorías: la línea del contenedor los
   agrupa. Favoritos SÍ conserva sus iconos. */
.dash-cat:not(.dash-favoritos-cat) .cat-items .svc-icon { display: none; }
/* Con el sidebar más angosto, los nombres largos (p.ej. "Reconocimiento
   facial V2") envuelven a 2 líneas en vez de cortarse con "…". */
.cat-items .svc-name {
  font-size: 10.5px;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.cat-items .svc-badge { font-size: 7px; padding: 1px 4px; }
.cat-items .svc-arrow { width: 12px; height: 12px; }

.dash-svc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
  text-align: left;
  width: 100%;
}
.dash-svc-item:hover { background: var(--bg-pill); }
.dash-svc-item.is-active {
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
}
.dash-svc-item.is-active .svc-name { color: var(--accent); }
.svc-text { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; }
.svc-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-badge {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Flecha → al final de cada item del sidebar */
.svc-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color 120ms ease, transform 120ms ease;
}
.dash-svc-item:hover .svc-arrow,
.dash-cat-single:hover .svc-arrow {
  color: var(--ink-2);
  transform: translateX(2px);
}
.dash-svc-item.is-active .svc-arrow,
.dash-cat-single.is-active .svc-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* CONTENIDO PRINCIPAL — única zona que scrollea */
.dash-content {
  padding: 12px 28px 14px;
  min-width: 0;
  height: 100%;
  overflow-y: scroll;        /* siempre visible, no auto */
  scrollbar-gutter: stable;
}
/* Scrollbar visible y estilizada */
.dash-content::-webkit-scrollbar { width: 12px; }
.dash-content::-webkit-scrollbar-track { background: transparent; }
.dash-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.dash-content::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
.dash-svc-item[hidden],
.dash-cat-single[hidden],
.dash-cat[hidden] { display: none !important; }

/* ===== Iconos en sidebar (categorías y servicios) ===== */
.cat-icon {
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: color 100ms;
}
/* Íconos del menú un poco más gruesos (acompañan el texto más marcado) */
.dash-sidebar .cat-icon svg,
.dash-sidebar .svc-icon svg,
.dash-sidebar .dash-cat-summary .cat-chevron { stroke-width: 2.3; }
.dash-cat.is-open .dash-cat-summary .cat-icon { color: var(--accent); }

/* ===== Categoría con un solo servicio: entrada fija (sin flechita) ===== */
.dash-cat-single {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: background-color 100ms ease, color 100ms ease;
}
.dash-cat-single:hover { background: var(--bg-pill); color: var(--ink); }
.dash-cat-single:hover .cat-icon { color: var(--ink); }
.dash-cat-single .cat-name { flex: 1; }
.dash-cat-single.is-active { background: rgba(169,80,54, 0.10); color: var(--accent); }
.dash-cat-single.is-active .cat-icon { color: var(--accent); }

.svc-icon {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color 100ms;
}
.dash-svc-item:hover .svc-icon,
.dash-svc-item.is-active .svc-icon { color: var(--accent); }

/* Ajuste de svc-text para que el icono encaje al inicio */
.dash-svc-item { gap: 10px; }

/* ===== Avatar dropdown del header ===== */
.dash-user { position: relative; }
.dash-user-trigger {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cf8065, #91422e);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: transform 100ms ease, box-shadow 150ms ease;
  box-shadow: 0 2px 6px rgba(169,80,54, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.dash-user-trigger:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(169,80,54, 0.40); }
.dash-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  z-index: 100;
}
.dash-user-dropdown[hidden] { display: none; }
.dash-user-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.dash-user-name-row { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dash-user-name { font-weight: 800; color: var(--ink); font-size: 14px; }
.dash-user-email { font-size: 12px; color: var(--ink-3); }

/* Badge Premium brillante junto al nombre del usuario */
.dash-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B4E00;
  background: linear-gradient(135deg, #FFEBB0 0%, #FFD35C 45%, #F5B301 100%);
  box-shadow: 0 1px 3px rgba(245, 179, 1, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  position: relative;
  overflow: hidden;
}
.dash-premium-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
/* Brillo que barre el badge periódicamente */
.dash-premium-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-20deg);
  animation: premium-shine 3s ease-in-out infinite;
}
@keyframes premium-shine {
  0%, 55% { left: -60%; }
  100% { left: 145%; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-premium-badge::after { animation: none; }
}
.dash-user-links { display: flex; flex-direction: column; padding: 4px; }
.dash-user-links a {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 100ms ease;
}
.dash-user-links a:hover { background: var(--bg-pill); }
.dash-user-links .logout { color: var(--accent); }

/* Link "Administración" — visible solo cuando el user tiene rol admin (sesion.js lo desoculta) */
.dash-user-links .dash-user-link-admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  padding-bottom: 10px;
}
.dash-user-links .dash-user-link-admin svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.dash-user-links .dash-user-link-admin[hidden] { display: none !important; }

/* ===== Welcome (saludo + stats + novedades + history) ===== */
.dash-welcome-head { margin-bottom: 16px; }
.dash-welcome-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dash-welcome-head h1 {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dash-welcome-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 560px;
}
.dash-welcome-wave {
  display: inline-block;
  font-size: 0.95em;
  transform-origin: 70% 80%;
  animation: dash-wave 2.4s ease-in-out infinite;
}
@keyframes dash-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* Stats */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.dash-stat-card {
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: border-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.dash-stat-card:hover {
  border-color: #D8D8D8;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 18px rgba(0, 0, 0, 0.06);
}
.dash-stat-card.is-primary {
  background: linear-gradient(135deg, #FFF8F4 0%, #FFEDE3 100%);
  border-color: rgba(169,80,54, 0.20);
}
.dash-stat-label { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.dash-stat-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-top: 2px;
}
.dash-stat-card.is-primary .dash-stat-value { color: var(--accent); }
.dash-stat-link { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 6px; }
.dash-stat-link:hover { color: var(--accent-2); text-decoration: underline; }
.dash-stat-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 6px; }

/* Section heads (novedades + historial) */
.dash-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.dash-section-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-section-meta { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* Fila Ranking (izquierda) + Rendimiento (derecha), lado a lado en desktop.
   Aunque en el HTML el .dash-novedades sale primero (por compat), con
   `order` invertimos visualmente: el ranking queda a la izquierda. */
.dash-novedades-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
  align-items: stretch;        /* ambos cards a la misma altura */
}
.dash-novedades-row .dash-ranking-wrap { order: 1; }
.dash-novedades-row .dash-novedades    { order: 2; }
.dash-novedades-row .dash-section-head { margin-bottom: 12px; }
/* Tanto Novedades como Estudio: ocupar toda la altura de la fila */
.dash-novedades, .dash-usage-wrap {
  display: flex;
  flex-direction: column;
}
.dash-novedades > .dash-novedades-card,
.dash-usage-wrap > .dash-usage-chart {
  flex: 1 1 auto;
  min-height: 0;
}
/* La imagen de novedades llena el card disponible sin recortar:
   se estira (object-fit: fill) hasta el alto que dicta el chart vecino. */
.dash-novedades-card {
  display: flex;
}

/* Card de rendimiento — mismo fondo que el chart vecino */
.dash-perf-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  gap: 12px;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
}
.dash-perf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.dash-perf-head h3 {
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.dash-perf-head p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}

/* Status badge "Operativo" con punto verde pulsante */
.dash-perf-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #047857;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dash-perf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: perf-pulse 1.8s ease-in-out infinite;
}
@keyframes perf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
[data-theme="dark"] .dash-perf-status { color: #6EE7B7; }

/* Stats grid (4 chips horizontales) */
.dash-perf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-perf-stat {
  text-align: left;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-perf-stat:last-child { border-right: none; }
.dash-perf-stat-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.dash-perf-stat strong {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-perf-stat strong small {
  font-size: 13px;
  font-weight: 800;
  margin-left: 1px;
}
.dash-perf-stat-sub {
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
}

/* Top comandos */
.dash-perf-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.dash-perf-top-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.dash-perf-top-period {
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dash-perf-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-perf-top-list li {
  display: grid;
  grid-template-columns: minmax(0, 130px) 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}
.dash-perf-top-list .r-name {
  color: var(--ink);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-perf-top-list .r-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(169,80,54, 0.10);
  overflow: hidden;
}
.dash-perf-top-list .r-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #cf8065 0%, #a95036 100%);
  border-radius: 999px;
}
.dash-perf-top-list .r-pct {
  color: var(--accent);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Footer con 3 items destacados (fuentes, IA, seguridad) */
.dash-perf-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 12px;
  margin-top: auto;     /* empuja al fondo del card para emparejar alto con el ranking */
  border-top: 1px solid var(--line);
}
.dash-perf-foot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.dash-perf-foot-item svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.dash-perf-foot-item strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.dash-perf-foot-item span {
  display: block;
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 2px;
}

@media (max-width: 1023px) {
  .dash-perf-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-perf-stat:nth-child(2) { border-right: none; }
  .dash-perf-foot { grid-template-columns: 1fr; }
}

/* Card de acciones rápidas (legacy) */
.dash-quick-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  gap: 14px;
}
.dash-quick-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.dash-quick-tag {
  display: inline-block;
  background: rgba(169,80,54, 0.12);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-quick-head h3 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dash-quick-head p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.dash-quick-recharge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, transform 100ms ease;
}
.dash-quick-recharge:hover { background: var(--accent-2); transform: translateY(-1px); }
.dash-quick-recharge svg { width: 14px; height: 14px; }

.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
}
.dash-quick-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.dash-quick-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(169,80,54, 0.12);
}
.dash-quick-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-quick-icon svg { width: 18px; height: 18px; }
.dash-quick-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dash-quick-meta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-theme="dark"] .dash-quick-item { background: var(--bg-soft); }
[data-theme="dark"] .dash-quick-icon { background: rgba(169,80,54, 0.18); }

/* ============================================================
   Resultado de API real (cuando responde un endpoint en vivo)
   ============================================================ */
.dash-result-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
  margin: 8px 0 0;
  padding: 0;
}
.dash-result-fields > div {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.dash-result-fields dt {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-result-fields dd {
  margin: 1px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}
.dash-result-empty {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
/* (dash-result-raw eliminado — no mostramos JSON crudo) */

/* Botón cerrar flotante en la esquina del resultado API */
.dash-result-card { position: relative; }
.dash-result-close-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-pill);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, transform 100ms ease;
}
.dash-result-close-floating:hover { background: var(--line); transform: scale(1.06); }
.dash-result-close-floating:active { transform: scale(0.94); }
.dash-result-close-floating svg { width: 14px; height: 14px; }
.dash-result-json {
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink);
  overflow-x: auto;
  max-height: 360px;
}

/* ============================================================
   Renderers especializados de respuestas API
   ============================================================ */
.api-block {
  padding: 0;
  margin: 0 0 14px;
}
.api-block:first-child { margin-top: 0; }
.api-block:last-child { margin-bottom: 0; }
/* Marca de agua al pie del bloque: título + DNI + cobrado de forma
   muy sutil, no roba protagonismo al contenido. */
.api-block-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 8px;
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  opacity: 0.55;
  font-size: 10.5px;
  transition: opacity 200ms ease;
}
.api-block-head:hover { opacity: 0.9; }
.api-block-head h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.api-block-head .api-block-meta-dni,
.api-block-head .api-block-meta-cost {
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.api-block-head .api-block-meta-dni strong,
.api-block-head .api-block-meta-cost strong {
  color: var(--ink-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.api-block-head .api-block-meta-cost {
  margin-left: auto;
}

/* RENIEC: arriba foto + datos en 2 columnas; abajo biométricos en grid */
.api-reniec {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
.api-reniec-media {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-reniec .api-photo img {
  width: 100%;
  max-width: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}

/* Servicio Policía: foto grande izquierda + datos PNP a la derecha */
.api-policia {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.api-policia-photo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-policia-photo .api-img-wrap img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}
.api-policia-nophoto {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  background: var(--bg-pill);
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 16px;
}
.api-policia-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Banner de estado PNP */
.api-policia-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
}
.api-policia-status svg { width: 24px; height: 24px; flex-shrink: 0; }
.api-policia-status strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.api-policia-status span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.85;
}
.api-policia-status.is-pnp {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #047857;
}
.api-policia-status.is-civil {
  background: var(--bg-pill);
  border-color: var(--line);
  color: var(--ink-2);
}
[data-theme="dark"] .api-policia-status.is-pnp { color: #6EE7B7; }

@media (max-width: 720px) {
  .api-policia { grid-template-columns: 1fr; }
  .api-policia-photo { max-width: 320px; margin: 0 auto; }
}

/* Biométricos (firma + huellas) — grid responsivo debajo de los datos */
.api-biometrics {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.api-firma {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Wrapper de imagen con lupita centrada. Click amplía. */
.api-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 150ms ease;
}
.api-img-wrap img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  transition: filter 200ms ease;
}
.api-img-wrap:hover img { filter: brightness(0.85); }
.api-img-zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(169,80,54, 0.95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}
.api-img-wrap:hover .api-img-zoom-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.api-img-zoom-icon svg { width: 22px; height: 22px; }

/* Variante para firmas (más bajitas) */
/* La imagen llena el recuadro completo (contain, centrada): sin franjas
   grises vacías debajo de la firma/huella. */
.api-firma .api-img-wrap img {
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Lightbox para imágenes biométricas */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.img-lightbox.is-open { opacity: 1; pointer-events: auto; }
.img-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.img-lightbox-card {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  transform: translateY(8px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.img-lightbox.is-open .img-lightbox-card {
  transform: translateY(0) scale(1);
}
.img-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.img-lightbox-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.img-lightbox-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-pill);
  border: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease;
}
.img-lightbox-close:hover { background: var(--line); }
.img-lightbox-close svg { width: 14px; height: 14px; }
.img-lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 24px;
  overflow: auto;
}
.img-lightbox-body img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .api-reniec { grid-template-columns: 1fr; }
  .api-reniec-media { max-width: 100%; }
  .api-biometrics { grid-template-columns: repeat(2, 1fr); }
}

/* DNI imágenes (azul / electrónico) — frontal + reverso, GRANDES */
.api-dni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
.api-dni-grid figure {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.api-dni-grid .api-img-wrap img,
.api-dni-grid img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Header del thumbnail: label izq + botón descarga der */
.api-dni-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 8px;
}
.api-dni-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #5A5A5A;
  text-transform: uppercase;
}

/* Botón de descarga de imagen */
.api-dni-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  transition: background-color 150ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.api-dni-download:hover { background: var(--accent-2); transform: translateY(-1px); }
.api-dni-download:active { transform: scale(0.96); }
.api-dni-download svg { width: 11px; height: 11px; }

.api-photo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.api-photo img {
  width: 100%;
  max-width: 160px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-pill);
}

/* PDF embebido */
.api-pdf-embed {
  width: 100%;
  height: 520px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-pill);
}
.api-pdf-download {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.api-pdf-download:hover { background: var(--accent-2); }

/* Barra "Descargar PDF" arriba de los resultados de Reconocimiento Facial.
   Generada por el backend en cada consulta — se descarga el PDF del cotejo. */
.facial-pdf-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(169,80,54, 0.08), transparent);
  border: 1px solid rgba(169,80,54, 0.25);
  border-radius: 12px;
  flex-wrap: wrap;
}
.facial-pdf-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.facial-pdf-badge {
  display: inline-flex;
  padding: 3px 10px;
  background: rgba(169,80,54, 0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.facial-pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms, transform 100ms;
}
.facial-pdf-download:hover { filter: brightness(0.95); }
.facial-pdf-download:active { transform: scale(0.97); }

/* Header del PDF custom (INFOPERU_PDF — generado por nosotros, distinto del Azul oficial) */
.api-pdf-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.api-pdf-header strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.api-pdf-badge {
  display: inline-flex;
  padding: 3px 10px;
  background: rgba(169,80,54, 0.12);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Callout / mensaje destacado */
.api-callout {
  background: rgba(169,80,54, 0.08);
  border: 1px solid rgba(169,80,54, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 12px;
}
.api-callout.is-warn {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.25);
  color: #B45309;
}
[data-theme="dark"] .api-callout.is-warn { color: #FCD34D; }

/* Stats grid (puntos, papeletas, etc.) — más planos, con divisores */
.api-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0;
  margin: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.api-stats > div {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.api-stats > div:last-child { border-right: none; }
.api-stats strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.api-stats span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* Árbol genealógico — agrupado por tipo de relación */
.api-arbol-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.api-arbol-stats > div {
  padding: 10px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.api-arbol-stats > div:last-child { border-right: none; }
.api-arbol-stats strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.api-arbol-stats span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}

.api-arbol-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.api-arbol-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.api-arbol-group-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--accent);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.api-arbol-group-title span {
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-weight: 700;
}
.api-arbol-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.api-arbol-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color 150ms ease, transform 120ms ease;
}
.api-arbol-person:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.api-arbol-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-pill);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.api-arbol-avatar svg { width: 18px; height: 18px; }
.api-arbol-avatar[data-genero="masculino"] {
  background: rgba(59, 130, 246, 0.10);
  color: #3B82F6;
}
.api-arbol-avatar[data-genero="femenino"] {
  background: rgba(236, 72, 153, 0.10);
  color: #EC4899;
}
.api-arbol-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.api-arbol-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.api-arbol-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabla genérica para arrays (papeletas, familiares, etc.) */
.api-table-title {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.api-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}
.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.api-table th {
  background: var(--bg-pill);
  padding: 8px 10px;
  text-align: left;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.api-table td {
  padding: 8px 10px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.api-table tbody tr:hover { background: var(--bg-pill); }
.api-table tbody tr:last-child td { border-bottom: none; }

/* Estado "Sin API disponible" — para servicios u opciones sin endpoint */
.dash-no-api {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  gap: 10px;
}
.dash-no-api-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.dash-no-api-icon svg { width: 28px; height: 28px; }
.dash-no-api h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dash-no-api p {
  margin: 0;
  max-width: 460px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.dash-no-api p strong { color: var(--accent); font-weight: 800; }
.dash-no-api p code {
  background: var(--bg-pill);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

/* "No hay resultados" — mano en pausa (la API respondió
   pero no encontró datos para el DNI consultado). */
.dash-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px 32px;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  animation: no-results-in 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes no-results-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-no-results-hand {
  width: 140px;
  height: 140px;
  display: block;
  /* Usa la imagen como máscara y pinta el color naranja del tema.
     Más limpio que filter() porque respeta la transparencia. */
  background-color: var(--accent);
  -webkit-mask-image: url('/assets/manodata/open-palm-v2.webp');
          mask-image: url('/assets/manodata/open-palm-v2.webp');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  filter: drop-shadow(0 4px 12px rgba(169,80,54, 0.20));
}
.dash-no-results h3 {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dash-no-results p {
  margin: 0;
  max-width: 460px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.dash-no-results p strong {
  color: var(--ink);
  font-weight: 800;
}
.dash-no-results-hint {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.dash-no-results-close {
  margin-top: 8px;
  background: var(--bg-pill);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.dash-no-results-close:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Banner de estado de API (cuando falla o avisa al usuario) */
.dash-api-banner {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
}
.dash-api-banner code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
}
.dash-api-banner strong { font-weight: 800; }
.dash-api-banner.is-info {
  background: rgba(169,80,54, 0.08);
  border: 1px solid rgba(169,80,54, 0.22);
  color: var(--accent);
}
.dash-api-banner.is-warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #B45309;
}
.dash-api-banner.is-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #DC2626;
}
[data-theme="dark"] .dash-api-banner code { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
[data-theme="dark"] .dash-api-banner.is-warn { color: #FCD34D; }
[data-theme="dark"] .dash-api-banner.is-error { color: #FCA5A5; }

@media (max-width: 1023px) {
  .dash-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-quick-head { flex-direction: column; align-items: stretch; }
  .dash-quick-recharge { width: fit-content; }
}
@media (max-width: 600px) {
  .dash-quick-grid { grid-template-columns: 1fr; }
}
.dash-novedades-card .dash-novedades-img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: fill;                 /* estira en lugar de recortar */
  transform: scaleX(1.015);         /* estira un pelincito mínimo */
  transform-origin: right center;   /* anclado a la derecha → se extiende a la izquierda */
}

/* Novedades placeholder */
.dash-novedades { margin-bottom: 0; }
.dash-novedades-card {
  display: flex;                  /* CLAVE: flex (no block) para que el perf-card se estire */
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
}
/* Hover sin movimiento — el usuario pidió que los cuadritos no se muevan */
.dash-novedades-placeholder {
  aspect-ratio: 16 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F2F2F2 0%, #E8E8E8 100%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.dash-novedades-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: fill;
}

/* ===== Estudio de búsquedas (gráfico de barras) ===== */
.dash-usage-wrap { display: flex; flex-direction: column; }
.dash-usage-chart {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.dash-usage-chart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.dash-usage-chart-item {
  display: grid;
  grid-template-columns: 36px minmax(110px, 1fr) minmax(0, 2fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.dash-usage-chart-item:last-child { border-bottom: 0; }
.dash-usage-chart-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-usage-chart-icon svg { width: 18px; height: 18px; }
.dash-usage-chart-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dash-usage-chart-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--bg-pill);
  overflow: hidden;
  min-width: 60px;
}
.dash-usage-chart-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #cf8065 0%, #a95036 70%, #91422e 100%);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(169,80,54, 0.22);
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-usage-chart-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 78px;
}
.dash-usage-chart-pct {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 44px;
}

/* Historial reciente — lista limpia con icono + rerun en hover */
.dash-recent { margin-bottom: 24px; }
.dash-history {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.dash-history-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 100ms;
}
.dash-history-item:last-child { border-bottom: 0; }
.dash-history-item:hover { background: var(--bg-pill); }

.dash-history-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-2);
  transition: background-color 150ms, color 150ms;
}
.dash-history-item:hover .dash-history-icon {
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
}
.dash-history-icon svg { width: 18px; height: 18px; }

.dash-history-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dash-history-svc { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.dash-history-meta { font-size: 12px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-history-cost {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Antes el cost se ocultaba en hover para dejar lugar al botón "re-ejecutar".
   Ahora se queda visible (no se opaca nada al pasar el mouse). */

.dash-history-rerun {
  position: absolute;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: var(--bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 150ms, transform 150ms, background-color 150ms;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.dash-history-rerun svg { width: 14px; height: 14px; }
.dash-history-item:hover .dash-history-rerun { opacity: 1; transform: translateX(0); }
.dash-history-rerun:hover { background: var(--accent); color: #FFFFFF; }

/* ===== Formulario activo ===== */
.dash-form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.dash-form-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dash-form-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(169,80,54, 0.08) 0%, rgba(169,80,54, 0.16) 100%);
  border: 1px solid rgba(169,80,54, 0.20);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(169,80,54, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dash-form-icon svg { width: 24px; height: 24px; }
/* Cuando es logo oficial de entidad: fondo blanco para que el logo respire */
.dash-form-icon.has-logo {
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dash-form-icon-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.dash-form-meta { flex: 1; min-width: 0; }
.dash-form-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dash-form-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.dash-form-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  text-transform: uppercase;
}
.dash-form-desc { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.dash-form-cost {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFF8F4 0%, #FFEDE3 100%);
  color: var(--accent);
  border: 1px solid rgba(169,80,54, 0.20);
}

.dash-form { display: flex; flex-direction: column; gap: 10px; }

.dash-field { display: flex; flex-direction: column; gap: 4px; }
.dash-field[hidden] { display: none !important; }
.consulta-integrada-field {
  margin-bottom: 2px;
  padding: 12px;
  border: 1px solid rgba(169,80,54, .22);
  border-radius: 12px;
  background: rgba(169,80,54, .045);
}
.consulta-integrada-field .dash-select { background-color: var(--bg); }
.consulta-integrada-help {
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.4;
}
.consulta-integrada-help[hidden] { display: none !important; }

/* Selector de consultas inspirado en shadcn/ui. El select nativo permanece
   disponible para FormData, pero la interaccion visible usa este listbox. */
.ui-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ui-select {
  position: relative;
  width: 100%;
}
.ui-select-trigger {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.ui-select-trigger:hover { background: var(--bg-pill); }
.ui-select-trigger:focus-visible,
.ui-select.is-open .ui-select-trigger {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(169,80,54, .28);
}
.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}
.ui-select.is-open .ui-select-chevron { transform: rotate(180deg); }
.ui-select-content {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  animation: ui-select-in 120ms ease-out;
}
.ui-select-content[hidden] { display: none !important; }
@keyframes ui-select-in {
  from { opacity: 0; transform: translateY(-3px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ui-select-label {
  padding: 7px 8px 5px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.ui-select-label:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.ui-select-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 7px 34px 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.ui-select-item.is-active,
.ui-select-item:hover {
  background: var(--bg-pill);
}
.ui-select-item.is-selected {
  color: var(--accent);
  font-weight: 650;
}
.ui-select-check {
  position: absolute;
  right: 10px;
  top: 50%;
  display: none;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}
.ui-select-item.is-selected .ui-select-check { display: block; }
.ui-select-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .ui-select-trigger,
[data-theme="dark"] .ui-select-content {
  background: var(--bg-pill);
  border-color: var(--line);
}
[data-theme="dark"] .ui-select-item.is-active,
[data-theme="dark"] .ui-select-item:hover {
  background: rgba(255, 255, 255, .075);
}
.dash-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.dash-input,
.dash-select {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid #D8D8D8;
  border-radius: 10px;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.dash-input::placeholder { color: var(--ink-3); }
.dash-input:hover,
.dash-select:hover { border-color: #BFBFBF; }
.dash-input:focus,
.dash-select:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--bg);
}
.dash-input[type="file"] { padding: 9px 12px; }

.dash-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.dash-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.dash-radio:hover { border-color: #BFBFBF; }
.dash-radio input { accent-color: var(--accent); }
.dash-radio:has(input:checked) {
  border-color: var(--accent);
  background: rgba(169,80,54, 0.06);
  color: var(--accent);
}

/* ===== Tabs como chips radio con "bolita" =====
   En lugar de un segmento agrupado (que confundía vs. los radios reales),
   ahora cada opción es una pill con una bolita al inicio que se rellena
   en naranja cuando está activa — consistente con .dash-radio. */
.dash-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.dash-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.dash-tabs button::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #BFBFBF;
  background: var(--bg);
  flex-shrink: 0;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.dash-tabs button:hover { border-color: #BFBFBF; }
.dash-tabs button.is-active {
  background: rgba(169,80,54, 0.06);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
.dash-tabs button.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}

.dash-form-hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}

.dash-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.dash-form-submit {
  height: 42px;
  padding: 0 26px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.25);
  transition: filter 150ms, transform 100ms, box-shadow 150ms;
}
.dash-form-submit:hover { filter: brightness(0.94); box-shadow: 0 6px 16px rgba(169,80,54, 0.34); }
.dash-form-submit:active { transform: scale(0.98); }
.dash-form-submit:disabled { opacity: 0.55; cursor: progress; transform: none; }
.dash-form-reset {
  height: 42px;
  padding: 0 18px;
  background: transparent;
  color: var(--ink-2);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 100ms;
}
.dash-form-reset:hover { color: var(--ink); }

/* ===== Loader de la mano ===== */
.dash-form-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
/* Sin resultado visible no hay nada que enmarcar: evita la "píldora vacía"
   debajo del formulario antes de la primera búsqueda. */
.dash-form-result:not(:has(:not([hidden]))) { display: none; }
/* Si el resultado viene de una API real, padding mínimo (el contenido
   ya tiene sus propios márgenes) */
.dash-form-result:has(.dash-result-card) {
  padding: 12px;
}

/* ===== Guía de pasos (imágenes) bajo el formulario =====
   Las 4 imágenes (assets/pasos/paso1..4.png) se muestran en grilla.
   Se ocultan al hacer la búsqueda y reaparecen al cambiar de servicio. */
.dash-form-guide {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  animation: guide-in 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dash-form-guide[hidden] { display: none; }
html[data-guides="off"] .dash-form-guide { display: none !important; }
@keyframes guide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.dash-form-guide-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.dash-form-guide-grid[hidden] { display: none !important; }
.dash-form-guide.is-collapsed { padding-bottom: 0; }

.dash-form-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.dash-form-guide-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Tarjetas de la guía "Cómo usar": estáticas, sin animación al pasar el cursor. */

/* Pasos del tutorial nativo (sin imágenes) */
.dash-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dash-guide-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(169,80,54, 0.30);
}
.dash-guide-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dash-guide-desc {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.35;
}
.dash-guide-mock {
  position: relative;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  font-size: 11px;
}

/* Cursor pegado al elemento al que apunta (estático) */
.dash-guide-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
  z-index: 5;
}

.dash-guide-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-guide-flabel {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.dash-guide-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.dash-guide-select svg { width: 12px; height: 12px; color: var(--accent); }
.dash-guide-select .dash-guide-cursor { right: -4px; top: 50%; }

.dash-guide-dropdown {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.dash-guide-dropdown li {
  position: relative;
  padding: 4px 8px;
  font-size: 10.5px;
  border-radius: 4px;
  color: var(--ink);
}
.dash-guide-dropdown li.is-highlight {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.dash-guide-dropdown li.is-highlight .dash-guide-cursor { right: -4px; top: 50%; }

.dash-guide-input {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  min-height: 24px;
}
.dash-guide-caret {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--accent);
  margin-left: 2px;
}

/* Mock de input tipo file (Reconocimiento facial, etc.) */
.dash-guide-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  min-height: 24px;
}
.dash-guide-file svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.dash-guide-file span {
  color: var(--ink);
}

.dash-guide-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-guide-btn {
  position: relative;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.dash-guide-btn .dash-guide-cursor { right: -6px; bottom: -4px; }
.dash-guide-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}

.dash-guide-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
}
.dash-guide-loader svg {
  width: 36px; height: 36px;
  color: var(--accent);
  opacity: 0.9;
}
/* En las guías la mano es una referencia visual completamente estática. */
.dash-guide-loader-hand {
  width: 40px !important;
  height: auto !important;
  color: var(--accent);
  overflow: visible;
  filter: drop-shadow(0 3px 8px rgba(169,80,54, 0.2));
  animation: none !important;
  transform: none !important;
}
.dash-guide-loader .hand-loader-trail {
  animation: none !important;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0.62;
}
.dash-guide-loader span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.dash-guide-result {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-guide-result > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.dash-guide-result > header strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}
.dash-guide-result > header span {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  border-radius: 999px;
}
.dash-guide-result-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-guide-result-rows > div {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
}
.dash-guide-result-rows span { color: var(--ink-3); font-weight: 600; }
.dash-guide-result-rows strong { color: var(--ink); font-weight: 800; }
.dash-guide-geo-map {
  position: relative;
  min-height: 70px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #e8ece7;
}
.dash-guide-geo-map svg { display: block; width: 100%; height: 70px; }
.dash-guide-geo-map > strong {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(18, 24, 31, 0.78);
  color: #fff;
  font-size: 8px;
  line-height: 1.2;
}
.dash-guide-map-land { fill: #e5ebe3; }
.dash-guide-map-road { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.dash-guide-map-road.is-main { stroke: #ffd18a; stroke-width: 11; }
.dash-guide-map-street { fill: none; stroke: #c9d0c8; stroke-width: 2; stroke-linecap: round; }
.dash-guide-map-pulse { fill: rgba(169,80,54, 0.18); stroke: rgba(169,80,54, 0.35); }
.dash-guide-map-pin { fill: var(--accent); }
[data-theme="dark"] .dash-guide-geo-map { border-color: #3a3e46; filter: brightness(0.78) saturate(0.8); }
.dash-guide-result > footer {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.dash-guide-mini-btn {
  position: relative;
  flex: 1;
  background: var(--bg-pill);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.dash-guide-mini-btn.is-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dash-guide-mini-btn .dash-guide-cursor { right: -4px; bottom: -4px; }
.dash-form-guide-card img {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 320px;
  object-fit: fill;
}

/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 900px) {
  .dash-form-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dash-form-guide-grid { grid-template-columns: 1fr; }
}

.hand-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 20px;
}
.hand-loader-svg {
  /* La mano permanece quieta — sólo el borde se anima. */
  width: 76px;
  height: 94px;
  /* overflow: visible es CLAVE — el stroke de 38px se centra en el path,
     así que 19px se salen del viewBox por todos los bordes (arriba,
     abajo, izquierda, derecha). Sin esto, el trail se ve recortado. */
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(169,80,54, 0.18));
}
.hand-loader-fill {
  fill: var(--accent);
  opacity: 0.18;
}
.hand-loader-trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 38;        /* viewBox grande → trazo grueso para verse */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 1;    /* evita "puntitos" en esquinas cerradas */
  /* pathLength="100" normaliza el contorno: 22% visible, 78% invisible.
     El offset corre de 0 a -100 → el trail recorre el perímetro en bucle. */
  stroke-dasharray: 22 78;
  animation: hand-trail 1.8s linear infinite;
}
@keyframes hand-trail {
  to { stroke-dashoffset: -100; }
}

.hand-loader-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.hand-loader-dots span {
  display: inline-block;
  animation: dot-blink 1.4s ease-in-out infinite;
}
.hand-loader-dots span:nth-child(1) { animation-delay: 0s; }
.hand-loader-dots span:nth-child(2) { animation-delay: 0.18s; }
.hand-loader-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot-blink {
  0%, 70%, 100% { opacity: 0.25; }
  35%           { opacity: 1;    }
}

/* ===== Resultado mock ===== */
.dash-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.dash-result-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #16A34A;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-result-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.dash-result-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.dash-result-meta strong { color: var(--ink); font-weight: 700; }
.dash-result-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-pill);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 150ms;
}
.dash-result-close:hover { background: #E8E8E8; }

.dash-result-body { padding: 4px 0 18px; }
.dash-result-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: start;
}
.dash-result-photo {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #E8E8E8, #F2F2F2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.dash-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.dash-row:last-child { border-bottom: 0; }
.dash-row-label { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.dash-row-value { font-size: 13px; color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.dash-result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dash-mini-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-mini-card span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.dash-mini-card strong {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.dash-result-summary {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  padding: 10px 14px;
  background: var(--bg-pill);
  border-radius: 8px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dash-table th {
  text-align: left;
  font-weight: 800;
  color: var(--ink-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-pill);
}
.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.dash-table tr:last-child td { border-bottom: 0; }

.dash-tree { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.dash-tree-node {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--bg);
}
.dash-tree-node.is-self {
  background: linear-gradient(135deg, #FFF8F4, #FFEDE3);
  border-color: rgba(169,80,54, 0.25);
  color: var(--accent);
}
.dash-tree-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.dash-code {
  background: #0A0A0A;
  color: #E5E5E5;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  padding: 16px;
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.5;
}

.dash-result-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.dash-btn-ghost {
  padding: 9px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.dash-btn-ghost:hover { background: var(--bg-pill); border-color: #BFBFBF; }

.dash-btn-danger {
  padding: 9px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #B91C1C;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.dash-btn-danger:hover { background: var(--danger-soft-bg); border-color: var(--danger-soft-border); color: var(--danger-soft-text); }

/* ============================================================
   Portal de APIs (servicio "apis") — tabs, tokens, playground, docs
   Mantiene la paleta del proyecto y reusa .dash-* donde tiene sentido.
   ============================================================ */

.api-portal { display: flex; flex-direction: column; gap: 22px; }

/* ---- Stats (créditos / tokens / endpoints) ---- */
.api-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.api-stat {
  padding: 16px 18px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.03);
}
.api-stat.is-primary {
  background: linear-gradient(135deg, #FFF8F4 0%, #FFEDE3 100%);
  border-color: rgba(169,80,54, 0.20);
}
.api-stat-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.api-stat-value {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-top: 2px;
}
.api-stat.is-primary .api-stat-value { color: var(--accent); }
.api-stat-link { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.api-stat-link:hover { color: var(--accent-2); text-decoration: underline; }
.api-stat-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 4px; }

/* ---- Tabs nav ---- */
.api-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 0 2px;
  margin: 4px 0 0;
  overflow-x: auto;
}
.api-nav button {
  position: relative;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.api-nav button:hover { color: var(--ink); }
.api-nav button.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- Sección genérica ---- */
.api-panel { display: flex; flex-direction: column; gap: 18px; }
.api-section { display: flex; flex-direction: column; gap: 16px; }
.api-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.api-section-head h3 {
  margin: 4px 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.api-section-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 640px;
}
.api-section-desc code {
  background: var(--bg-pill);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--ink);
}

/* ---- Tabla de tokens ---- */
.api-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.api-tokens-table { width: 100%; }
.api-tokens-table th { padding: 12px 14px; }
.api-tokens-table td { padding: 14px; vertical-align: middle; }
.api-tok-name { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.api-tok-prefix {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-pill);
  color: var(--ink-2);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.api-tok-actions { text-align: right; white-space: nowrap; }
.api-tok-actions .dash-btn-ghost,
.api-tok-actions .dash-btn-danger { margin-left: 6px; }

.api-empty {
  padding: 26px !important;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
}

/* ---- Pills de estado / método ---- */
.api-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.api-pill-ok  { background: rgba(34, 197, 94, 0.12); color: #15803D; }
.api-pill-off { background: rgba(10, 10, 10, 0.06);  color: var(--ink-2); }

.api-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.api-method-get  { background: rgba(34, 197, 94, 0.12); color: #15803D; }
.api-method-post { background: rgba(169,80,54, 0.14); color: var(--accent); }
.api-method-put  { background: rgba(59, 130, 246, 0.14); color: #1D4ED8; }
.api-method-del  { background: rgba(220, 38, 38, 0.12); color: #B91C1C; }

/* ---- Banner de token recién creado ---- */
.api-token-banner {
  border: 1px solid rgba(169,80,54, 0.30);
  background: linear-gradient(135deg, #FFF8F4 0%, #FFEDE3 100%);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.api-token-banner-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.api-token-banner-head strong { font-size: 13.5px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.api-token-banner-head span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.api-token-banner-body {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.api-token-banner-body code {
  flex: 1;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
  word-break: break-all;
}

/* ---- Form crear token ---- */
.api-create-form {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
}
.api-create-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* ---- Endpoints list ---- */
.api-ep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.api-ep-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: background-color 100ms;
}
.api-ep-item:last-child { border-bottom: 0; }
.api-ep-item:hover { background: var(--bg-pill); }
.api-ep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.api-ep-path {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-all;
}
.api-ep-desc { font-size: 12.5px; color: var(--ink-2); }
.api-ep-cost {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFF8F4, #FFEDE3);
  color: var(--accent);
  border: 1px solid rgba(169,80,54, 0.20);
  font-variant-numeric: tabular-nums;
}

/* ---- Playground ---- */
.api-pg-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 18px;
}
.api-pg-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.api-pg-params { display: flex; flex-direction: column; gap: 10px; }
.api-pg-params .dash-label:first-child { margin-bottom: 2px; }
.api-pg-meta {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}
.api-pg-run { width: 100%; margin-top: 4px; }

.api-pg-code {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.api-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.api-lang-tabs button { padding: 7px 12px; font-size: 12px; }
.api-code-block {
  margin: 0;
  white-space: pre;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
}

/* ---- Coloreado de sintaxis (paleta One Dark adaptada al brand) ---- */
.dash-code .hl-str   { color: #98C379; }                     /* strings */
.dash-code .hl-com   { color: #5C6370; font-style: italic; } /* comentarios */
.dash-code .hl-kw    { color: #C678DD; font-weight: 600; }   /* keywords */
.dash-code .hl-tag   { color: #E06C75; font-weight: 700; }   /* <?php ?> */
.dash-code .hl-num   { color: #D19A66; }                     /* números */
.dash-code .hl-fn    { color: #61AFEF; }                     /* funciones */
.dash-code .hl-var   { color: #E06C75; }                     /* $vars PHP */
.dash-code .hl-flag  { color: #56B6C2; font-weight: 600; }   /* -X, -H */
.dash-code .hl-meth  { color: #a95036; font-weight: 800; }   /* GET/POST — brand */
.dash-code .hl-key   { color: #E06C75; }                     /* keys JSON */
.dash-code .hl-bool  { color: #C678DD; }                     /* true/false/null */

.api-pg-response {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.api-pg-response[hidden] { display: none; }
.api-pg-response .dash-code { margin: 0; }
.api-resp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.api-resp-meta { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* ---- Docs ---- */
.api-docs { gap: 22px; }
.api-doc-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.api-doc-block:last-child { border-bottom: 0; padding-bottom: 0; }
.api-doc-block h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.api-doc-block p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.api-doc-block code,
.api-doc-block p code {
  background: var(--bg-pill);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--ink);
}
.api-doc-block .dash-code { margin: 4px 0 0; }
.api-doc-block a { color: var(--accent); font-weight: 700; }
.api-doc-block a:hover { color: var(--accent-2); text-decoration: underline; }

.api-doc-eplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.api-doc-eplist li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.api-doc-eplist li code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  padding: 0;
}
.api-doc-cost {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.api-doc-desc {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1199px) {
  .dash-content { padding: 28px; }
  .dash-header-inner { padding: 0 20px; }
}
@media (max-width: 1023px) {
  .dashboard-main { grid-template-columns: 208px 1fr; }
  .dash-content { padding: 24px; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-stats .dash-stat-card.is-primary { grid-column: 1 / -1; }
  .dash-chip-role { display: none; }
  /* En móvil mantiene el botón redondo de 36×36 con el ícono visible */
  .api-pg-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Hamburger toggle — visible solo en móvil/tablet baja.
   En desktop el sidebar siempre está abierto y el botón se oculta.
   ============================================================ */
.dash-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease;
}
.dash-menu-toggle svg { width: 22px; height: 22px; }
.dash-menu-toggle:hover { background: var(--bg-pill); }
.dash-menu-toggle:active { transform: scale(0.94); }

/* Backdrop del drawer */
.dash-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
body.drawer-open .dash-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  /* ---- Header sticky con safe-area top ---- */
  .site-header.dash-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
    padding-top: env(safe-area-inset-top);
  }
  .dash-header-inner {
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .dash-menu-toggle { display: inline-flex; }
  .dash-logo-text { display: none; }
  .dash-logo .logo-mark { width: 30px; height: 30px; }
  .dash-logo { flex: 1; }                    /* logo al centro-izquierda */
  .dash-header-right { gap: 6px; }
  .dash-guides-toggle { min-height: 34px; padding: 6px 10px; font-size: 9px; }
  .dash-chip { height: 32px; padding: 0 10px; }
  .dash-chip-label { display: none; }
  .dash-chip svg { display: none; }
  .app-grid { display: none; }               /* el grid de fuentes no cabe */

  /* ---- Body con scroll natural y safe areas ---- */
  body.dashboard-page {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    display: block !important;               /* anula display: flex desktop */
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  body.drawer-open { overflow: hidden !important; }   /* lock body scroll */

  .dashboard-main {
    display: block !important;               /* anula grid desktop */
    flex: none !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    max-width: 100%;
  }

  /* ---- Sidebar como drawer deslizante desde la izquierda ----
     !important para ganar a la regla `body.dashboard-page .dash-sidebar
     { position: relative }` que tiene mayor specificidad. */
  body.dashboard-page .dash-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(80vw, 300px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 100;
    background: var(--bg);
    border-right: 1px solid var(--line);
    border-bottom: 0 !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.08);
    transform: translateX(-105%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 18px 14px calc(20px + env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.dashboard-page.drawer-open .dash-sidebar { transform: translateX(0); }

  .dash-content {
    padding: 12px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    height: auto !important;
    overflow: visible !important;
    min-width: 0;
  }

  /* ---- Welcome compacto ---- */
  .dash-welcome-head { margin-bottom: 14px; }
  .dash-welcome-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .dash-welcome-head h1 { font-size: 26px; margin-bottom: 4px; gap: 8px; }
  .dash-welcome-head p { font-size: 13px; line-height: 1.4; }

  /* ---- Stats horizontales compactas (3 cols pequeñas) ---- */
  .dash-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .dash-stats .dash-stat-card.is-primary { grid-column: auto; }
  .dash-stat-card { padding: 12px 10px; gap: 2px; border-radius: 10px; }
  .dash-stat-label { font-size: 10.5px; letter-spacing: 0; }
  .dash-stat-value { font-size: 18px; line-height: 1.05; margin-top: 2px; }
  .dash-stat-link { font-size: 10.5px; margin-top: 4px; }
  .dash-stat-sub { font-size: 10px; margin-top: 4px; }

  /* ---- Novedades más compacto ---- */
  .dash-novedades { margin-bottom: 18px; }
  .dash-section-head { margin-bottom: 8px; }
  .dash-section-head h2 { font-size: 14px; }
  .dash-section-eyebrow { font-size: 9px; margin-bottom: 2px; }
  .dash-novedades-placeholder { aspect-ratio: 16 / 7; }
  .dash-novedades-img { aspect-ratio: 16 / 9; }   /* relación ancha ahorra altura */
  /* Apilar Novedades + Búsquedas más usadas en móvil */
  .dash-novedades-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
  .dash-usage-chart { padding: 14px; gap: 10px; }
  .dash-usage-chart-head { flex-wrap: wrap; }
  .dash-usage-chart-tag { font-size: 11px; padding: 4px 10px; }
  .dash-usage-chart-item {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .dash-usage-chart-icon { width: 28px; height: 28px; }
  .dash-usage-chart-icon svg { width: 14px; height: 14px; }
  .dash-usage-chart-label { font-size: 11px; }
  .dash-usage-chart-bar { grid-column: 2 / 4; }
  .dash-usage-chart-count {
    font-size: 12px;
    text-align: right;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
  .dash-usage-chart-pct { display: none; }

  /* ---- Form-card compacto + centrado en móvil ---- */
  .dash-form-card {
    padding: 14px;
    border-radius: 14px;
    position: relative;             /* ancla del badge cost en la esquina */
  }
  .dash-form-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .dash-form-icon { width: 48px; height: 48px; }
  .dash-form-icon svg { width: 24px; height: 24px; }
  .dash-form-meta { text-align: center; }
  .dash-form-title { font-size: 18px; justify-content: center; }
  .dash-form-desc { font-size: 12.5px; }
  /* Badge de costo: fluye centrado bajo el título (el texto "Costo N monedas"
     es demasiado ancho para flotar en la esquina sin encimarse — bug corregido). */
  .dash-form-cost {
    position: static;
    align-self: center;
    padding: 4px 12px;
    font-size: 11.5px;
    margin: 2px 0 0;
  }

  .dash-form { gap: 12px; }
  .dash-field { align-items: stretch; }
  .dash-label { text-align: left; }

  /* En móvil los tabs ya tienen estilo de chip radio (definido fuera del
     media query) — sólo bumpeamos el touch target a 44px. */
  .dash-tabs button { min-height: 44px; padding: 10px 18px 10px 14px; }
  /* Los chips radio (SUNARP, DNI Virtual, Árbol) al mismo touch target que sus
     gemelos .dash-tabs — antes 39px, incómodos de tocar. */
  .dash-radio { min-height: 44px; }
  /* Avatar/dropdown de usuario del header: 38px → 40px, como el hamburguesa.
     (El .theme-toggle se ajusta más abajo, tras su regla base, por cascada.) */
  .dash-user-trigger { width: 40px; height: 40px; }

  /* ---- Acciones (Buscar / Limpiar) centradas y Buscar grande ---- */
  .dash-form-actions {
    margin-top: 6px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .dash-form-submit {
    height: 54px;
    min-height: 54px;
    padding: 0 36px;
    font-size: 16px;
    width: 100%;
    max-width: 360px;
    border-radius: 999px;
  }
  .dash-form-reset {
    width: 100%;
    max-width: 360px;
    height: 44px;
    text-align: center;
  }

  .dash-result-grid { grid-template-columns: 1fr; }
  .dash-result { padding: 14px; }
  .dash-form-result { padding: 16px; margin-top: 14px; }

  /* ---- Historial compacto ---- */
  .dash-recent { margin-bottom: 12px; }
  .dash-history-item { padding: 10px 12px; }
  .dash-history-svc { font-size: 12.5px; }
  .dash-history-meta { font-size: 11px; }

  /* ---- Touch targets del sidebar: cómodos para el dedo, jerarquía padre≥hijo ---- */
  .dash-svc-item,
  .dash-cat-single,
  .dash-cat-summary {
    min-height: 40px;
  }
  .cat-items .dash-svc-item {
    min-height: 36px;
    padding: 5px 12px 5px 14px;
  }
  .cat-items .svc-name { font-size: 13px; }
  .cat-items .svc-arrow { width: 14px; height: 14px; }

  /* ---- Inputs 16px para evitar zoom de iOS al focusear ---- */
  .dash-input,
  .dash-select,
  .login-card-form input[type="text"],
  .login-card-form input[type="password"],
  .login-form input[type="text"],
  .login-form input[type="password"] {
    font-size: 16px;
  }
  .dash-input,
  .dash-select { height: 48px; }
  .dash-form-submit,
  .dash-form-reset { min-height: 46px; }

  /* ---- Form-guide: 4 cuadritos pequeños 2×2 (sin carousel) ----
     Los cuadritos toman el aspect-ratio natural de las PNG (≈ 0.87) para
     que la imagen NO se recorte. */
  .dash-form-guide { margin-top: 12px; padding-top: 10px; }
  .dash-form-guide-eyebrow { text-align: center; margin-bottom: 10px; }
  .dash-form-guide-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    scroll-snap-type: none;
    margin: 0 auto;
    padding: 0;
    gap: 10px;
    max-width: 380px;
    justify-content: center;
  }
  .dash-form-guide-card {
    scroll-snap-align: none;
    aspect-ratio: auto;          /* la guía ahora es HTML de alto variable: que crezca */
    height: auto;
    overflow: visible;           /* antes recortaba dropdowns y botones del mock */
  }

  /* ---- API portal mobile ---- */
  .api-stats { grid-template-columns: 1fr; }
  .api-section-head { flex-direction: column; align-items: stretch; }
  .api-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .api-pg-grid { grid-template-columns: 1fr; }
  .api-code-block { font-size: 11px; }
  .api-pg-config { padding: 14px; }
  .dash-code { font-size: 11px; padding: 12px; }

  /* Tokens table → cards apiladas */
  .api-tokens-table thead { display: none; }
  .api-tokens-table,
  .api-tokens-table tbody,
  .api-tokens-table tr,
  .api-tokens-table td { display: block; width: 100%; }
  .api-tokens-table tr {
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  .api-tokens-table tr:last-child { border-bottom: 0; }
  .api-tokens-table td { padding: 4px 0; border-bottom: 0; }
  .api-tok-actions { text-align: left; padding-top: 8px !important; }
  .api-tok-actions .dash-btn-ghost,
  .api-tok-actions .dash-btn-danger { margin-left: 0; margin-right: 6px; min-height: 38px; }
  .api-ep-item { flex-wrap: wrap; }
  .api-ep-cost { order: 1; }
  .api-ep-item .dash-btn-ghost { width: 100%; margin-top: 6px; min-height: 40px; }
}


/* ============================================================
   Servicio detalle (servicio.html) — info de cada servicio
   ============================================================ */
body.servicio-page { background: var(--bg); }

.servicio-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--pad-x) 64px;
  position: relative;
  z-index: 1;
}

.servicio-back {
  display: block;
  width: fit-content;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 22px;
  transition: color 150ms ease;
}
.servicio-back:hover { color: var(--ink); }

.servicio-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.servicio-title {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.servicio-desc {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 560px;
}

.servicio-info-section {
  margin: 0 0 36px;
  padding: 26px 28px;
  background: var(--bg-pill);
  border-radius: 14px;
}
.servicio-info-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.servicio-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.servicio-info-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.servicio-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
}
.servicio-info-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg);
}

.servicio-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.btn-servicio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(169,80,54, 0.28);
  transition: filter 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.btn-servicio:hover {
  filter: brightness(0.94);
  box-shadow: 0 6px 18px rgba(169,80,54, 0.36);
}
.btn-servicio:active { transform: scale(0.98); }
.servicio-microcopy {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 767px) {
  .servicio-main { padding: 32px var(--pad-x) 56px; }
  .servicio-title { font-size: 26px; }
  .servicio-info-section { padding: 22px; }
}

/* ============================================================
   Soporte (soporte.html) — lista de casos estilo términos
   ============================================================ */
body.soporte-page {
  background: var(--bg);
}

.soporte-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 72px;
  position: relative;
  z-index: 1;
}

.soporte-head {
  margin-bottom: 36px;
  text-align: center;
}
.soporte-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.soporte-head h1 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.soporte-head p {
  margin: 0 auto;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 540px;
}

.soporte-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.soporte-item {
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.soporte-item-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 28px;
  padding-top: 3px;
}
.soporte-item-body { flex: 1; min-width: 0; }
.soporte-item-body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.soporte-item-body p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

.soporte-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}
.soporte-cta-lead {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.btn-soporte {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(169,80,54, 0.28);
  transition: filter 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.btn-soporte:hover {
  filter: brightness(0.94);
  box-shadow: 0 6px 18px rgba(169,80,54, 0.36);
}
.btn-soporte:active { transform: scale(0.98); }
.soporte-microcopy {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}

/* responsive */
@media (max-width: 767px) {
  .soporte-main { padding: 36px var(--pad-x) 56px; }
  .soporte-head h1 { font-size: 24px; }
  .soporte-item { gap: 16px; padding: 18px 0; }
  .soporte-item-body h3 { font-size: 15px; }
  .soporte-item-body p { font-size: 13.5px; }
  .btn-soporte { padding: 12px 24px; font-size: 14px; }
}

/* responsive */
@media (max-width: 1199px) {
  .plans-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .plans-grid { grid-template-columns: 1fr; gap: 12px; }
  .planes-main { padding: 32px var(--pad-x) 48px; }
  .planes-head h1 { font-size: 24px; }
}

/* ============================================================
   Login page (login.html) — card centrado tipo Snapchat
   ============================================================ */
body.login-page {
  background: #F4F4F6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px var(--pad-x);
  padding-bottom: 32px;
}

.login-modal-wrap {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.login-card {
  width: 100%;
  background: var(--bg);
  border-radius: 16px;
  padding: 40px 40px 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.login-card-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.login-card-logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login-card-title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.login-card-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card .signup-microcopy {
  margin-top: 18px;
}

.login-back-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  transition: color 150ms ease;
}
.login-back-link:hover { color: var(--ink); }

/* en login.html no hay info-bar */
body.login-page .info-bar { display: none; }
/* watermark con un pelín más de presencia sobre fondo gris claro */
body.login-page .brand-watermark { color: rgba(10, 10, 10, 0.05); }

/* card responsive */
@media (max-width: 480px) {
  .login-card { padding: 32px 24px 24px; border-radius: 12px; }
  .login-card-title { font-size: 22px; }
  .login-card-logo img { width: 60px; height: 60px; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199px) {
  .header-inner { gap: 16px; }
  .search-bar { max-width: 200px; }
  .icon-nav { gap: 24px; }
}

@media (max-width: 1023px) {
  .search-bar { display: none; }
  .icon-nav { gap: 20px; }
  .icon-nav-item .icon-label { display: none; }
  .icon-nav-item .icon-wrap { width: 32px; height: 32px; }
  .icon-nav-item .icon-wrap svg { width: 26px; height: 26px; }
  .badge { top: -8px; right: -14px; font-size: 7px; padding: 2px 5px; }
  .home { gap: 32px; padding: 24px var(--pad-x); }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; --header-h: 60px; --info-bar-h: 64px; }

  /* Bloquear scroll horizontal en cualquier página — evita que algún
     elemento desbordado obligue al usuario a deslizar lateralmente. */
  html, body { overflow-x: hidden; max-width: 100%; }

  body {
    /* en móvil sí permitimos scroll si hace falta */
    min-height: auto;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .icon-nav { display: none; }
  .header-right .app-grid { display: none; }
  .header-right .btn-ghost { display: none; }
  .logo-mark { width: 36px; height: 36px; }

  .home {
    grid-template-columns: 1fr !important;   /* asegurar 1 columna en móvil */
    padding: 24px var(--pad-x);
    gap: 24px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .login-col, .hero-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;        /* contiene el overflow de las back-slides */
  }
  .hero-card {
    height: auto;
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .hero-carousel {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
  }

  /* Las "back slides" del carrusel salen del viewport (translateX 36/70 px)
     y desbordan en móvil. Las escondemos y dejamos sólo la slide activa. */
  .carousel-slide.is-back-1,
  .carousel-slide.is-back-2 {
    transform: scale(1) translateX(0);
    opacity: 0;
    pointer-events: none;
  }

  .login-block { max-width: 100%; }
  .login-block h1 { font-size: 24px; }

  .hero-content { padding: 22px; }
  .hero-title { font-size: 22px; max-width: 90%; }

  .info-bar-inner { padding: 10px var(--pad-x); gap: 10px; }
  .info-bar-icon { display: none; }
  .info-bar p { font-size: 12px; line-height: 1.4; }

  /* Cualquier publicidad flotante debe ocultarse en móvil — bloquea el layout */
  .ad-left { display: none !important; }
}

/* ============================================================
   Zoom 125% sólo en el dashboard en pantallas tipo PC (≥768px).
   El index.html, login.html, planes.html, etc. quedan al 100%.
   ============================================================ */
@media (min-width: 768px) {
  body.dashboard-page {
    zoom: 1.25;
    /* Compensamos: 100vh / 1.25 = 80vh — el body sigue ocupando la
       pantalla exacta. Sobrescribimos también min/max-height por la
       regla global `body { min-height: 100vh }`. */
    height: calc(100vh / 1.25) !important;
    min-height: calc(100vh / 1.25) !important;
    max-height: calc(100vh / 1.25) !important;
  }
  /* Toda la pantalla de bienvenida (saludo + stats + novedades +
     historial) queda al tamaño original. zoom: 0.8 cancela el 1.25
     del dashboard (1.25 * 0.8 = 1.0). El form/consulta se mantiene 125%. */
  body.dashboard-page .dash-welcome {
    zoom: 0.8;
  }

  /* Index al 108% en pantallas tipo PC (≥768px). */
  body:not(.dashboard-page):not(.login-page):not(.servicio-page):not(.planes-page):not(.soporte-page) {
    zoom: 1.08;
    height: calc(100vh / 1.08) !important;
    min-height: calc(100vh / 1.08) !important;
    max-height: calc(100vh / 1.08) !important;
  }
}

/* ============================================================
   DARK MODE — overrides puntuales para componentes con colores
   hardcoded que no se pueden tokenizar fácil.
   ============================================================ */
[data-theme="dark"] .search-bar:hover { background: #24262B; }
[data-theme="dark"] .field input:hover { background: #24262B; border-color: #3A3D44; }
[data-theme="dark"] .sources-modal-close:hover { background: #2A2D33; }
/* .app-grid sin fondo en ambos modos: nada que sobreescribir aquí */
[data-theme="dark"] .dash-result-close:hover { background: #24262B; }
[data-theme="dark"] body.login-page { background: #0B0C0E; }

/* Logos oficiales (RENIEC, SUNAT…): el contenedor sigue blanco
   para preservar reconocimiento de marca; bordes oscuros para
   integrarse con el resto del UI dark. */
[data-theme="dark"] .dash-form-icon.has-logo,
[data-theme="dark"] .source-card-logo {
  background: #F4F4F6;
  border-color: #2A2C32;
}

/* Logo MANODATA del header con fondo oscuro: el PNG naranja
   se lee bien igual; nada que cambiar. */

/* Watermark dashboard: en dark queda más naranja-tenue */
[data-theme="dark"] body.dashboard-page .brand-watermark {
  color: rgba(169,80,54, 0.05);
}

/* Sombras más profundas en dark */
[data-theme="dark"] .dash-novedades-card,
[data-theme="dark"] .dash-stat-card,
[data-theme="dark"] .dash-form-card,
[data-theme="dark"] .dash-history-card,
[data-theme="dark"] .dash-result-card,
[data-theme="dark"] .dash-usage-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.40);
}

/* Inputs y campos: hover/focus que se vea en dark */
[data-theme="dark"] .field input,
[data-theme="dark"] .dash-input,
[data-theme="dark"] .dash-select,
[data-theme="dark"] textarea {
  background: var(--bg-pill);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .dash-input::placeholder { color: var(--ink-3); }

/* Imagen de la mano: en dark, una sutil "iluminación" */
[data-theme="dark"] .dash-logo .logo-mark {
  filter: drop-shadow(0 0 8px rgba(169,80,54, 0.25));
}

/* ============================================================
   RECARGA — sección dentro del dashboard
   ============================================================ */
.recarga-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recarga-top {
  display: grid;
  grid-template-columns: 320px 1fr;     /* créditos izq, hero der */
  gap: 14px;
  align-items: stretch;
}
.recarga-hero {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recarga-hero h1 {
  margin: 5px 0 6px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.recarga-hero p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 640px;
}
.recarga-hero strong { color: var(--accent); font-weight: 800; }
.recarga-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.recarga-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
}
.recarga-step svg { width: 13px; height: 13px; color: var(--accent); }

/* Reutiliza .plan-card de planes.html dentro del recarga-shell.
   8 planes en 4 columnas (2 filas limpias). Empujado hacia abajo
   con margin-top extra para separar visualmente del top. */
.recarga-shell .plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.recarga-shell .plan-card {
  padding: 16px 14px;
  gap: 8px;
  border-radius: 14px;
}
.recarga-shell .plan-card .plan-head { min-height: 24px; }
.recarga-shell .plan-card.has-plan-art .plan-head {
  top: 21px;
  right: 20px;
  min-height: 0;
}
.recarga-shell .plan-art {
  aspect-ratio: 5 / 2;
  border-radius: 10px;
}
.recarga-shell .plan-art img {
  object-position: center top;
}
.recarga-page .dash-content {
  overflow-y: auto;
  scrollbar-gutter: auto;
}
.recarga-shell .plan-card .plan-title { font-size: 18px; margin: 0; }
.recarga-shell .plan-card .plan-subtitle { font-size: 12px; margin: 0; }
.recarga-shell .plan-card .plan-price-amount { font-size: 20px; }
.recarga-shell .plan-card .plan-price-period { font-size: 11px; }
.recarga-shell .plan-card .plan-tagline { font-size: 11.5px; padding: 4px 9px; }
.recarga-shell .plan-card .plan-features { gap: 6px; }
.recarga-shell .plan-card .plan-features li { font-size: 12.5px; line-height: 1.35; }
.recarga-shell .plan-card .plan-features .plan-feature-icon { width: 16px; height: 16px; }
.recarga-shell .plan-card .plan-features .plan-feature-icon svg { width: 12px; height: 12px; }
.recarga-shell .plan-card .plan-cta { height: 40px; font-size: 13px; margin-top: 4px; }
.recarga-shell .plan-badge { font-size: 9.5px; padding: 3px 7px; }

/* Modo compacto: que los 8 paquetes quepan sin scroll (2 filas × 4 columnas).
   Se ocultan las viñetas de "features" (siguen en el HTML, es reversible) y se
   aprietan precio/tagline/espacios. */
.recarga-shell .plan-card .plan-features { display: none; }
.recarga-shell .plans-grid { margin-top: 10px; }
.recarga-shell .plan-card { padding: 13px 12px; gap: 5px; }
.recarga-shell .plan-card .plan-price { padding: 7px 12px; }
.recarga-shell .plan-card .plan-tagline { padding: 5px 9px; }
.recarga-shell .plan-card .plan-cta { height: 38px; margin-top: 2px; }
.recarga-shell .plan-card.is-elite .plan-cta {
  color: #2F2300;
  background: linear-gradient(135deg, #F6D45A 0%, #EABF2B 55%, #D89D0B 100%);
  box-shadow: 0 6px 15px rgba(216, 157, 11, 0.26);
}
.recarga-shell .plan-card.is-elite .plan-cta:hover {
  background: linear-gradient(135deg, #FFE376 0%, #F2CB3B 55%, #E0A713 100%);
}

@media (max-width: 1180px) {
  .recarga-shell .plans-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .recarga-shell .plans-grid { grid-template-columns: 1fr; }
}

/* Aside: créditos actuales con estado + guía */
.recarga-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recarga-credit-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.recarga-credit-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.recarga-credit-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.recarga-status-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.recarga-credit-value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.recarga-credit-coin {
  width: 22px;
  height: 22px;
  color: var(--accent);
  filter: drop-shadow(0 1px 3px rgba(169,80,54, 0.35));
}
.recarga-credit-value strong {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.recarga-credit-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.recarga-credit-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.recarga-credit-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 400ms ease;
}

/* Estados */
.recarga-status-critical .recarga-status-pill { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.recarga-status-critical .recarga-credit-bar span { background: #EF4444; }
.recarga-status-good .recarga-status-pill     { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.recarga-status-good .recarga-credit-bar span { background: #F59E0B; }
.recarga-status-excellent .recarga-status-pill { background: rgba(16, 185, 129, 0.14); color: #047857; }
.recarga-status-excellent .recarga-credit-bar span { background: #10B981; }

[data-theme="dark"] .recarga-status-critical .recarga-status-pill { background: rgba(248, 113, 113, 0.18); color: #FCA5A5; }
[data-theme="dark"] .recarga-status-good .recarga-status-pill { background: rgba(251, 191, 36, 0.18); color: #FCD34D; }
[data-theme="dark"] .recarga-status-excellent .recarga-status-pill { background: rgba(52, 211, 153, 0.18); color: #6EE7B7; }

.recarga-guide {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}
.recarga-guide h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.recarga-guide ol {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
}

/* ============================================================
   YAPE MODAL
   ============================================================ */
.yape-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.yape-modal.is-open { opacity: 1; pointer-events: auto; }
.yape-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Ventana de pago. */
.yape-modal-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 460px);
  gap: 16px;
  max-width: calc(100vw - 32px);
  transform: translateY(8px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* El dashboard usa zoom 125% en escritorio. Neutralizamos esa escala solo
   en este modal para que el QR y el formulario entren completos. */
@media (min-width: 881px) {
  .recarga-page .yape-modal-shell { zoom: 0.8; }
}
.yape-modal.is-open .yape-modal-shell { transform: translateY(0) scale(1); }

/* Stage del flow: contiene la vista actual.
   position: relative para que las vistas absolutas se apilen. */
.yape-flow-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.yape-flow-view {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  opacity: 1;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease;
}
/* Vista nueva entrando desde la derecha */
.yape-flow-view.is-entering-right {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  opacity: 0;
}
/* Vista vieja saliendo hacia la izquierda */
.yape-flow-view.is-leaving-left {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.yape-modal-card {
  position: relative;
  width: 100%;
  background: var(--bg);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
}
.yape-flow-view-verify .verify-support-box { margin-top: auto; }
.yape-flow-view-qr .yape-paid-btn { margin-top: auto; }

/* Tutorial lateral con los 4 pasos del Yape */
.yape-tutorial {
  background: var(--bg);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 100%;
  overflow-y: auto;
}
.yape-tutorial-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.yape-tutorial-head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-2);
}
/* Carousel del tutorial Yape */
.yape-tutorial-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.yape-tutorial-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1161 / 1354;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.yape-tutorial-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 350ms ease, transform 350ms ease;
  pointer-events: none;
}
.yape-tutorial-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.yape-tutorial-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yape-tutorial-num {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.45);
}
.yape-tutorial-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.30);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.yape-tutorial-arrow:hover {
  background: var(--accent-2);
  transform: scale(1.10);
  box-shadow: 0 6px 18px rgba(169,80,54, 0.45);
}
.yape-tutorial-arrow:active { transform: scale(0.94); }
.yape-tutorial-arrow svg { width: 18px; height: 18px; }

.yape-tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.yape-tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms ease, transform 150ms ease, width 220ms ease;
}
.yape-tutorial-dot:hover { background: var(--ink-3); }
.yape-tutorial-dot.is-active {
  background: var(--accent);
  width: 24px;
  border-radius: 999px;
}

@media (max-width: 880px) {
  .yape-modal { padding: 12px; align-items: flex-start; overflow-y: auto; }
  .yape-modal-shell {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 10px;
  }
  .yape-modal-card { padding: 16px; border-radius: 14px; }
  .yape-modal-head h2 { font-size: 16px; }
  .yape-modal-head p { font-size: 12px; line-height: 1.4; }
  .yape-tutorial { max-width: 100%; padding: 14px; border-radius: 14px; }
  .yape-tutorial-head h3 { font-size: 13px; }
  .yape-tutorial-head p { font-size: 11px; }

  /* QR más compacto */
  .yape-qr-mock { width: 170px; height: 170px; }
  .yape-qr-frame { padding: 14px; }

  /* Las cajas de monto se apilan verticalmente */
  .yape-amounts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .yape-amount-box { padding: 8px 10px; }
  .yape-amount-box strong { font-size: 16px; }

  /* Tutorial ocupa toda la columna en mobile */
  .yape-flow-stage { min-height: 0; }
  .yape-tutorial-arrow { width: 32px; height: 32px; }
  .yape-tutorial-num { width: 28px; height: 28px; font-size: 12px; }

  /* Verify chips compactos */
  .verify-readonly { padding: 8px 10px; }
  .verify-readonly span { font-size: 9px; }
  .verify-readonly strong { font-size: 14px; }
  .verify-name-display { font-size: 14px; }
  .verify-submit-btn { height: 42px; font-size: 13px; }
  .verify-support-box { padding: 10px 12px; }
  .verify-support-box p { font-size: 11.5px; }
  .verify-support-btn { height: 34px; padding: 0 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .verify-readonly-row { grid-template-columns: 1fr; gap: 8px; }
  .yape-modal-head { gap: 10px; padding-bottom: 10px; }
  .yape-modal-head h2 { font-size: 15px; }
}
.yape-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.yape-modal-head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ink); }
.yape-modal-head p { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.yape-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-pill);
  border: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.yape-modal-close:hover { background: var(--line); }
.yape-modal-close svg { width: 14px; height: 14px; }

.yape-qr-frame {
  background: linear-gradient(135deg, rgba(169,80,54, 0.06) 0%, rgba(169,80,54, 0.02) 100%);
  border: 1px solid rgba(169,80,54, 0.18);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}
.yape-qr-mock {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 8px;
  background:
    repeating-conic-gradient(#000 0% 25%, #fff 25% 50%) 0 0 / 14px 14px,
    #fff;
  position: relative;
  box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(169,80,54, 0.18);
}
.yape-qr-mock::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  background: #6B27D8;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--accent);
}
.yape-qr-mock.yape-qr-demo {
  box-sizing: border-box;
  padding: 9px;
  background: #FFFFFF;
  border: 1px solid rgba(116, 34, 132, 0.24);
  box-shadow: 0 0 0 4px #FFFFFF, 0 8px 24px rgba(116, 34, 132, 0.18);
}
.yape-qr-mock.yape-qr-demo::after { display: none; }
.yape-qr-code {
  display: block;
  width: 100%;
  height: 100%;
}
.yape-qr-demo-badge {
  position: absolute;
  top: -9px;
  right: -12px;
  padding: 5px 8px;
  color: #FFFFFF;
  background: #742284;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(116, 34, 132, 0.24);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.yape-qr-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 13px;
}
.yape-qr-identity strong { color: #742284; font-size: 15px; font-weight: 900; }
.yape-qr-identity span { color: var(--ink-2); font-size: 11.5px; }
.yape-qr-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.yape-qr-hint span { color: var(--accent); font-weight: 800; }
.yape-qr-hint strong { color: #742284; font-weight: 850; }

.yape-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.yape-amount-box {
  background: rgba(169,80,54, 0.04);
  border: 1px solid rgba(169,80,54, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}
.yape-amount-box span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.yape-amount-box strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}
[data-theme="dark"] .yape-amount-box {
  background: rgba(169,80,54, 0.08);
  border-color: rgba(169,80,54, 0.25);
}
.yape-paid-btn {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.25);
  transition: filter 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yape-paid-btn:hover { filter: brightness(0.96); box-shadow: 0 6px 18px rgba(169,80,54, 0.35); }
.yape-paid-btn:active { transform: scale(0.98); }

/* ============================================================
   VERIFY MODAL — paso 2 después de "Ya pagué"
   ============================================================ */
.verify-modal-card { max-width: 480px; }

.verify-readonly-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.verify-readonly {
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.verify-readonly:last-of-type { margin-bottom: 0; }
.verify-readonly-row { margin-bottom: 0; }
.verify-readonly-row .verify-readonly { margin-bottom: 0; }
.verify-readonly-row + .verify-readonly { margin-top: 10px; }
.verify-readonly span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.verify-readonly strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Caja naranja del NOMBRE DEL YAPERO con botón editar/guardar */
.verify-name-confirm {
  margin-bottom: 10px;
  background: rgba(169,80,54, 0.06);
  border: 1px solid rgba(169,80,54, 0.20);
}
.verify-name-confirm > span { color: var(--accent); }
[data-theme="dark"] .verify-name-confirm {
  background: rgba(169,80,54, 0.10);
  border-color: rgba(169,80,54, 0.28);
}

.verify-name-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.verify-name-display {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verify-name-input {
  flex: 1;
  display: none;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  outline: none;
}
.verify-name-input.is-error { border-color: #DC2626; }
.verify-name-edit-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease, transform 100ms ease;
}
.verify-name-edit-btn:hover { background: var(--accent-2); }
.verify-name-edit-btn:active { transform: scale(0.94); }
.verify-name-edit-btn svg { width: 14px; height: 14px; }
.verify-name-edit-btn .icon-check { display: none; }

/* Modo edición: oculta strong, muestra input, swap icono pencil → check */
.verify-name-confirm.is-editing .verify-name-display { display: none; }
.verify-name-confirm.is-editing .verify-name-input { display: block; }
.verify-name-confirm.is-editing .verify-name-edit-btn .icon-pencil { display: none; }
.verify-name-confirm.is-editing .verify-name-edit-btn .icon-check { display: inline; }

.verify-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.verify-field-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.verify-field-help {
  color: var(--ink-2);
  font-size: 10.5px;
  line-height: 1.35;
}
.verify-field input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.verify-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169,80,54, 0.15);
}
.verify-field input.is-error {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.verify-field input.is-readonly-input {
  background: var(--bg-pill);
  color: var(--ink-2);
  cursor: not-allowed;
}

.verify-submit-btn {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 55%, #91422e 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(169,80,54, 0.25);
  transition: filter 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.verify-submit-btn:hover { filter: brightness(0.96); box-shadow: 0 6px 18px rgba(169,80,54, 0.35); }
.verify-submit-btn:active { transform: scale(0.98); }

.verify-support-box {
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  margin-bottom: 0;
}
.verify-support-box p {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.verify-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  transition: background-color 150ms ease, transform 100ms ease;
}
.verify-support-btn:hover { background: #1FB855; }
.verify-support-btn:active { transform: scale(0.97); }
.verify-support-btn svg { width: 16px; height: 16px; }

.verify-tip {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

[data-theme="dark"] .verify-readonly { background: var(--bg-pill); }
[data-theme="dark"] .verify-support-box {
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.25);
}

@media (max-width: 880px) {
  .recarga-shell { gap: 14px; }
  /* En móvil: créditos actuales arriba, hero abajo, planes después.
     Se apila en columna y se reordena con grid order. */
  .recarga-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .recarga-aside { position: static; order: 1; }
  .recarga-hero { order: 2; padding: 14px 16px; }
  .recarga-hero h1 { font-size: 19px; }
  .recarga-hero p { font-size: 12.5px; margin-bottom: 8px; }
  .recarga-credit-card { padding: 10px 12px; }
  .recarga-credit-value strong { font-size: 22px; }
  .recarga-guide { padding: 10px 14px; }

  /* Plans en móvil: 2 columnas (no 1 — ocupan menos vertical), scroll vertical natural */
  .recarga-shell .plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
  }
  .recarga-shell .plan-card { padding: 12px 10px; gap: 6px; }
  .recarga-shell .plan-card .plan-title { font-size: 16px; }
  .recarga-shell .plan-card .plan-features li { font-size: 11.5px; }
}
@media (max-width: 480px) {
  /* Pantallas muy pequeñas: una sola columna de planes */
  .recarga-shell .plans-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Estrellitas / puntitos brillantes solo en MODO NOCHE
   • Single overlay fijo, pointer-events: none, z-index 0.
   • Animación CSS de opacity → GPU, sin JS por frame.
   • Se generan 1 sola vez con stars.js; CSS controla visibilidad.
   ============================================================ */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;               /* DETRÁS de todo el contenido */
  overflow: hidden;
  display: none;             /* oculto por default (modo claro) */
}
[data-theme="dark"] .stars-bg { display: block; }
/* Para que z-index: -1 quede confinado al body y no se "salga"
   del documento, el body crea su propio contexto de apilamiento. */
[data-theme="dark"] body { isolation: isolate; }

.stars-bg .star {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.3px);
  box-shadow: 0 0 4px currentColor;
  animation-name: star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1); }
}

/* En el dashboard, el watermark ya está en z-index: -1.
   Subimos las estrellitas un pelín por encima (-1 → 0 con
   isolation creando contexto en body para que sigan detrás del contenido). */

/* Reduce motion: respetar preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
  .stars-bg .star { animation: none; opacity: 0.6; }
}

/* ============================================================
   DARK MODE — adaptación inteligente de imágenes
   Estrategia:
   • Capturas/guías con fondo blanco → invertir colores
     manteniendo hues (técnica estándar para screenshots).
   • Foto/banner de Novedades → atenuar brillo y saturación
     para integrarse con la UI sin ser agresiva.
   • Logos oficiales (RENIEC, SUNAT…) → fondo blanco se
     mantiene (ya manejado), no se invierte para no alterar marca.
   • Mano del header → ya es naranja, glow sutil aplicado.
   ============================================================ */

/* Novedades nativa: el card respeta tokens del tema automáticamente.
   Solo aseguramos border y fondo en dark. */
[data-theme="dark"] .dash-novedades-card {
  background: var(--bg) !important;
  border-color: var(--line);
}
[data-theme="dark"] .dash-novedades-rank {
  background: var(--bg-pill);
}

/* Card de Saldo disponible (is-primary): gradiente naranja-oscuro
   que conserva la jerarquía visual sin quemar la vista. */
[data-theme="dark"] .dash-stat-card.is-primary {
  background: linear-gradient(135deg, rgba(169,80,54, 0.14) 0%, rgba(169,80,54, 0.06) 100%) !important;
  border-color: rgba(169,80,54, 0.30) !important;
}

/* Guías paso a paso: fondo PNG blanco → invertir + hue rotate
   para mantener tonos relativos. Funciona para screenshots. */
[data-theme="dark"] .dash-form-guide-card {
  background: var(--bg);
  border-color: var(--line);
}
[data-theme="dark"] .dash-guide-mock {
  background: var(--bg-soft);
}

/* Logos oficiales en cards de fuentes: ligero dim */
[data-theme="dark"] .source-card-logo img,
[data-theme="dark"] .dash-form-icon-img {
  filter: brightness(0.96) saturate(0.95);
}

/* Logo MANODATA del header: el PNG naranja vibra naturalmente
   en dark, pero un poco más de glow lo hace lucir premium */
[data-theme="dark"] .dash-logo img.logo-mark {
  filter: drop-shadow(0 0 10px rgba(169,80,54, 0.30));
}

/* Las portadas del login ya cuentan con variantes nocturnas diseñadas;
   no se aplican filtros que alteren fotos, color de marca o legibilidad. */
[data-theme="dark"] .ad-left img,
[data-theme="dark"] .publicidad img,
[data-theme="dark"] .slide-media { filter: none; }
[data-theme="dark"] .carousel-slide {
  background: var(--bg-soft);
}

/* Search bar / iconos del nav en index — adaptación general */
[data-theme="dark"] body:not(.dashboard-page) .search-bar { border-color: var(--line); }
[data-theme="dark"] .icon-nav-item { color: var(--ink); }
/* Iconos nativos: el SVG de línea va directo sobre la cabecera, SIN caja de fondo
   (antes tenía background var(--bg-pill) => se veía un cuadrado gris detrás). */
[data-theme="dark"] .icon-nav-item .icon-wrap { background: transparent; }

/* Logo MANODATA del header del index y del login:
   swap a mano naranja en dark */
.logo .logo-mark-dark,
.login-card-logo .logo-mark-dark { display: none; }
[data-theme="dark"] .logo .logo-mark-light,
[data-theme="dark"] .login-card-logo .logo-mark-light { display: none; }
[data-theme="dark"] .logo .logo-mark-dark,
[data-theme="dark"] .login-card-logo .logo-mark-dark { display: block; }

/* Info-bar inferior: en dark mode pasa a naranja (el negro
   choca demasiado con el fondo dark; el naranja la integra). */
[data-theme="dark"] .info-bar {
  background: var(--accent);
}
[data-theme="dark"] .info-bar-icon {
  color: #0A0A0A;
}
[data-theme="dark"] .info-bar-link {
  color: #0A0A0A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Loader de la mano (SVG): respeta currentColor pero damos
   un toque naranja al stroke en dark */
[data-theme="dark"] .mano-loader-overlay svg path,
[data-theme="dark"] .mano-loader svg path {
  stroke: var(--accent);
}

/* Resultados con fotos de personas (DNI, etc.): NO invertir */
[data-theme="dark"] .dash-result-photo,
[data-theme="dark"] .dash-result-card img:not(.dash-form-guide-img) {
  filter: brightness(0.96);
}

/* ============================================================
   Theme toggle — botón sol/luna en el header del dashboard
   ============================================================ */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-pill);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  padding: 0;
  position: relative;
  transition: background-color 180ms ease, transform 120ms ease, color 180ms ease;
}
.theme-toggle:hover {
  background: var(--line);
  transform: scale(1.04);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg.theme-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.5, 0, 0, 1.5);
}
/* Light mode → muestra luna (invita a cambiar a oscuro) */
.theme-toggle .theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
/* Dark mode → muestra sol (invita a cambiar a claro), naranja */
[data-theme="dark"] .theme-toggle .theme-icon-sun {
  opacity: 1; transform: rotate(0) scale(1); color: var(--accent);
}
[data-theme="dark"] .theme-toggle .theme-icon-moon {
  opacity: 0; transform: rotate(90deg) scale(0.6);
}
[data-theme="dark"] .theme-toggle:hover { background: #24262B; }

@media (max-width: 768px) {
  /* 36px → 40px: touch target del header al nivel del hamburguesa/avatar. */
  .theme-toggle { margin-right: 0; width: 40px; height: 40px; }
}

/* ============================================================
   Ripple en el botón theme-toggle (feedback inmediato al click)
   ============================================================ */
.theme-toggle { overflow: visible; }    /* permite que el ripple sobresalga */
.theme-toggle-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.45;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  animation: theme-ripple 650ms cubic-bezier(0.2, 0, 0, 1) forwards;
  z-index: 1;
}
@keyframes theme-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.55; }
  60%  { opacity: 0.18; }
  100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ============================================================
   View Transitions API — onda expansiva al cambiar tema
   El JS anima el ::view-transition-new(root) con clip-path
   circular desde la posición del click. Aquí solo desactivamos
   el fade default para que solo se vea el clip-path.
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}


/* ============================================================
   ESTILOS para el nuevo dashboard server-rendered (Jinja2)
   ============================================================ */

/* Welcome — nombre dinámico del usuario */
.dash-welcome-name {
  color: var(--accent);
  font-weight: 800;
}

/* Mensaje cuando no hay historial */
.dash-history-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
  list-style: none;
}

/* Items del historial dinámicos (los crea sesion.js) */
.dash-history-item {
  display: grid;
  /* 6 columnas: svc, dni, cost, status, time, actions */
  grid-template-columns: 1.4fr 1fr 0.7fr 0.7fr 0.7fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.dash-history-svc { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-history-dni { font-family: 'SF Mono', Menlo, monospace; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-history-cost {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

/* En viewport angosto (drawer abierto, móvil, sidebar tomando espacio),
   apilamos la fila en 2 líneas para que TODO sea legible. */
@media (max-width: 900px) {
  .dash-history-item {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "svc    cost    actions"
      "dni    status  time";
    row-gap: 4px;
    column-gap: 10px;
  }
  .dash-history-svc    { grid-area: svc; }
  .dash-history-dni    { grid-area: dni; }
  .dash-history-cost   { grid-area: cost;   text-align: right; }
  .dash-history-ok,
  .dash-history-fail   { grid-area: status; justify-self: center; }
  .dash-history-time   { grid-area: time;   text-align: right; }
  .dash-history-actions{ grid-area: actions; }
}
.dash-history-ok, .dash-history-fail {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0.04em;
}
.dash-history-ok { background: rgba(34, 197, 94, 0.14); color: rgb(22, 163, 74); }
.dash-history-fail { background: rgba(239, 68, 68, 0.14); color: rgb(220, 38, 38); }
.dash-history-time {
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

/* Sidebar mobile: la regla original (en @media max-width: 767px del file)
   maneja el drawer con body.drawer-open. NO duplicar aquí. */


/* ============================================================
   Renderers de resultados por API
   ============================================================ */

/* ============================================================
   FACIAL — Resultado de reconocimiento (foto consultada + ranking)
   ============================================================ */
.facial-result {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Header: foto consultada → (arrow) → mejor coincidencia (CENTRADO) */
.facial-result-head {
  display: flex;
  align-items: stretch;
  justify-content: center;     /* ← centrado horizontal */
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 0 8px;
}
.facial-query {
  flex: 0 1 240px;
  width: 240px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.facial-query.is-match {
  border-color: var(--accent);
  background: rgba(169,80,54, 0.05);
  box-shadow: 0 4px 16px rgba(169,80,54, 0.12);
}
.facial-query figcaption {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.facial-query.is-match figcaption {
  color: var(--accent);
}
.facial-query img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg);
}
.facial-query-empty {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 11px;
  font-style: italic;
}
.facial-query-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
/* PORCENTAJE — grande y visible, naranja */
.facial-query-pct {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* NOMBRE — completo, sin ellipsis (puede ser multi-línea) */
.facial-query-info strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: normal;          /* permite multi-línea */
  word-wrap: break-word;
  line-height: 1.3;
}
.facial-query-info span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  font-family: 'SF Mono', Menlo, monospace;
}
.facial-vs {
  align-self: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--accent);
  padding: 0 6px;
  user-select: none;
}

/* Header de la lista de coincidencias */
.facial-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.facial-list-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.facial-list-head span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}

/* Lista rankeada de coincidencias */
.facial-ranked {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.facial-ranked-row {
  display: grid;
  grid-template-columns: 32px 56px 1fr 1.4fr 60px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 150ms ease, transform 120ms ease;
}
.facial-ranked-row:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.facial-ranked-row.is-high {
  border-color: rgba(169,80,54, 0.30);
  background: rgba(169,80,54, 0.04);
}
.facial-ranked-pos {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.facial-ranked-row.is-high .facial-ranked-pos {
  color: var(--accent);
}
.facial-ranked-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-pill);
}
.facial-ranked-img.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 10px;
}
.facial-ranked-img.is-empty::after {
  content: '—';
}
.facial-ranked-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.facial-ranked-info strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: normal;          /* nombres completos sin truncar */
  word-wrap: break-word;
  line-height: 1.3;
}
.facial-ranked-dni {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  font-family: 'SF Mono', Menlo, monospace;
}
.facial-ranked-bar {
  height: 8px;
  background: var(--bg-pill);
  border-radius: 999px;
  overflow: hidden;
}
.facial-ranked-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #FF7C50 100%);
  border-radius: 999px;
  transition: width 320ms ease;
}
.facial-ranked-row.is-low .facial-ranked-bar span {
  background: var(--ink-3);
  opacity: 0.5;
}
.facial-ranked-row.is-mid .facial-ranked-bar span {
  background: linear-gradient(90deg, #F59E0B 0%, var(--accent) 100%);
}
.facial-ranked-pct {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.facial-ranked-row.is-low .facial-ranked-pct {
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .facial-ranked-row { grid-template-columns: 28px 48px 1fr 50px; }
  .facial-ranked-bar { display: none; }
  .facial-vs { transform: rotate(90deg); }
}

/* RENIEC — Foto al lado + lista de datos */
.api-reniec {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
.api-reniec-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-pill);
  border: 1px solid var(--line);
}
.api-reniec-data {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  margin: 0;
  font-size: 13px;
}
.api-reniec-data dt {
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  align-self: center;
}
.api-reniec-data dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 640px) {
  .api-reniec { grid-template-columns: 1fr; }
  .api-reniec-foto { max-width: 200px; margin: 0 auto; }
}

/* Bloque API genérico (JSON pretty-printed) */
.api-block {
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.api-block summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  padding: 4px 0;
}
.api-block .dash-code {
  margin-top: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  max-height: 360px;
  border: 1px solid var(--line);
}

/* Mensaje vacío dentro del resultado */
.dash-result-empty {
  text-align: center;
  padding: 14px;
  color: var(--ink-3);
  font-style: italic;
  font-size: 13px;
  margin: 0;
}


/* ============================================================
   C4B_PLANTILLA / Persona Plus — Visor de PDF embebido
   ============================================================ */
.api-c4b-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.api-c4b-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.api-c4b-head strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  display: block;
}
.api-c4b-msg {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: 2px;
  display: block;
}
.api-c4b-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: filter 150ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.api-c4b-download:hover { filter: brightness(0.92); transform: translateY(-1px); }
.api-c4b-download:active { transform: scale(0.97); }
.api-c4b-pdf {
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-pill);
}
@media (max-width: 720px) {
  .api-c4b-pdf { height: 480px; }
  .api-c4b-head { flex-direction: column; align-items: flex-start; }
}

/* Subtexto del loader (para servicios que tardan) */
.hand-loader-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}


/* ============================================================
   DNI_ELECTRONICO — Visualización del DNI virtual (anverso + reverso)
   ============================================================ */
.dni-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  padding: 6px 0;
}
.dni-card {
  margin: 0;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 150ms ease;
}
.dni-card:hover { border-color: var(--accent); }
.dni-card figcaption {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.dni-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--bg);
  display: block;
  object-fit: contain;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
}
.dni-card-dl {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: filter 150ms ease, transform 100ms ease;
}
.dni-card-dl:hover { filter: brightness(0.92); transform: translateY(-1px); }
.dni-card-dl:active { transform: scale(0.97); }


/* ============================================================
   MTC LICENCIA / PUNTOS / RECORD / PNP / ÁRBOL — renderers comunes
   ============================================================ */

/* Header común de servicios MTC/PUNTOS */
.api-mtc, .api-puntos, .api-record, .api-pnp, .api-arbol {
  display: flex; flex-direction: column; gap: 16px;
}
.api-mtc-head, .api-puntos-head, .api-record-head, .api-pnp-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px 18px;
  background: var(--bg-pill); border: 1px solid var(--line); border-radius: 12px;
}
.api-mtc-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 2px;
}
.api-mtc-head strong, .api-puntos-head strong, .api-record-head strong {
  font-size: 15px; font-weight: 800; color: var(--ink); display: block;
}
.api-mtc-meta {
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  display: block; margin-top: 2px;
  font-family: 'SF Mono', Menlo, monospace;
}
.api-mtc-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.api-flag {
  font-size: 10px; font-weight: 800; padding: 4px 10px;
  border-radius: 999px; letter-spacing: 0.04em;
  background: var(--bg); color: var(--ink-3); border: 1px solid var(--line);
}
.api-flag.is-on  { background: rgba(34,197,94,0.12); color: rgb(22,163,74); border-color: transparent; }
.api-flag.is-warn{ background: rgba(245,158,11,0.14); color: rgb(180,83,9);  border-color: transparent; }

/* Sección con título + contenido */
.api-mtc-section { display: flex; flex-direction: column; gap: 10px; }
.api-mtc-section h4 {
  margin: 0; font-size: 13px; font-weight: 800; color: var(--ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.api-mtc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.api-mtc-list li {
  padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.api-mtc-list li strong { color: var(--ink); }

/* Tablas genéricas */
.api-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.api-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.api-table th {
  text-align: left; padding: 10px 12px;
  background: var(--bg-pill); border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-weight: 800; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap;
}
.api-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 600;
}
.api-table tr:last-child td { border-bottom: 0; }
.api-table tr:hover td { background: var(--bg-pill); }
.api-table code {
  background: var(--bg-pill); padding: 2px 6px; border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace; font-size: 11px;
}
.api-state {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: var(--bg-pill); color: var(--ink-3);
}
.api-state.is-firm { background: rgba(239,68,68,0.12); color: rgb(220,38,38); }

/* PUNTOS — Cards de stats */
.api-puntos-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.api-puntos-stat {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.api-puntos-stat span {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.api-puntos-stat strong {
  font-size: 32px; font-weight: 900; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.api-puntos-stat.is-bad strong  { color: rgb(220,38,38); }
.api-puntos-stat.is-warn strong { color: rgb(217,119,6); }
.api-puntos-stat.is-bad         { border-color: rgba(239,68,68,0.30); background: rgba(239,68,68,0.04); }
.api-puntos-stat.is-warn        { border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.04); }
.api-puntos-msg {
  margin: 0; padding: 10px 14px;
  background: rgba(169,80,54,0.06); border-left: 3px solid var(--accent);
  border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.api-puntos-estado {
  font-size: 11px; font-weight: 900; padding: 6px 14px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.api-puntos-estado.is-ok  { background: rgba(34,197,94,0.14); color: rgb(22,163,74); }
.api-puntos-estado.is-bad { background: rgba(239,68,68,0.14); color: rgb(220,38,38); }

/* RECORD — dl de datos */
.api-record-data {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px 16px; margin: 0; font-size: 12.5px;
}
.api-record-data dt {
  color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em;
  align-self: center;
}
.api-record-data dd { margin: 0; color: var(--ink); font-weight: 700; word-break: break-word; }

/* PNP */
.api-pnp-no {
  text-align: center; padding: 32px 20px;
  background: var(--bg-pill); border: 1px solid var(--line); border-radius: 14px;
}
.api-pnp-no strong { display: block; font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.api-pnp-no p { margin: 0; font-size: 13px; color: var(--ink-2); }
.api-pnp-yes {
  background: linear-gradient(135deg, rgba(169,80,54,0.05), rgba(169,80,54,0.10));
  border: 1px solid rgba(169,80,54,0.30);
  border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.api-pnp-head { background: transparent; padding: 0; border: 0; }
.api-pnp-shield {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ÁRBOL genealógico */
.api-arbol-head {
  padding: 14px 18px; background: var(--bg-pill);
  border: 1px solid var(--line); border-radius: 12px;
}
.api-arbol-head strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.api-arbol-grupo h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px;
}
.api-arbol-grupo h4 span { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.api-arbol-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.api-arbol-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 150ms ease, transform 100ms ease;
}
.api-arbol-card:hover { border-color: var(--accent); transform: translateX(2px); }
.api-arbol-genero {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-pill); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; flex-shrink: 0;
}
.api-arbol-card strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.api-arbol-meta {
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  font-family: 'SF Mono', Menlo, monospace;
}

/* Árbol genealógico visual */
.api-tree-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.api-tree-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}
.api-tree-head p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.api-tree-pdf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(169,80,54, 0.18);
}
.api-tree-pdf:hover { filter: brightness(0.96); transform: translateY(-1px); }
.api-tree-canvas {
  min-width: 860px;
  overflow-x: auto;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #17191D;
}
.api-tree-level {
  display: grid;
  gap: 18px;
  align-items: start;
}
.api-tree-level.is-grandparents,
.api-tree-level.is-core {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.api-tree-level.is-core {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.9fr) minmax(220px, 1fr);
  align-items: center;
}
.api-tree-level.is-parents,
.api-tree-level.is-children {
  display: flex;
  justify-content: center;
}
.api-tree-couple {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 260px));
  gap: 12px;
}
.api-tree-center {
  display: flex;
  justify-content: center;
}
.api-tree-connector {
  position: relative;
  height: 28px;
}
.api-tree-connector::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: #D7DDE5;
}
.api-tree-connector::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  top: 50%;
  height: 1px;
  background: #D7DDE5;
}
.api-tree-connector.is-bottom::after { left: 42%; right: 42%; }
.api-tree-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.api-tree-stack h4,
.api-tree-extended h4,
.api-tree-pending h4 {
  margin: 0;
  color: #17191D;
  font-size: 12px;
  font-weight: 900;
}
.api-tree-stack-list {
  display: grid;
  gap: 8px;
}
.api-tree-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px;
  background: #fff;
  border: 1px solid #D7DDE5;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.api-tree-person.tone-self {
  min-width: 250px;
  border-color: rgba(169,80,54, 0.36);
  border-left-color: var(--accent);
  background: rgba(169,80,54, 0.06);
}
.api-tree-person.tone-parent { border-left-color: #C18B22; background: #FFF9E8; }
.api-tree-person.tone-paternal { border-left-color: #5A8FD8; background: #F3F8FF; }
.api-tree-person.tone-maternal { border-left-color: #4D9D68; background: #F4FBF5; }
.api-tree-person.tone-sibling { border-left-color: #8E72C7; background: #F7F3FF; }
.api-tree-person.tone-spouse { border-left-color: #D65D8A; background: #FFF4F8; }
.api-tree-person.tone-child { border-left-color: #2F9E8F; background: #F0FCF8; }
.api-tree-person.tone-cousin { border-left-color: #8C7A45; background: #FFF9E6; }
.api-tree-person.is-missing {
  border-style: dashed;
  background: #FAFAFA;
  color: #667085;
}
.api-tree-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(23, 25, 29, 0.06);
  color: #17191D;
  font-size: 17px;
  font-weight: 900;
}
.api-tree-photo {
  width: 46px;
  height: 58px;
  flex: 0 0 46px;
  object-fit: cover;
  object-position: center top;
  border-radius: 7px;
  border: 1px solid rgba(23, 25, 29, 0.14);
  background: #F3F4F6;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.10);
}
.api-tree-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.api-tree-role {
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.api-tree-info strong {
  color: #17191D;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.api-tree-info small {
  color: #667085;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}
.api-tree-more {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 10px;
  border: 1px dashed #D7DDE5;
  border-radius: 8px;
  background: #FAFAFA;
}
.api-tree-extended,
.api-tree-pending {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #D7DDE5;
  border-radius: 8px;
  background: #fff;
  color: #17191D;
}
.api-tree-extended-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.api-tree-pending p {
  margin: 0;
  color: #667085;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .api-tree-head {
    align-items: stretch;
    flex-direction: column;
  }
  .api-tree-pdf { width: 100%; }
  .api-tree-canvas {
    min-width: 780px;
    padding: 12px;
  }
  .api-tree-extended-grid {
    grid-template-columns: 1fr;
  }
}
@media print {
  .api-tree-pdf { display: none; }
  .api-tree-canvas { overflow: visible; }
}

/* Bloques de resultado por API — cada uno termina con su marca de agua */
.api-result-block {
  display: flex; flex-direction: column;
  padding: 0;
  margin-bottom: 18px;
}
.api-result-block:last-child { margin-bottom: 0; }
/* La marca de agua usa el estilo existente .api-block-head (semi-transparente) */
.api-result-block .api-block-head {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}


/* ============================================================
   RENIEC — Layout completo (foto + datos + biométricos + zoom)
   ============================================================ */
.api-reniec {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 14px;
}
.api-reniec-media { display: flex; flex-direction: column; gap: 12px; }
.api-photo, .api-firma {
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.api-photo figcaption, .api-firma figcaption {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
.api-photo .api-img-wrap {
  width: 100%; aspect-ratio: 3 / 4;
}
.api-firma .api-img-wrap {
  width: 100%; aspect-ratio: 3 / 2;
  background: var(--bg-pill);
}

/* Lista de datos en columnas */
.dash-result-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 18px;
  margin: 0;
  font-size: 12.5px;
}
.dash-result-fields > div {
  display: flex; flex-direction: column;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.dash-result-fields dt {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
}
.dash-result-fields dd {
  margin: 2px 0 0; font-weight: 700; color: var(--ink);
  word-break: break-word;
}

/* Grid de biométricos al pie del bloque RENIEC */
.api-biometrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--line);
}

/* Wrapper de imagen con lupita centrada (cursor zoom) */
.api-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-pill);
  cursor: zoom-in;
  border: 1px solid var(--line);
  transition: border-color 150ms ease, transform 100ms ease;
}
.api-img-wrap:hover { border-color: var(--accent); transform: translateY(-1px); }
.api-img-wrap img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.api-img-zoom-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease, background-color 150ms ease;
  background: rgba(0,0,0,0.04);
  color: var(--accent);
}
.api-img-wrap:hover .api-img-zoom-icon {
  opacity: 1;
  background: rgba(0,0,0,0.30);
  color: #FFFFFF;
}
.api-img-zoom-icon svg { width: 28px; height: 28px; }

/* Modo Policía: solo la foto centrada y grande */
.api-reniec-photo-only {
  display: flex; justify-content: center;
  padding: 8px 0 18px;
}
.api-reniec-photo-only .api-photo { width: 220px; }

/* Lightbox para ampliar imágenes */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.img-lightbox.is-open { display: flex; }
.img-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.img-lightbox-inner {
  position: relative;
  max-width: 92vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.img-lightbox-img {
  max-width: 100%; max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.50);
  object-fit: contain;
  background: #FFFFFF;
}
.img-lightbox-caption {
  color: #FFFFFF; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.img-lightbox-close {
  position: absolute; top: -42px; right: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #FFFFFF;
  border: 0; cursor: pointer; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, transform 100ms ease;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.32); transform: scale(1.05); }

/* Card de resultado SIN header — el botón [×] flota en la esquina */
.dash-result-card.is-headerless {
  position: relative;
  padding: 16px 18px;
}
.dash-result-close.is-floating {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.dash-result-close.is-floating:hover {
  background: var(--accent); color: #FFFFFF; transform: scale(1.05);
}

/* Visor PDF — sin header, botón discreto al pie centrado */
.api-pdf-wrap {
  display: flex; flex-direction: column;
  gap: 10px;
}
.api-pdf-embed {
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-pill);
  display: block;
}
.api-pdf-download {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-pill);
  color: var(--ink);
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 150ms ease, color 150ms ease,
              border-color 150ms ease, transform 100ms ease;
}
.api-pdf-download:hover {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* --- Ficha descargable (tarjeta compacta que acompaña a los datos) --- */
.api-ficha-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(0deg, rgba(169,80,54, 0.04), rgba(169,80,54, 0.04)),
    var(--bg-card, var(--bg-pill));
}
.api-ficha-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(169,80,54, 0.12);
}
.api-ficha-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.api-ficha-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.api-ficha-meta strong {
  font-size: 14.5px; color: var(--ink); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.api-ficha-file {
  font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.api-ficha-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.api-ficha-view, .api-ficha-dl {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--line); transition: all 140ms ease;
}
.api-ficha-view { color: var(--ink); background: var(--bg-pill); }
.api-ficha-view:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.api-ficha-dl { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }
.api-ficha-dl:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }
@media (max-width: 560px) {
  .api-ficha-card { flex-wrap: wrap; }
  .api-ficha-actions { width: 100%; }
  .api-ficha-view, .api-ficha-dl { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 720px) {
  /* El PDF se muestra en su aspect-ratio A4 (210/297) y la página
     completa cabe en la pantalla. El usuario hace pinch-zoom con
     los dedos sobre el visor para acercarse a detalles. */
  .api-pdf-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .api-pdf-embed {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 297;          /* A4 portrait */
    max-height: 78dvh;                /* deja aire para el botón "Descargar" */
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #FFFFFF;
    /* Permite que iOS Safari maneje el pinch-zoom nativo del PDF
       sin que la página lo capture. */
    touch-action: pinch-zoom;
  }
}
/* Dentro del modal de resultado (móvil), el PDF ya viene con ratio A4 */
@media (max-width: 767px) {
  body.has-modal-result #form-result .api-pdf-wrap {
    height: auto;
    padding: 4px 0 8px;
  }
  body.has-modal-result #form-result .api-pdf-embed {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 297;
    max-height: calc(100dvh - 140px);
  }
}


/* ============================================================
   Dark mode: quitar sombras negras de los renderers de resultado
   (en fondo oscuro las sombras negras crean halo raro).
   ============================================================ */
[data-theme="dark"] .dni-card img,
[data-theme="dark"] .api-img-wrap,
[data-theme="dark"] .api-photo .api-img-wrap,
[data-theme="dark"] .api-firma .api-img-wrap,
[data-theme="dark"] .facial-query img,
[data-theme="dark"] .facial-query.is-match,
[data-theme="dark"] .facial-match.is-top,
[data-theme="dark"] .api-pdf-embed,
[data-theme="dark"] .api-c4b-pdf,
[data-theme="dark"] .facial-ranked-img,
[data-theme="dark"] .facial-match-img {
  box-shadow: none !important;
}

[data-theme="dark"] .dash-no-results-hand {
  filter: drop-shadow(0 4px 12px rgba(169,80,54, 0.30));   /* solo naranja, sin sombra negra */
}


/* ============================================================
   Resultado de consulta como MODAL en mobile (< 768px)
   En desktop el resultado va debajo del form como antes.
   ============================================================ */

/* Botón cerrar — solo visible en mobile cuando el resultado está abierto */
.dash-result-mobile-close {
  display: none;     /* oculto por defecto (desktop) */
}

@media (max-width: 767px) {
  /* Cuando hay modal abierto, bloquea scroll del body y muestra backdrop */
  body.has-modal-result {
    overflow: hidden;
    position: relative;
  }
  body.has-modal-result::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 8998;
    animation: modal-fade-in 200ms ease-out;
  }
  @keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* El #form-result se convierte en modal flotante */
  body.has-modal-result #form-result {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 8999;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
    padding: 14px;
    padding-top: 56px;        /* espacio para el botón cerrar sticky */
    animation: modal-slide-up 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
    -webkit-overflow-scrolling: touch;
    /* Si el contenido es chico (loader / mensaje), lo centramos vertical.
       Si es grande (resultado completo), el scroll inicia desde arriba. */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Para contenido grande de resultado → alinear arriba para que el scroll
     muestre el inicio del card y no se pierda parte del contenido. */
  body.has-modal-result #form-result:has(.dash-result-card),
  body.has-modal-result #form-result:has(.dash-no-results) {
    justify-content: flex-start;
  }
  @keyframes modal-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* Botón cerrar visible y flotante en la esquina superior derecha */
  .dash-result-mobile-close {
    display: inline-flex !important;
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
    transition: background-color 150ms ease, transform 100ms ease;
  }
  .dash-result-mobile-close:hover {
    background: var(--accent);
    color: #FFFFFF;
    transform: scale(1.05);
  }
  .dash-result-mobile-close svg { width: 18px; height: 18px; }
}

[data-theme="dark"] body.has-modal-result::before {
  background: rgba(0, 0, 0, 0.70);
}


/* ============================================================
   Logo de la fuente oficial en el header de cada servicio
   ============================================================ */
.dash-form-source {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
}
.dash-form-source img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
[data-theme="dark"] .dash-form-source {
  background: #FFFFFF;   /* fondo blanco siempre para no perder los colores de los logos */
}


/* ============================================================
   Avatar personalizable (6 manos en /assets/avatars/)
   ------------------------------------------------------------
   El <span class="dash-user-avatar"> vive DENTRO del botón
   .dash-user-trigger (38×38, border-radius 50%). El span no tiene
   tamaño propio, así que para que la imagen se vea hay que hacer
   que llene 100% del botón padre y tapar el gradiente naranja
   original con la foto.
   ============================================================ */
.dash-user-trigger:has(.dash-user-avatar.has-image) {
  /* Quita el gradiente naranja cuando hay símbolo de mano */
  background: var(--bg-pill);
}
.dash-user-avatar.has-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-pill);
  /* Las iniciales quedan ocultas detrás de la imagen */
  color: transparent;
  text-shadow: none;
  font-size: 0;
}

/* Selector de avatar dentro del dropdown del user */
.dash-avatar-picker {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-avatar-picker-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dash-avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dash-avatar-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: var(--bg-pill);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-avatar-option:hover {
  transform: scale(1.04);
  border-color: rgba(169,80,54, 0.40);
}
.dash-avatar-option.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(169,80,54, 0.25);
}
.dash-avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Ranking de Top usuarios por créditos (reemplaza el chart viejo)
   Layout: card blanca → header + podio 3 cols + footer
   ============================================================ */
.dash-ranking-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* ---------- Header (badges + título + subtítulo) ---------- */
.dash-ranking-head { display: flex; flex-direction: column; gap: 4px; }
.dash-ranking-head-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.dash-ranking-tag {
  display: inline-flex;
  padding: 5px 14px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  border-radius: 999px;
}
.dash-ranking-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.dash-ranking-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
  animation: rank-live-pulse 1.6s ease-in-out infinite;
}
@keyframes rank-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.40); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.0); }
}
.dash-ranking-head h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.dash-ranking-head p {
  color: var(--ink-3);
  font-size: 13.5px;
  margin: 2px 0 0;
}

/* ---------- Podio (3 cards) ---------- */
.dash-ranking-podium {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 16px;
  align-items: end;
}
.dash-rank-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.dash-rank-card.is-winner {
  border: 2px solid #fbbf24;
  background: linear-gradient(180deg, #fff8ec 0%, var(--bg) 70%);
  transform: translateY(-12px);   /* posición base elevada del podio (no hover) */
  padding-top: 42px;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.16);
}

/* Medalla circular (esquina superior izquierda) */
.dash-rank-medal {
  position: absolute;
  top: -14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.dash-rank-medal[data-pos="1"] {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}
.dash-rank-medal[data-pos="2"] {
  background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.45);
}
.dash-rank-medal[data-pos="3"] {
  background: linear-gradient(135deg, #fdba74 0%, #c2410c 100%);
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.40);
}
/* Pequeñas cintas decorativas bajo la medalla */
.dash-rank-medal::before,
.dash-rank-medal::after {
  content: '';
  position: absolute;
  top: 70%;
  width: 7px;
  height: 14px;
  background: inherit;
  z-index: -1;
}
.dash-rank-medal::before { left: 6px;  transform: rotate(-14deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dash-rank-medal::after  { right: 6px; transform: rotate(14deg);  clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Avatar circular (símbolo de la mano) */
.dash-rank-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--line);
  background: var(--bg-pill);
}
.dash-rank-card.is-winner .dash-rank-avatar {
  width: 108px;
  height: 108px;
  border-color: #fbbf24;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30);
}
.dash-rank-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nombre */
.dash-rank-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 8px 0 0;
}
.dash-rank-card.is-winner .dash-rank-name { font-size: 19px; }

/* Pastilla OPERATIVO */
.dash-rank-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.10em;
}
.dash-rank-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

/* Label "CRÉDITOS TOTALES" */
.dash-rank-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 6px;
}

/* Número grande de créditos */
.dash-rank-credits {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}
.dash-rank-credits strong {
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
}
.dash-rank-card.is-winner .dash-rank-credits strong { font-size: 30px; }
.dash-rank-coin { width: 20px; height: 20px; display: inline-flex; }
.dash-rank-coin svg { width: 100%; height: 100%; }
.dash-rank-card.is-winner .dash-rank-coin { width: 22px; height: 22px; }

/* Pastilla con el delta semanal (+X esta semana) */
.dash-rank-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  margin-top: 6px;
}
.dash-rank-delta svg { width: 13px; height: 13px; }
.dash-rank-delta strong { font-weight: 800; }
.dash-rank-delta.dash-rank-delta-winner {
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
}

/* ---------- Footer (texto + CTA) ---------- */
.dash-ranking-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;             /* empuja al fondo si el ranking se estira */
}
.dash-ranking-foot-text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-ranking-foot-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;     /* centra el SVG 100% garantizado en ambos ejes */
  background: transparent;  /* solo la corona, sin recuadro */
  color: #F5B301;           /* corona amarilla / dorada */
  border-radius: 0;
  flex-shrink: 0;
}
.dash-ranking-foot-icon svg {
  width: 38px;
  height: 38px;
  display: block;
  /* fill directo en el SVG: gana al color heredado gris que le mete la regla
     .dash-ranking-foot-text span (el icono también es un span ahí dentro). */
  fill: #F5B301;
}
[data-theme="dark"] .dash-ranking-foot-icon svg { fill: #FACC15; }
.dash-ranking-foot-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.dash-ranking-foot-text span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.dash-ranking-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background-color 150ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.dash-ranking-cta:hover { background: rgba(169,80,54, 0.18); transform: translateY(-1px); }
.dash-ranking-cta:active { transform: translateY(0); }
.dash-ranking-cta svg { width: 15px; height: 15px; }

/* ---------- Dark mode tweaks ---------- */
[data-theme="dark"] .dash-rank-card.is-winner {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10) 0%, var(--bg) 70%);
}
[data-theme="dark"] .dash-ranking-foot-icon {
  background: transparent;
  color: #FACC15;   /* amarillo algo más brillante sobre fondo oscuro */
}

/* ============================================================
   Responsive — PODIO -> LEADERBOARD HORIZONTAL COMPACTO (<=900px)
   Cada .dash-rank-card pasa de columna centrada gigante a una FILA
   (grid 4 col x 2 filas): [medalla][avatar][nombre/estado][monedas/delta].
   El #1 se ubica arriba (order:-1) y hereda borde+gradiente+aro ORO de
   .is-winner (y su override dark ya existente) -> seguro claro Y oscuro.
   Markup/clases SIN cambios; el JS sigue llenando .dash-rank-name /
   .dash-rank-avatar img / .dash-rank-credits strong / .dash-rank-delta strong.
   El bloque de las 3 cards baja de ~690px a ~230px.
   ============================================================ */
@media (max-width: 900px) {

  /* Pila de filas: una columna, gap chico (antes 28px = alto excesivo) */
  .dash-ranking-podium {
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: stretch;
  }

  /* Card = FILA. Colocacion por LINEAS explicitas (no grid-areas):
     col1 medalla | col2 avatar | col3 nombre+estado (crece/trunca) | col4 monedas+delta.
     minmax(0,1fr) en la col central es imprescindible para el ellipsis. */
  .dash-rank-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
    padding: 10px 14px;
    text-align: left;
    border-radius: 14px;
  }

  /* Medalla: de position:absolute a EN FLUJO como columna de rango a la izquierda.
     1er hijo del DOM -> cae en col1, ocupa las 2 filas, centrada. Sin cintas. */
  .dash-rank-medal {
    position: static;
    top: auto; left: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 26px; height: 26px;
    font-size: 12px;
    box-shadow: none;
  }
  .dash-rank-medal::before,
  .dash-rank-medal::after { display: none; }

  /* Avatar compacto, col2, ocupa las 2 filas */
  .dash-rank-avatar {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 44px; height: 44px;
    border-width: 2px;
  }

  /* Nombre: fila 1 de la col central. Truncado fiable:
     min-width:0 (grid) + overflow:hidden + text-overflow:ellipsis + nowrap. */
  .dash-rank-name {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Estado OPERATIVO: fila 2 de la col central. overflow:hidden de blindaje. */
  .dash-rank-status {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    font-size: 9px;
    gap: 5px;
    letter-spacing: .08em;
  }

  /* Label "MONEDAS TOTALES": ruido en movil -> fuera */
  .dash-rank-label { display: none; }

  /* Monedas: fila 1 de la col derecha, alineado a la derecha.
     Numero en var(--accent), sin pastilla = coherente con desktop. */
  .dash-rank-credits {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    gap: 5px;
  }
  .dash-rank-credits strong { font-size: 19px; }
  .dash-rank-coin { width: 16px; height: 16px; }

  /* Delta semanal: fila 2 de la col derecha. .dash-rank-delta-winner intacto. */
  .dash-rank-delta {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    margin: 0;
    padding: 3px 9px;
    font-size: 10.5px;
    gap: 4px;
    white-space: nowrap;
  }
  .dash-rank-delta svg { width: 11px; height: 11px; }

  /* ---------- #1 GANADOR: fila mas alta y dorada (jerarquia clara) ----------
     Borde 2px oro + gradiente + box-shadow vienen de .is-winner base; el
     override de fondo oscuro ya existe en [data-theme="dark"] .is-winner.
     NO se pisa el fondo aqui (evita el bug de especificidad del gradiente 90deg). */
  .dash-rank-card.is-winner {
    order: -1;                 /* el 1° arriba de la pila */
    transform: none;           /* anula el translateY(-12px) del podio desktop */
    padding: 12px 16px;        /* anula el padding-top:42px base */
  }
  .dash-rank-card.is-winner .dash-rank-medal { width: 30px; height: 30px; font-size: 14px; }
  .dash-rank-card.is-winner .dash-rank-avatar { width: 56px; height: 56px; }
  .dash-rank-card.is-winner .dash-rank-name { font-size: 17px; }
  .dash-rank-card.is-winner .dash-rank-credits strong { font-size: 25px; }
  .dash-rank-card.is-winner .dash-rank-coin { width: 20px; height: 20px; }

  /* ---------- Footer / cabecera ---------- */
  .dash-ranking-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .dash-ranking-cta { justify-content: center; }
  .dash-ranking-head h2 { font-size: 18px; }
}

/* ============================================================
   ULTRA-ANGOSTO <=380px — podas de texto de bajo valor
   ============================================================ */
@media (max-width: 380px) {
  .dash-rank-card { column-gap: 9px; padding: 9px 11px; }

  .dash-rank-medal { width: 24px; height: 24px; font-size: 11px; }
  .dash-rank-avatar { width: 40px; height: 40px; }
  .dash-rank-name { font-size: 14px; }
  .dash-rank-status { font-size: 8.5px; letter-spacing: .06em; padding: 2px 7px; }

  .dash-rank-credits strong { font-size: 17px; }
  /* El numero naranja basta: se oculta la moneda para recuperar ancho */
  .dash-rank-coin { display: none; }

  /* Colapsa el texto suelto " esta semana" dejando solo "+0" (sin tocar HTML) */
  .dash-rank-delta { font-size: 0; gap: 0; padding: 3px 8px; }
  .dash-rank-delta strong { font-size: 11px; }

  /* Ganador algo mas apretado, sigue dominando la pila */
  .dash-rank-card.is-winner { padding: 11px 12px; }
  .dash-rank-card.is-winner .dash-rank-medal { width: 28px; height: 28px; }
  .dash-rank-card.is-winner .dash-rank-avatar { width: 52px; height: 52px; }
  .dash-rank-card.is-winner .dash-rank-name { font-size: 16px; }
  .dash-rank-card.is-winner .dash-rank-credits strong { font-size: 22px; }
  .dash-rank-card.is-winner .dash-rank-delta strong { font-size: 12px; }
}

/* ============================================================
   Cambios recientes (timeline dentro del card de Rendimiento)
   ============================================================ */
.dash-perf-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  /* Sin flex-grow aquí — todo el slack lo absorbe el footer con margin-top: auto.
     Así los items del timeline quedan agrupados arriba y el +34 fuentes baja
     hasta el fondo del card, alineado con el footer del ranking. */
}
.dash-perf-changes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-perf-changes-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 10.5px;
}
.dash-perf-changes-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: perf-changes-pulse 1.8s ease-in-out infinite;
}
@keyframes perf-changes-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
.dash-perf-changes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-perf-changes-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color 120ms ease;
}
.dash-perf-changes-list li:hover { background: var(--bg-pill); }
.dash-perf-change-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-perf-change-icon svg { width: 14px; height: 14px; }
.dash-perf-change-up {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
}
.dash-perf-change-info {
  background: rgba(59, 130, 246, 0.10);
  color: #3b82f6;
}
.dash-perf-change-new {
  background: rgba(169,80,54, 0.10);
  color: var(--accent);
}
.dash-perf-change-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-perf-change-body strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-perf-change-body span {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-perf-change-time {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   Empareja alturas del ranking y rendimiento — ambos cards
   absorben el alto disponible del grid y el contenido interior
   se distribuye con flex.
   ============================================================ */
.dash-ranking-wrap { height: 100%; }
.dash-perf-card    { height: 100%; }

/* En móvil/tablet, el orden cambia para mostrar primero el ranking */
@media (max-width: 900px) {
  .dash-novedades-row { grid-template-columns: 1fr; }
  .dash-perf-changes { gap: 6px; }
}

/* ============================================================
   MI CUENTA (/mi-cuenta) — settings del usuario
   ============================================================ */
.mc-shell {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mc-head h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mc-head p {
  color: var(--ink-3);
  font-size: 14px;
  margin: 0;
}

/* ---------- Tabs ---------- */
.mc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0;
  margin-bottom: 8px;
  overflow-x: auto;
}
.mc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  white-space: nowrap;
}
.mc-tab svg { width: 16px; height: 16px; }
.mc-tab:hover { color: var(--ink); }
.mc-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Panels (uno visible por vez) ---------- */
.mc-panel { display: none; flex-direction: column; gap: 16px; }
.mc-panel.is-active { display: flex; }
.mc-panel-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.mc-panel-head p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- Cards ---------- */
.mc-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.mc-card-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.mc-card-danger {
  border-color: rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.03);
}
[data-theme="dark"] .mc-card-danger { background: rgba(239, 68, 68, 0.06); }

/* ---------- Profile summary ---------- */
.mc-profile-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.mc-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.mc-profile-row:last-child,
.mc-profile-row:nth-last-child(2) {
  border-bottom: 0;
}
.mc-profile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mc-profile-row strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* ---------- Forms ---------- */
.mc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mc-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mc-field input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.mc-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169,80,54, 0.15);
}

/* ---------- Buttons ---------- */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms, color 120ms, transform 100ms;
  align-self: flex-start;
}
.mc-btn svg { width: 15px; height: 15px; }
.mc-btn-primary {
  background: var(--accent);
  color: #fff;
}
.mc-btn-primary:hover { filter: brightness(0.95); }
.mc-btn-primary:active { transform: scale(0.98); }
.mc-btn-secondary {
  background: var(--bg-pill);
  color: var(--ink);
}
.mc-btn-secondary:hover { background: var(--line); }
.mc-btn-danger {
  background: #ef4444;
  color: #fff;
}
.mc-btn-danger:hover { background: #dc2626; }

/* ---------- Avatar grid ---------- */
.mc-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.mc-avatar-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: var(--bg-pill);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms, transform 100ms, box-shadow 120ms;
}
.mc-avatar-option:hover {
  transform: scale(1.04);
  border-color: rgba(169,80,54, 0.40);
}
.mc-avatar-option.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169,80,54, 0.25);
}
.mc-avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Sesiones list ---------- */
.mc-sesiones-list,
.mc-logins-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-sess-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main actions"
    "meta actions";
  gap: 2px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: center;
}
.mc-sess-item.is-revoked { opacity: 0.55; }
.mc-sess-main    { grid-area: main; font-size: 13px; }
.mc-sess-meta    { grid-area: meta; font-size: 11.5px; color: var(--ink-3); }
.mc-sess-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }

.mc-sess-pill {
  display: inline-flex;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.mc-sess-pill.is-current { background: rgba(169,80,54, 0.12); color: var(--accent); }
.mc-sess-pill.is-active  { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.mc-sess-pill.is-revoked { background: var(--bg-pill); color: var(--ink-3); }

.mc-sess-close {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms;
}
.mc-sess-close:hover { background: var(--bg-pill); }

/* ---------- Logins list ---------- */
.mc-login-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.mc-login-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.mc-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.mc-login-icon.is-ok   { background: #22c55e; }
.mc-login-icon.is-fail { background: #ef4444; }
.mc-login-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-3);
  padding-left: 28px;
}

.mc-empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: 10px;
  list-style: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .mc-profile-summary { grid-template-columns: 1fr; }
  .mc-profile-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .mc-avatar-grid { grid-template-columns: repeat(3, 1fr); }
  .mc-sess-item {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "meta" "actions";
  }
  .mc-sess-actions { justify-content: flex-start; }
  /* Botón "Cerrar" de cada sesión activa: 29px → 40px, tocable sin fallar. */
  .mc-sess-close { min-height: 40px; padding: 8px 14px; }
}

/* ============================================================
   ADMIN PANEL (.adm-*) — Layout completo
   ============================================================ */
.adm-shell {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adm-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.adm-head h1 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.adm-head p { margin: 0; font-size: 14px; color: var(--ink-3); }
.adm-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-hint { margin: -8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Botones ---------- */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background-color 120ms, transform 100ms, opacity 120ms;
}
.adm-btn svg { width: 14px; height: 14px; }
.adm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.adm-btn:active:not(:disabled) { transform: scale(0.98); }
.adm-btn-primary {
  background: var(--accent);
  color: #fff;
}
.adm-btn-primary:hover:not(:disabled) { filter: brightness(0.95); }
.adm-btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
.adm-btn-secondary:hover:not(:disabled) { background: var(--bg-pill); }

/* ---------- KPI cards (home) ---------- */
.adm-kpi-grid {
  display: grid;
  /* 160px deja entrar los 4 KPIs en una sola fila en pantallas medianas
     (con 220px el cuarto caía solo a una 2ª fila desbalanceada) */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.adm-kpi {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-kpi-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.adm-kpi-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.adm-kpi-sub { font-size: 11.5px; color: var(--ink-3); }
.adm-kpi-primary {
  background: linear-gradient(135deg, rgba(169,80,54, 0.08), var(--bg));
  border-color: rgba(169,80,54, 0.30);
}
.adm-kpi-primary .adm-kpi-value { color: var(--accent); }

/* ---------- Alerts ---------- */
.adm-alerts { display: flex; flex-direction: column; gap: 8px; }
.adm-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  border-left: 4px solid;
}
.adm-alert.is-warn  { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
.adm-alert.is-info  { background: rgba(59, 130, 246, 0.08); border-color: #3b82f6; }
.adm-alert.is-error { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; }
.adm-alert-icon { font-size: 18px; }

/* ---------- Cards ---------- */
.adm-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adm-card-tight { padding: 0; gap: 0; overflow: hidden; }
.adm-card-head h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

/* ---------- 2 columnas ---------- */
.adm-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px) {
  .adm-2col { grid-template-columns: 1fr; }
}

/* ---------- Top lists ---------- */
.adm-top-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-top-item {
  display: grid;
  grid-template-columns: 1.3fr 2fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.adm-top-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-top-bar {
  height: 6px;
  background: rgba(169,80,54, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.adm-top-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #cf8065, #a95036);
  border-radius: 999px;
}
.adm-top-num { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent); }

/* ---------- Tools grid ---------- */
.adm-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.adm-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms, background-color 120ms;
}
.adm-tool:hover { border-color: var(--accent); background: var(--bg-pill); }
.adm-tool svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.adm-tool strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.adm-tool span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Filtros ---------- */
.adm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.adm-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.adm-filter > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.adm-filter input,
.adm-filter select {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}
.adm-filter input:focus,
.adm-filter select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(169,80,54, 0.15);
}

/* ---------- Table ---------- */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-pill);
  white-space: nowrap;
}
.adm-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.adm-table tbody tr:hover { background: var(--bg-pill); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table .adm-num     { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .adm-empty   { text-align: center; padding: 30px; color: var(--ink-3); font-size: 13px; }
.adm-actions-col        { width: 1%; white-space: nowrap; }
.adm-row-sub { font-size: 11px; color: var(--ink-3); }

.adm-table-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  background: var(--bg-pill);
}
.adm-pagination { display: flex; align-items: center; gap: 8px; }
.adm-pagination .adm-btn { padding: 5px 12px; font-size: 12px; }

/* ---------- Pills / status ---------- */
.adm-status, .adm-rol-pill, .adm-pill {
  display: inline-flex;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.adm-status.is-active    { background: rgba(34,197,94,0.12); color: #16a34a; }
.adm-status.is-suspended { background: rgba(245,158,11,0.12); color: #d97706; }
.adm-status.is-deleted   { background: rgba(239,68,68,0.12); color: #dc2626; }
.adm-rol-pill.is-user     { background: var(--bg-pill); color: var(--ink-3); }
.adm-rol-pill.is-vendedor { background: rgba(59,130,246,0.12); color: #3b82f6; }
.adm-rol-pill.is-admin    { background: rgba(169,80,54,0.12); color: var(--accent); }
.adm-pill.is-warning { background: rgba(245,158,11,0.12); color: #d97706; }
.adm-pill.is-success { background: rgba(34,197,94,0.12); color: #16a34a; }
.adm-pill.is-danger  { background: rgba(239,68,68,0.12); color: #dc2626; }
.adm-pill-you {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Action buttons (en cada fila) ---------- */
/* min-width: sin él la columna (width:1%) colapsa al ancho de UN botón y
   los 5 se apilan en vertical, estirando cada fila de la tabla. */
.adm-actions { display: flex; gap: 4px; flex-wrap: wrap; min-width: 176px; justify-content: flex-end; }
.adm-action-btn {
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
  font-family: inherit;
}
.adm-action-btn:hover { background: var(--bg-pill); }
.adm-action-btn.is-primary  { background: var(--accent); color: #fff; border-color: var(--accent); }
.adm-action-btn.is-primary:hover  { filter: brightness(0.95); background: var(--accent); }
.adm-action-btn.is-warning  { color: #d97706; border-color: rgba(245,158,11,0.30); }
.adm-action-btn.is-warning:hover  { background: rgba(245,158,11,0.10); }
.adm-action-btn.is-danger   { color: #dc2626; border-color: rgba(239,68,68,0.30); }
.adm-action-btn.is-danger:hover   { background: rgba(239,68,68,0.10); }

/* ---------- Modal ---------- */
.adm-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.adm-modal[hidden] { display: none; }
.adm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.adm-modal-card {
  position: relative;
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.30);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  padding: 22px 24px;
}
.adm-modal-wide { max-width: 800px; }
.adm-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.adm-modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.adm-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  line-height: 1;
}
.adm-modal-close:hover { background: var(--bg-pill); color: var(--ink); }
.adm-modal-msg { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.adm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---------- Form ---------- */
.adm-form { display: flex; flex-direction: column; gap: 12px; }
.adm-field { display: flex; flex-direction: column; gap: 4px; }
.adm-field > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.adm-field > span small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.adm-field input, .adm-field select, .adm-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
}
.adm-form textarea { resize: vertical; min-height: 60px; }
.adm-field input:focus, .adm-field select:focus, .adm-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169,80,54, 0.15);
}
.adm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Password display modal ---------- */
.adm-pw-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--bg-pill);
  border-radius: 10px;
  border: 2px dashed var(--accent);
}
.adm-pw-display code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  user-select: all;
}

/* ---------- Detail modal grid ---------- */
.adm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px) {
  .adm-detail-grid { grid-template-columns: 1fr; }
}
.adm-detail-grid h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.adm-detail-meta { font-size: 11px; color: var(--ink-3); font-weight: 600; }

.adm-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.adm-dl dt { color: var(--ink-3); font-weight: 600; }
.adm-dl dd { margin: 0; font-weight: 700; color: var(--ink); }

.adm-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-mini-table th { text-align: left; padding: 4px 8px; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line); }
.adm-mini-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.adm-mini-table tr:last-child td { border-bottom: 0; }

.adm-note {
  padding: 8px 12px;
  background: var(--bg-pill);
  border-radius: 8px;
  margin-bottom: 6px;
}
.adm-note-head { font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
.adm-note p { margin: 0; font-size: 13px; color: var(--ink); white-space: pre-wrap; }

/* ---------- Health cards ---------- */
.adm-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.adm-health-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-health-card.is-ok   { border-color: rgba(34,197,94,0.30); }
.adm-health-card.is-slow { border-color: rgba(245,158,11,0.40); }
.adm-health-card.is-down { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.04); }
.adm-health-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-health-card-head strong {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.adm-health-icon { font-size: 18px; }
.adm-health-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adm-health-pill.is-ok   { background: rgba(34,197,94,0.12); color: #16a34a; }
.adm-health-pill.is-slow { background: rgba(245,158,11,0.12); color: #d97706; }
.adm-health-pill.is-down { background: rgba(239,68,68,0.12); color: #dc2626; }
.adm-health-pill.is-unknown { background: var(--bg-pill); color: var(--ink-3); }
.adm-health-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 11.5px;
}
.adm-health-meta div { display: flex; flex-direction: column; }
.adm-health-meta span { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-health-meta strong { color: var(--ink); font-weight: 800; }
.adm-health-error code { font-size: 11px; color: var(--ink-3); display: block; padding: 6px 8px; background: var(--bg-pill); border-radius: 6px; }

/* ---------- Recargas cards ---------- */
.adm-recargas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.adm-rec-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-rec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adm-rec-time { font-size: 11px; color: var(--ink-3); }
.adm-rec-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.adm-rec-body span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.adm-rec-body strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.adm-rec-actions {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.adm-rec-actions .adm-btn { flex: 1; }

/* ---------- Audit log specifics ---------- */
.adm-action-code {
  padding: 2px 6px;
  background: var(--bg-pill);
  border-radius: 4px;
  font-size: 11.5px;
  font-family: 'Courier New', monospace;
}
.adm-table details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent);
}
.adm-table details pre {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-pill);
  border-radius: 6px;
  font-size: 11px;
  max-height: 200px;
  overflow: auto;
}

/* ---------- Toast simple ---------- */
.adm-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 700;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  pointer-events: none;
  max-width: 80%;
}
.adm-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.adm-toast.is-success { background: #16a34a; color: #fff; }
.adm-toast.is-error   { background: #dc2626; color: #fff; }
.adm-toast.is-warning { background: #f59e0b; color: #fff; }

/* ---------- Empty state generic ---------- */
.adm-empty {
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================================
   TOAST UNIVERSAL (.app-toast / .app-toast-host)
   ============================================================ */
.app-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.app-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  font-size: 13.5px;
  color: var(--ink);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1.2);
  pointer-events: auto;
}
.app-toast.is-visible { opacity: 1; transform: translateX(0); }
.app-toast.is-leaving { opacity: 0; transform: translateX(20px); }
.app-toast-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-pill);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}
.app-toast-msg { font-weight: 600; line-height: 1.4; }
.app-toast-close {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}
.app-toast-close:hover { background: var(--bg-pill); color: var(--ink); }

.app-toast-success { border-left-color: #16a34a; }
.app-toast-success .app-toast-icon { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.app-toast-error   { border-left-color: #dc2626; }
.app-toast-error   .app-toast-icon { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.app-toast-warning { border-left-color: #f59e0b; }
.app-toast-warning .app-toast-icon { background: rgba(245, 158, 11, 0.15); color: #d97706; }

/* ============================================================
   CONFIRM MODAL (.app-confirm-*)
   ============================================================ */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.app-confirm-overlay.is-visible { opacity: 1; }
.app-confirm-overlay.is-leaving { opacity: 0; }
.app-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.app-confirm-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.30);
  transform: scale(0.96);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1.2);
}
.app-confirm-overlay.is-visible .app-confirm-card { transform: scale(1); }
.app-confirm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.app-confirm-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.app-confirm-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
.app-confirm-close:hover { background: var(--bg-pill); }
.app-confirm-msg { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.app-confirm-cancel, .app-confirm-ok {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.app-confirm-cancel:hover { background: var(--bg-pill); }
.app-confirm-ok {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.app-confirm-ok:hover { filter: brightness(0.95); }
.app-confirm-ok.is-danger { background: #dc2626; border-color: #dc2626; }
.app-confirm-ok.is-danger:hover { background: #b91c1c; }

/* ============================================================
   COMMAND PALETTE (.app-palette-*)
   ============================================================ */
.app-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  padding-left: 16px;
  padding-right: 16px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.app-palette-overlay[hidden] { display: none; }
.app-palette-overlay.is-visible { opacity: 1; }
.app-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}
.app-palette-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1.2);
}
.app-palette-overlay.is-visible .app-palette-card { transform: scale(1) translateY(0); }

.app-palette-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.app-palette-search-icon { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.app-palette-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
}
.app-palette-input::placeholder { color: var(--ink-3); }
.app-palette-hint {
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.app-palette-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.app-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  transition: background-color 80ms;
}
.app-palette-item.is-active {
  background: var(--bg-pill);
}
.app-palette-icon {
  width: 24px;
  text-align: center;
  font-size: 16px;
}
.app-palette-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.app-palette-label { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-palette-sub { font-size: 11px; color: var(--ink-3); }
.app-palette-empty {
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  list-style: none;
}

.app-palette-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-pill);
  flex-wrap: wrap;
}
.app-palette-foot kbd, .app-help-keys kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-family: inherit;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  margin: 0 2px;
}

/* ============================================================
   HELP MODAL (atajos.js · .app-help-*)
   ============================================================ */
.app-help-card { max-width: 480px; }
.app-help-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.app-help-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.app-help-keys { display: inline-flex; align-items: center; min-width: 110px; }
.app-help-plus { color: var(--ink-3); padding: 0 2px; }
.app-help-desc { font-size: 13px; color: var(--ink); }

/* ============================================================
   FAVORITOS en sidebar (.dash-fav-toggle, .dash-favoritos-cat)
   ============================================================ */
.dash-fav-toggle {
  background: transparent;
  border: 0;
  padding: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-3);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 120ms, color 120ms, transform 100ms;
  margin-left: auto;        /* empuja la estrella a la derecha del item */
}
.dash-fav-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.dash-fav-toggle.is-active {
  opacity: 1;
  color: #f59e0b;
}
.dash-fav-toggle.is-active svg { fill: #fbbf24; stroke: #f59e0b; }
.dash-fav-toggle:hover { transform: scale(1.15); color: #f59e0b; }
.dash-svc-item:hover .dash-fav-toggle { opacity: 1; }

/* Sección "Favoritos" en el sidebar */
.dash-favoritos-cat {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), transparent);
  border: 1px solid rgba(251, 191, 36, 0.20);
  border-radius: 10px;
  margin: 0 0 12px;
  padding: 6px;
}
.dash-favoritos-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97706;
}
.dash-favoritos-head svg { width: 14px; height: 14px; color: #f59e0b; }
.dash-favoritos-head .cat-name { flex: 1; }
.dash-favoritos-head .cat-count {
  padding: 1px 7px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 999px;
  font-size: 10px;
  color: #d97706;
}

/* ============================================================
   HISTORIAL — botones de re-ejecutar y nota
   ============================================================ */
.dash-history-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
.dash-history-act {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
  transition: background-color 120ms, border-color 120ms;
  line-height: 1;
}
.dash-history-act:hover { background: var(--bg-pill); border-color: var(--accent); color: var(--accent); }
.dash-history-note {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  cursor: help;
  vertical-align: middle;
}

/* ============================================================
   RANKING COMPLETO (/ranking) — .rank-*
   ============================================================ */
.rank-shell {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Hero con la posición del user actual ---- */
.rank-hero {
  background: linear-gradient(135deg, rgba(169,80,54, 0.10), rgba(251, 191, 36, 0.10));
  border: 1px solid rgba(169,80,54, 0.20);
  border-radius: 18px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.rank-hero-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.rank-hero h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.rank-hero-sub { margin: 0; color: var(--ink-2); font-size: 14px; }
.rank-hero-sub strong { color: var(--accent); font-weight: 800; }
.rank-hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 200px;
}
.rank-hero-position {
  font-size: 32px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.rank-hero-detail { display: flex; flex-direction: column; }
.rank-hero-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rank-hero-credits {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

/* ---- Tabs ---- */
.rank-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.rank-tab {
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms;
}
.rank-tab:hover { color: var(--ink); }
.rank-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Card de la lista ---- */
.rank-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.rank-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-pill);
}
.rank-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.rank-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 999px;
}
.rank-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: rank-live-blink 1.6s ease-in-out infinite;
}
@keyframes rank-live-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- Item del ranking ---- */
.rank-item {
  display: grid;
  grid-template-columns: 60px 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms;
}
.rank-item:last-child { border-bottom: 0; }
.rank-item:hover { background: var(--bg-pill); }
.rank-item.is-me {
  background: linear-gradient(90deg, rgba(169,80,54, 0.08), transparent);
  border-left: 3px solid var(--accent);
  padding-left: 15px;
}

.rank-item-medal { display: flex; align-items: center; justify-content: center; }
.rank-position {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rank-medal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.rank-medal-gold   { background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 3px 12px rgba(245, 158, 11, 0.45); }
.rank-medal-silver { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.rank-medal-bronze { background: linear-gradient(135deg, #fdba74, #c2410c); }

.rank-item-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-pill);
}
.rank-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rank-item.is-me .rank-item-avatar { border-color: var(--accent); }

.rank-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-item-info strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-you-pill {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}
.rank-item-sub { display: flex; font-size: 11.5px; color: var(--ink-3); }
.rank-delta-pill {
  display: inline-flex;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

.rank-item-metric {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.rank-item-metric small {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  margin-left: 2px;
}

.rank-empty {
  padding: 30px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
  list-style: none;
}
.rank-jump {
  padding: 14px;
  text-align: center;
  list-style: none;
  background: var(--bg-pill);
}
.rank-jump button {
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.rank-jump button:hover { filter: brightness(0.95); }

/* ---- Footer con paginación ---- */
.rank-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-pill);
  font-size: 12.5px;
  color: var(--ink-3);
}
.rank-pagination { display: flex; align-items: center; gap: 8px; }
.rank-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rank-btn:hover:not(:disabled) { background: var(--bg-pill); }
.rank-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rank-btn-secondary { /* alias para claridad */ }

.rank-back { padding: 4px 0; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .rank-hero { grid-template-columns: 1fr; }
  .rank-hero-card { min-width: 0; }
  .rank-hero h1 { font-size: 22px; }
  .rank-item {
    grid-template-columns: 44px 44px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .rank-item-avatar { width: 44px; height: 44px; }
  .rank-item-info strong { font-size: 13.5px; }
  .rank-item-metric { font-size: 15px; }
  .rank-medal { width: 28px; height: 28px; font-size: 12px; }
  .rank-foot { flex-direction: column; gap: 10px; }
}

/* ============================================================
   AJUSTES FINOS DE RESPONSIVIDAD MÓVIL
   - Sustituye 100vh por 100dvh en móvil (evita "saltos" por la
     barra del navegador y huecos al final del viewport).
   - Compacta marca de agua INFO/PERU para que no domine.
   - Recupera la nav de iconos del landing como scroll horizontal
     (antes estaba `display: none`, ocultando los servicios).
   - Reduce gaps, paddings y aspect-ratios excesivos en cards y
     hero carousel.
   - Da manejo móvil al layout `.dashboard-main-3col`.
   - Quita el grid de fondo del dashboard en móvil (ruido visual).
   - Elimina padding-bottom fantasma del body en páginas sin
     info-bar visible.
   ============================================================ */

/* ---- Unidades dinámicas: evita huecos por la barra del navegador en iOS/Android ---- */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  body.login-page { min-height: 100dvh; }

  @media (min-width: 768px) {
    body.dashboard-page {
      height: calc(100dvh / 1.25) !important;
      min-height: calc(100dvh / 1.25) !important;
      max-height: calc(100dvh / 1.25) !important;
    }
    body:not(.dashboard-page):not(.login-page):not(.servicio-page):not(.planes-page):not(.soporte-page) {
      height: calc(100dvh / 1.08) !important;
      min-height: calc(100dvh / 1.08) !important;
      max-height: calc(100dvh / 1.08) !important;
    }
  }
}

/* ---- Tablet (768–1023px): el .home sigue lado-a-lado pero más compacto ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .home { gap: 24px; padding: 18px 24px; }
  .hero-carousel { aspect-ratio: 4 / 4.4; max-width: 520px; }
  .login-block { max-width: 340px; }
  .dashboard-main-3col { grid-template-columns: 208px 1fr; }
  .dashboard-main-3col > aside:last-of-type,
  .dashboard-main-3col > section:last-of-type:not(.dash-content) { display: none; }
}

/* ---- Móvil (≤767px): mejoras transversales ---- */
@media (max-width: 767px) {

  /* Hero carousel: limitamos la ALTURA vía ancho (aspect 4/5 = el de las
     imágenes) para que el login quepa above the fold SIN recortar el banner. */
  .hero-carousel {
    aspect-ratio: 4 / 5 !important;
    width: min(100%, calc(52vh * 0.8));
    height: auto;
    max-height: none;
    margin: 0 auto;
  }

  /* Marca de agua INFO/PERU compacta — no domina la pantalla pequeña */
  .brand-watermark {
    font-size: clamp(110px, 30vw, 240px);
    letter-spacing: -0.04em;
  }
  .brand-watermark span:first-child { top: 36px; left: -8px; }
  .brand-watermark span:last-child  { bottom: 64px; right: 12px; }

  /* Landing icon-nav: en lugar de ocultarse, lo recuperamos como
     scroll horizontal en una 2ª fila. Más útil que invisible. */
  .icon-nav {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    margin: 2px -20px 0;
    padding: 4px 20px 8px;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    align-items: center;
    justify-content: flex-start;
  }
  .icon-nav::-webkit-scrollbar { display: none; }
  .icon-nav-item { flex: 0 0 auto; scroll-snap-align: start; }
  .icon-nav-item .icon-label { display: block !important; font-size: 10px; }
  .icon-nav-item .icon-wrap { width: 34px !important; height: 34px !important; }
  .icon-nav-item .icon-wrap svg { width: 26px !important; height: 26px !important; }
  /* El header del landing necesita acomodar la 2ª fila.
     Fila 1: logo + acciones (tema/Soporte). Fila 2: nav de iconos.
     Sin esto, header-right caía a una 3ª fila desperdiciando altura. */
  .site-header:not(.dash-header) .header-inner {
    grid-template-rows: auto auto;
    height: auto;
    padding-top: 8px;
    padding-bottom: 6px;
    row-gap: 4px;
  }
  .site-header:not(.dash-header) .header-left  { grid-row: 1; grid-column: 1; }
  .site-header:not(.dash-header) .header-right { grid-row: 1; grid-column: 2; justify-self: end; }

  /* Header del landing pegado al top al hacer scroll */
  body:not(.dashboard-page):not(.login-page) .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
  }

  /* (Las páginas planes/soporte/servicio SÍ muestran la info-bar fija,
     así que conservan el padding-bottom global. No tocarlo). */

  /* Info-bar más compacta para no comer altura útil */
  :root { --info-bar-h: 52px; }
  .info-bar { min-height: 52px; }
  .info-bar-inner { padding: 8px 14px; gap: 8px; }
  .info-bar p { font-size: 11.5px; line-height: 1.35; }
  .info-bar-icon { width: 24px; height: 24px; }
  .info-bar-icon svg { width: 18px; height: 18px; }

  /* Landing: padding más ajustado y sin hueco vertical */
  .home {
    padding: 14px var(--pad-x) 18px;
    gap: 18px;
  }
  .login-block h1 { font-size: 22px; }
  .login-block .subtitle { font-size: 13.5px; margin-bottom: 18px; }
  .login-form { gap: 12px; }
  .field input { height: 44px; font-size: 16px; } /* 16px = no zoom iOS */
  .btn-login { height: 46px; }

  /* Dashboard 3-col: anula la tercera columna en móvil */
  .dashboard-main-3col {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .dashboard-main-3col > aside:last-of-type:not(.dash-sidebar),
  .dashboard-main-3col > section:last-of-type:not(.dash-content) {
    display: none;
  }

  /* Quitar el grid de fondo del dashboard — distrae en móvil */
  body.dashboard-page .dash-content { background-image: none; }

  /* Watermark del dashboard mucho más sutil en móvil */
  body.dashboard-page .brand-watermark {
    font-size: clamp(90px, 22vw, 200px);
  }

  /* Sidebar drawer: usa dvh para que el alto sea exacto */
  body.dashboard-page .dash-sidebar {
    height: 100dvh !important;
  }

  /* Compactar separaciones del panel */
  .dash-novedades-row { gap: 12px !important; margin-bottom: 14px !important; }
  .dash-stats { margin-bottom: 14px; }
  .dash-recent { margin-bottom: 16px; }

  /* Recarga: 5 columnas → 1 columna en móvil */
  .recarga-shell .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .recarga-top {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Login-card centrado (login.html): que no quede pegado a los bordes */
  body.login-page { padding: 16px var(--pad-x); }
  .login-card { padding: 26px 22px 22px; }

  /* Botones header del landing: si no caben, ocultar texto secundario */
  .site-header:not(.dash-header) .header-right .btn { padding: 0 12px; font-size: 13px; height: 36px; }
}

/* ---- Móvil pequeño (≤480px): apretar aún más sin perder usabilidad ---- */
@media (max-width: 480px) {
  :root { --pad-x: 14px; }

  /* Marca de agua casi imperceptible */
  .brand-watermark {
    font-size: clamp(80px, 24vw, 170px);
    color: rgba(10, 10, 10, 0.025);
  }
  [data-theme="dark"] .brand-watermark { color: rgba(255, 255, 255, 0.022); }
  .brand-watermark span:first-child { top: 24px; left: -6px; }
  .brand-watermark span:last-child  { bottom: 44px; right: 8px; }

  /* Hero carousel ya muy compacto — misma técnica: alto acotado sin recorte */
  .hero-carousel {
    aspect-ratio: 4 / 5 !important;
    width: min(100%, calc(46vh * 0.8));
  }

  /* Header landing: nav de iconos con gap reducido */
  .header-inner .icon-nav { gap: 14px; }
  .header-inner .icon-nav-item .icon-wrap { width: 30px; height: 30px; }
  .header-inner .icon-nav-item .icon-wrap svg { width: 22px; height: 22px; }
  .header-inner .icon-nav-item .icon-label { font-size: 9.5px; }

  /* Dashboard stats: 2×1 + 1 wide en lugar de 3×1 que aprieta los números */
  .dash-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .dash-stats .dash-stat-card.is-primary { grid-column: 1 / -1; }
  .dash-stat-value { font-size: 22px !important; }
  .dash-stat-label { font-size: 11px !important; }

  /* Botones del header reducidos */
  .site-header:not(.dash-header) .header-right { gap: 4px; }
  .site-header:not(.dash-header) .header-right .btn-ghost,
  .site-header:not(.dash-header) .header-right .app-grid { display: none; }

  /* Login title más chico */
  .login-block h1 { font-size: 20px; line-height: 1.2; }
  .login-card-title { font-size: 20px; }

  /* Plan/recarga cards más finos */
  .plan-card { padding: 16px; }
  .plan-features li { font-size: 12.5px; }
}

/* ---- Landscape muy bajo en móvil: oculta watermark, compacta carousel ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .brand-watermark { display: none; }
  .hero-carousel {
    aspect-ratio: 4 / 5 !important;
    width: min(100%, calc(70vh * 0.8));
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
  .home { padding: 10px var(--pad-x); gap: 14px; }
}

/* ============================================================
   FIX: .api-reniec se definía 3 veces; la última (línea ~7174)
   no tenía media query y sobreescribía el stacking móvil. Aquí
   forzamos foto-arriba / datos-abajo en móvil — sin overflow del
   lado derecho ni textos cortados.
   ============================================================ */
@media (max-width: 767px) {
  .api-reniec {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .api-reniec-media {
    max-width: 220px;
    margin: 0 auto;
    width: 100%;
  }
  .api-reniec-foto { max-width: 200px; margin: 0 auto; }
  .api-reniec .api-photo { width: 100%; }
  .api-reniec .api-photo .api-img-wrap { aspect-ratio: 3 / 4; }

  /* Lista de datos: 1 columna full-width — evita el overflow horizontal
     que dejaba los labels y valores cortados por la derecha. */
  .dash-result-fields {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
    min-width: 0;
    width: 100%;
  }
  .dash-result-fields > div { padding: 8px 0; }
  .dash-result-fields dt { font-size: 10.5px; }
  .dash-result-fields dd {
    font-size: 13.5px;
    word-break: break-word;
    overflow-wrap: anywhere;   /* parte palabras largas (URLs/IDs) */
  }

  /* Biométricos a 2 columnas (firma + huellas) */
  .api-biometrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Policía: misma idea */
  .api-policia {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .api-policia-photo { max-width: 260px; margin: 0 auto; width: 100%; }

  /* RENIEC alt (.api-reniec-data versión vieja) — también stacked */
  .api-reniec-data {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
  }
  .api-reniec-data dt { font-size: 10.5px; color: var(--ink-3); }
  .api-reniec-data dd { font-size: 13.5px; word-break: break-word; }

  /* El card del resultado dentro del modal no debe permitir scroll
     horizontal — atrapa cualquier overflow puntual. */
  body.has-modal-result #form-result {
    overflow-x: hidden;
  }
  body.has-modal-result #form-result .dash-result-card,
  body.has-modal-result #form-result .dash-result {
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* ============================================================
   PÁGINA 404 — branded (antes salía el "Not Found" plano de Flask)
   ============================================================ */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px var(--pad-x);
  position: relative;
  z-index: 1;
}
.error-page-hand {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 6px;
}
.error-page-code {
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.error-page h1 {
  margin: 8px 0 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.error-page-desc {
  margin: 0 0 26px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.error-page-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.error-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 220px;
  padding: 0 28px;
  text-decoration: none;
}
.error-page-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}
.error-page-link:hover { color: var(--accent-2); text-decoration: underline; }

/* ============================================================
   RECARGA — loader mano + éxito con confeti + contador animado
   ============================================================ */
.recarga-loader-ov {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms ease;
}
[data-theme="dark"] .recarga-loader-ov { background: rgba(15, 17, 20, 0.84); }
.recarga-loader-ov.is-open { opacity: 1; }

/* Confeti a toda la página */
.recarga-confetti {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

/* Banner "¡Recarga Exitosa!" */
.recarga-success-pop {
  position: fixed;
  inset: 0;
  z-index: 5001;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.recarga-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 44px 24px;
  background: var(--bg);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--line);
  transform: scale(0.7);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.2, 1.5, 0.4, 1), opacity 260ms ease;
}
.recarga-success-pop.is-in .recarga-success-card { transform: scale(1); opacity: 1; }
.recarga-success-pop.is-out .recarga-success-card { transform: scale(0.92) translateY(-12px); opacity: 0; }
.recarga-success-coin {
  width: 70px;
  height: 70px;
  margin-bottom: 4px;
  filter: drop-shadow(0 6px 12px rgba(158, 102, 0, 0.42));
  animation: success-coin-spin 1200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes success-coin-spin {
  0%   { transform: rotateY(-540deg) scale(0.3); }
  100% { transform: rotateY(0deg) scale(1); }
}
.recarga-success-card strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.recarga-success-card span { font-size: 15px; font-weight: 800; color: #F5B301; }

/* Contador de monedas subiendo con zoom + brillo en la píldora */
.dash-wallet-value.is-counting {
  display: inline-block;
  color: #F5B301;
  animation: wallet-count-pop 1500ms ease;
}
@keyframes wallet-count-pop {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.45); }
  30%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.dash-wallet.is-recharging { animation: wallet-glow 1600ms ease; }
@keyframes wallet-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0); }
  22%      { box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.7), 0 0 26px rgba(245, 179, 1, 0.6); }
  70%      { box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.35), 0 0 16px rgba(245, 179, 1, 0.3); }
}
.dash-wallet.is-recharging .coin3d { animation: wallet-coin-bounce 1500ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes wallet-coin-bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  20%      { transform: translateY(-6px) scale(1.28) rotate(-12deg); }
  45%      { transform: translateY(0) scale(1.12) rotate(9deg); }
  70%      { transform: translateY(-2px) scale(1.05) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .recarga-success-coin, .dash-wallet-value.is-counting,
  .dash-wallet.is-recharging, .dash-wallet.is-recharging .coin3d { animation: none; }
}

/* ---- Moneditas con física (posición/rotación controladas por JS) ---- */
.coin-drop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5002;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 5px rgba(158, 102, 0, 0.4));
  will-change: transform, opacity;
}
/* La moneda del contador rebota con cada monedita que aterriza */
.dash-wallet-coin.is-bounce { animation: coin-land-bounce 300ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes coin-land-bounce {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-3px) scale(1.32); }
  100% { transform: translateY(0) scale(1); }
}
/* Con la lluvia de moneditas, el rebote viene del aterrizaje (no el genérico) */
.dash-wallet.is-recharging .coin3d { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .coin-drop { display: none !important; }
  .dash-wallet-coin.is-bounce { animation: none !important; }
}

/* ============================================================
   TUTORIALES — Zona de aprendizaje (/tutoriales)
   ============================================================ */
.tutoriales-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px var(--pad-x, 24px) 64px;
}
.tut-hero { text-align: center; margin-bottom: 26px; }
.tut-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.tut-hero h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tut-hero p {
  margin: 0 auto 20px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.tut-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(440px, 100%);
  padding: 0 16px;
  height: 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 999px);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tut-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,80,54, 0.12); }
.tut-search svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.tut-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 14.5px; color: var(--ink);
}
.tut-search input::placeholder { color: var(--ink-3); }

.tut-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.tut-chip {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--bg-pill);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.tut-chip:hover { color: var(--ink); border-color: var(--line); }
.tut-chip.is-active { background: var(--accent); color: #FFFFFF; }

.tut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tut-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}
.tut-card:hover {
  border-color: #D5D5D5;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-3px);
}
[data-theme="dark"] .tut-card:hover { border-color: #4A4A4A; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30); }

.tut-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 100%);
}
/* Portadas por categoría (degradados distintos, coherentes con la marca) */
.tut-thumb--primeros-pasos { background: linear-gradient(135deg, #FF9A5A 0%, #a95036 100%); }
.tut-thumb--consultas      { background: linear-gradient(135deg, #4F86E8 0%, #2B4C8C 100%); }
.tut-thumb--recargas       { background: linear-gradient(135deg, #22B07A 0%, #128257 100%); }
.tut-thumb--cuenta         { background: linear-gradient(135deg, #8B79E6 0%, #5B45B8 100%); }
.tut-thumb--apis           { background: linear-gradient(135deg, #37404F 0%, #1B2029 100%); }
.tut-thumb-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #17191D;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease;
}
.tut-thumb-play svg { width: 24px; height: 24px; margin-left: 3px; }
.tut-card:hover .tut-thumb-play { transform: scale(1.08); }
.tut-badge-dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.tut-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.tut-cat-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(169,80,54, 0.10);
  padding: 3px 8px;
  border-radius: 6px;
}
[data-theme="dark"] .tut-cat-chip { background: rgba(169,80,54, 0.18); color: #FF8A63; }
.tut-card-title { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.tut-card-desc { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tut-empty { text-align: center; color: var(--ink-3); font-size: 14.5px; margin-top: 36px; }

/* ---------- Modal de tutorial ---------- */
body.tut-modal-open { overflow: hidden; }
.tut-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tut-modal[hidden] { display: none; }
.tut-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.62);
  backdrop-filter: blur(3px);
}
.tut-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.tut-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.45);
  transition: background 150ms ease;
}
.tut-modal-close:hover { background: rgba(0, 0, 0, 0.65); }
.tut-modal-close svg { width: 18px; height: 18px; }
.tut-modal-media {
  aspect-ratio: 16 / 9;
  background: #0E1013;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.tut-modal-media.is-placeholder { background: linear-gradient(135deg, #2A303B 0%, #171A20 100%); }
.tut-video { width: 100%; height: 100%; display: block; background: #000; }
.tut-media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
.tut-media-ph svg { width: 46px; height: 46px; color: rgba(255, 255, 255, 0.55); }
.tut-media-ph-text { font-size: 13px; max-width: 360px; line-height: 1.5; }
.tut-modal-body { padding: 18px 22px 24px; }
.tut-modal-body h2 { margin: 8px 0 4px; font-size: 21px; font-weight: 800; color: var(--ink); }
.tut-modal-desc { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.tut-steps-title {
  margin: 16px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tut-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.tut-steps li {
  position: relative;
  counter-increment: step;
  padding-left: 40px;
  min-height: 26px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.tut-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tut-grid { grid-template-columns: 1fr; }
  .tut-hero h1 { font-size: 26px; }
  .tutoriales-main { padding: 28px 16px 48px; }
}

/* ============================================================
   PORTAL DE DESARROLLADORES — APIs (apis.html)
   ============================================================ */
.api-portal .api-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 20px;
  padding: 4px;
  background: var(--bg-pill);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.api-tab {
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  border-radius: 9px;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.api-tab:hover { color: var(--ink); }
.api-tab.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .api-tab.is-active { background: #2A2E35; box-shadow: none; }

.api-panel[hidden] { display: none; }
/* Contenedores con display propio: forzar que [hidden] gane sobre flex/grid */
.api-newtoken[hidden],
.api-token-reveal[hidden],
.api-play-result[hidden] { display: none !important; }
.api-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.api-h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.api-h3:first-child { margin-top: 0; }
.api-muted { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.api-muted code, .api-code-inline, .api-token-prefix {
  font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-pill);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 5px;
}

.api-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-pill);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: filter 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.api-btn:hover { border-color: var(--ink-3); }
.api-btn svg { width: 16px; height: 16px; }
.api-btn:disabled { opacity: 0.6; cursor: progress; }
.api-btn-primary {
  color: #FFFFFF;
  background: linear-gradient(135deg, #cf8065 0%, #a95036 100%);
  border-color: transparent;
}
.api-btn-primary:hover { filter: brightness(0.95); border-color: transparent; }
.api-btn-danger { color: #DC2626; background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.28); }
.api-btn-danger:hover { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); }
[data-theme="dark"] .api-btn-danger { color: #FCA5A5; }

.api-newtoken {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg-pill);
  border-radius: 12px;
}
.api-newtoken input {
  flex: 1;
  min-width: 200px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.api-newtoken input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,80,54, 0.12); }

.api-token-reveal {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.07);
  border-radius: 12px;
}
[data-theme="dark"] .api-token-reveal { background: rgba(34, 197, 94, 0.10); }
.api-token-reveal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.api-token-reveal-head svg { width: 18px; height: 18px; color: #16A34A; }
[data-theme="dark"] .api-token-reveal-head svg { color: #4ADE80; }
.api-token-reveal-head strong { font-size: 14px; color: var(--ink); }
.api-token-copybox {
  display: flex;
  gap: 8px;
  align-items: center;
}
.api-token-copybox code {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 12px;
  font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.api-tokens-list { display: flex; flex-direction: column; gap: 10px; }
.api-token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.api-token-row.is-revoked { opacity: 0.6; }
.api-token-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.api-token-name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.api-token-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: #DC2626; background: rgba(239, 68, 68, 0.12); padding: 2px 6px; border-radius: 5px;
}
[data-theme="dark"] .api-token-tag { color: #FCA5A5; }
.api-token-prefix { align-self: flex-start; }
.api-token-meta { font-size: 12px; color: var(--ink-3); }

/* Docs */
.api-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.api-doc-block { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--bg-pill); border-radius: 12px; }
.api-doc-label { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.api-doc-block .api-code-inline { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
.api-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.api-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.api-table th, .api-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.api-table th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); background: var(--bg-pill); }
.api-table tr:last-child td { border-bottom: none; }
.api-table code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink); }
.api-method { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.03em; }
.api-method.get { color: #0B7A54; background: rgba(34, 197, 94, 0.14); }
[data-theme="dark"] .api-method.get { color: #4ADE80; }
.api-pre {
  margin: 0 0 4px;
  padding: 14px 16px;
  overflow-x: auto;
  background: #10141B;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.api-pre code { font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; color: #E6E9EE; white-space: pre; }

/* Playground */
.api-play-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.api-field { display: flex; flex-direction: column; gap: 6px; }
.api-field span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.api-field select, .api-field input {
  padding: 10px 12px; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; min-width: 200px;
}
.api-field select:focus, .api-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,80,54, 0.12); }
.api-play-req { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.api-play-req code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: var(--ink); overflow-x: auto; }

@media (max-width: 560px) {
  .api-play-form { flex-direction: column; align-items: stretch; }
  .api-field select, .api-field input, .api-newtoken input { min-width: 0; width: 100%; }
  .api-panel-head { flex-direction: column; }
}

/* ============================================================
   RENDER PROFESIONAL DE RESULTADOS (JSON de LEDER u otros servicios)
   ============================================================ */
.api-pretty { margin-top: 6px; }
.api-photos { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; align-items: flex-end; }
.api-photo-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.api-photo-fig figcaption {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: capitalize; text-align: center;
}
.api-photo-inline {
  max-width: 132px;
  max-height: 150px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .api-photo-inline { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.api-fields {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.api-field {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.api-field:last-child { border-bottom: none; }
.api-field-k {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: capitalize;
}
.api-field-v { font-size: 13.5px; color: var(--ink); font-weight: 600; word-break: break-word; }

.api-subtable { margin-top: 12px; }
.api-subtable-title {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.api-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.api-data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 340px; }
.api-data-table th, .api-data-table td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink);
  white-space: nowrap;
}
.api-data-table th {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  color: #FFFFFF; background: var(--accent); white-space: nowrap;
}
.api-data-table tbody tr:nth-child(even) { background: var(--bg-pill); }
.api-data-table tbody tr:last-child td { border-bottom: none; }

.api-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.api-list li { padding: 8px 14px; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.api-list li:last-child { border-bottom: none; }
.api-plain { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 4px 0; }

.api-demo-chip {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: rgba(169,80,54, 0.12); vertical-align: middle;
}
[data-theme="dark"] .api-demo-chip { color: #FF8A63; background: rgba(169,80,54, 0.18); }

.api-raw { margin-top: 10px; }
.api-raw > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-3);
  list-style: none; padding: 4px 0;
}
.api-raw > summary:hover { color: var(--ink-2); }
.api-raw > summary::-webkit-details-marker { display: none; }
.api-raw > summary::before { content: '▸ '; }
.api-raw[open] > summary::before { content: '▾ '; }

/* Imagen (ficha PNG) generada por la app */
.api-imggen-wrap { display: flex; flex-direction: column; gap: 10px; }
.api-imggen {
  width: 100%;
  max-width: 640px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
}
[data-theme="dark"] .api-imggen { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }

/* Banner "modo demostración" arriba del resultado */
.api-demo-banner {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  color: #9A4300; background: rgba(169,80,54, 0.10); border: 1px solid rgba(169,80,54, 0.30);
}
[data-theme="dark"] .api-demo-banner { color: #FFB48C; background: rgba(169,80,54, 0.14); }

/* ============================================================
   AUDITORÍA 2026 — mejoras de estados vacíos, ayuda y autoservicio
   ============================================================ */

/* Estado "servicio en preparación" (reason=no-api) y acciones del sin-resultados */
.dash-no-results-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
}
.dash-no-results-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  text-decoration: none; border: 1px solid var(--border, #2a2f38);
  color: var(--ink-1, #e8eaed); background: transparent; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.dash-no-results-btn:hover { background: var(--surface-2, rgba(255,255,255,.04)); transform: translateY(-1px); }
.dash-no-results-btn.is-primary {
  background: var(--accent, #a95036); border-color: var(--accent, #a95036); color: #fff;
}
.dash-no-results-btn.is-primary:hover { filter: brightness(1.05); background: var(--accent, #a95036); }
.dash-no-results.is-soon h3 { color: var(--ink-1, #e8eaed); }

/* Soporte — tarjetas de autoservicio */
.soporte-selfhelp { max-width: 720px; margin: 8px auto 26px; }
.soporte-selfhelp-lead { text-align: center; color: var(--ink-2, #9aa3af); font-weight: 600; margin-bottom: 14px; }
.soporte-selfhelp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.soporte-selfhelp-card {
  display: block; padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: var(--surface-1, #14171d); border: 1px solid var(--border, #2a2f38);
  transition: border-color .14s ease, transform .1s ease, background .14s ease;
}
.soporte-selfhelp-card:hover { border-color: var(--accent, #a95036); transform: translateY(-2px); }
.soporte-selfhelp-card strong { display: block; color: var(--ink-1, #e8eaed); font-size: 15px; margin-bottom: 3px; }
.soporte-selfhelp-card span { color: var(--ink-2, #9aa3af); font-size: 13px; line-height: 1.35; }
@media (max-width: 560px) { .soporte-selfhelp-grid { grid-template-columns: 1fr; } }

/* Recarga — banner "pago recibido, pendiente de aprobación" (reemplaza el falso éxito) */
.recarga-pending-pop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.recarga-pending-pop.is-in { opacity: 1; }
.recarga-pending-backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.62); backdrop-filter: blur(2px); }
.recarga-pending-card {
  position: relative; z-index: 1; max-width: 440px; width: calc(100% - 40px);
  background: var(--surface-1, #14171d); border: 1px solid var(--border, #2a2f38);
  border-radius: 18px; padding: 28px 26px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); transform: translateY(8px); transition: transform .2s ease;
}
.recarga-pending-pop.is-in .recarga-pending-card { transform: translateY(0); }
.recarga-pending-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(245,179,1,.14); color: #f5b301; }
.recarga-pending-card strong { display: block; font-size: 18px; color: var(--ink-1, #e8eaed); margin-bottom: 8px; }
.recarga-pending-card p { color: var(--ink-2, #9aa3af); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.recarga-pending-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.recarga-pending-btn {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 10px;
  font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--border, #2a2f38); background: transparent; color: var(--ink-1, #e8eaed);
}
.recarga-pending-btn.is-primary { background: var(--accent, #a95036); border-color: var(--accent, #a95036); color: #fff; }

/* Recarga — historial "Mis recargas" */
.recarga-history { max-width: 1100px; margin: 32px auto 0; padding: 0 4px; }
.recarga-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.recarga-history-head h2 { font-size: 19px; color: var(--ink); margin: 0; }
.recarga-history-refresh { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-1,#14171d); border: 1px solid var(--border,#2a2f38); color: var(--ink-2,#9aa3af); cursor: pointer; }
.recarga-history-refresh:hover { color: var(--accent,#a95036); border-color: var(--accent,#a95036); }
.recarga-history-loading { color: var(--ink-3, #6b7280); font-size: 14px; }
.recarga-history-empty { text-align: center; padding: 26px 20px; background: var(--surface-1,#14171d); border: 1px dashed var(--border,#2a2f38); border-radius: 14px; }
.recarga-history-empty strong { display: block; color: var(--ink-1,#e8eaed); font-size: 15px; margin-bottom: 6px; }
.recarga-history-empty span { display: block; color: var(--ink-2,#9aa3af); font-size: 13px; line-height: 1.4; max-width: 380px; margin: 0 auto 12px; }
.recarga-history-rows { display: flex; flex-direction: column; gap: 8px; }
.recarga-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface-1,#14171d); border: 1px solid var(--border,#2a2f38); border-radius: 12px; }
.recarga-history-main { display: flex; flex-direction: column; }
.recarga-history-main strong { color: var(--ink-1,#e8eaed); font-size: 15px; }
.recarga-history-main span { color: var(--ink-2,#9aa3af); font-size: 12.5px; }
.recarga-badge { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.recarga-badge.is-ok { background: rgba(34,197,94,.14); color: #22c55e; }
.recarga-badge.is-bad { background: rgba(239,68,68,.14); color: #ef4444; }
.recarga-badge.is-pend { background: rgba(245,179,1,.14); color: #f5b301; }

/* Vista previa de la foto elegida (servicio facial) — también la usa la guía guiada */
.dash-file-preview { margin-top: 12px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; animation: bl-fadein .25s ease; }
.dash-file-preview img { width: 118px; height: 142px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #2a2f38); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.dash-file-preview-name { font-size: 12px; color: var(--ink-2, #9aa3af); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes bl-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Ayuda contextual por sección (botón "?" del navbar + drawer) ---- */
.dash-help-btn {
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--border, #2a2f38); color: var(--ink-2, #9aa3af);
  cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease; flex-shrink: 0;
}
.dash-help-btn svg { width: 20px; height: 20px; }
.dash-help-btn:hover { color: var(--accent, #a95036); border-color: var(--accent, #a95036); background: rgba(169,80,54,.06); }
.dash-help-btn:focus-visible { outline: 2px solid var(--accent, #a95036); outline-offset: 2px; }

.bl-help-backdrop { position: fixed; inset: 0; z-index: 2400; background: rgba(6,8,12,.5); opacity: 0; transition: opacity .25s ease; }
.bl-help-open .bl-help-backdrop { opacity: 1; }
.bl-help-drawer {
  position: fixed; top: 0; right: 0; z-index: 2401; height: 100%; width: 400px; max-width: 92vw;
  background: var(--surface-0, #101216); border-left: 1px solid var(--border, #2a2f38);
  box-shadow: -18px 0 50px rgba(0,0,0,.4); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.bl-help-open .bl-help-drawer { transform: none; }
.bl-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border, #2a2f38); }
.bl-help-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent, #a95036); }
.bl-help-head h2 { margin: 2px 0 0; font-size: 20px; color: var(--ink-1, #e8eaed); }
.bl-help-close { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: none; color: var(--ink-2, #9aa3af); cursor: pointer; }
.bl-help-close:hover { background: var(--surface-2, rgba(255,255,255,.05)); color: var(--ink-1, #e8eaed); }
.bl-help-close svg { width: 18px; height: 18px; }
.bl-help-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.bl-help-intro { color: var(--ink-1, #e8eaed); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.bl-help-body h3 { font-size: 13px; font-weight: 700; color: var(--ink-2, #9aa3af); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.bl-help-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bl-help-list li { position: relative; padding-left: 26px; color: var(--ink-1, #e8eaed); font-size: 13.5px; line-height: 1.5; }
.bl-help-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(169,80,54,.14); color: var(--accent, #a95036); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.bl-help-block { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.bl-help-block strong { display: block; font-size: 13px; margin-bottom: 4px; }
.bl-help-block span { font-size: 13px; line-height: 1.5; color: var(--ink-2, #9aa3af); }
.bl-help-block.is-next { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25); }
.bl-help-block.is-next strong { color: #22c55e; }
.bl-help-block.is-fail { background: rgba(245,179,1,.09); border: 1px solid rgba(245,179,1,.22); }
.bl-help-block.is-fail strong { color: #f5b301; }
.bl-help-action { width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: none; background: var(--accent, #a95036); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.bl-help-action:hover { filter: brightness(1.06); }
.bl-help-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border, #2a2f38); }
.bl-help-foot-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid var(--border, #2a2f38); background: transparent; color: var(--ink-1, #e8eaed); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.bl-help-foot-btn:hover { border-color: var(--accent, #a95036); color: var(--accent, #a95036); }

/* Aviso no invasivo la primera vez */
.bl-help-hint { position: fixed; z-index: 2402; max-width: 240px; background: var(--surface-0, #101216); border: 1px solid var(--accent, #a95036); color: var(--ink-1, #e8eaed); font-size: 12.5px; line-height: 1.4; padding: 11px 13px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.bl-help-hint.is-in { opacity: 1; transform: none; }
.bl-help-hint b { color: var(--accent, #a95036); }
.bl-help-hint button { display: block; margin-top: 8px; margin-left: auto; padding: 4px 12px; border-radius: 7px; border: none; background: var(--accent, #a95036); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Realce de la guía al abrirla desde "Ver guía paso a paso" */
.dash-form-guide.is-highlight { animation: bl-guide-glow 1.8s ease; border-radius: 14px; }
@keyframes bl-guide-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(169,80,54,0); } 30% { box-shadow: 0 0 0 3px rgba(169,80,54,.5); } }

@media (max-width: 560px) {
  .bl-help-drawer { width: 100%; max-width: 100%; top: auto; bottom: 0; height: 88vh; border-left: none; border-top: 1px solid var(--border, #2a2f38); border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .bl-help-open .bl-help-drawer { transform: none; }
}

/* ---- Onboarding "primeros pasos" (panel, solo usuario nuevo) ---- */
.dash-onboarding { position: relative; margin: 0 0 22px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, rgba(169,80,54,.10), rgba(169,80,54,.03)); border: 1px solid rgba(169,80,54,.28); }
.dash-onboarding-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: none; color: var(--ink-2, #9aa3af); cursor: pointer; }
.dash-onboarding-x:hover { background: rgba(255,255,255,.06); color: var(--ink-1, #e8eaed); }
.dash-onboarding-x svg { width: 16px; height: 16px; }
.dash-onboarding-head h2 { margin: 0 0 4px; font-size: 20px; color: var(--ink-1, #e8eaed); }
.dash-onboarding-head p { margin: 0 0 16px; color: var(--ink-2, #9aa3af); font-size: 14px; }
.dash-onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-onboarding-step { display: flex; gap: 12px; background: var(--surface-1, #14171d); border: 1px solid var(--border, #2a2f38); border-radius: 12px; padding: 14px; }
.dash-onboarding-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #a95036); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.dash-onboarding-text { display: flex; flex-direction: column; gap: 3px; }
.dash-onboarding-text strong { color: var(--ink-1, #e8eaed); font-size: 14.5px; }
.dash-onboarding-text span { color: var(--ink-2, #9aa3af); font-size: 12.5px; line-height: 1.4; }
.dash-onboarding-cta { margin-top: 8px; align-self: flex-start; padding: 7px 13px; border-radius: 8px; background: var(--accent, #a95036); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; border: none; cursor: pointer; }
.dash-onboarding-cta.is-ghost { background: transparent; border: 1px solid var(--border, #2a2f38); color: var(--ink-1, #e8eaed); }
.dash-onboarding-cta.is-ghost:hover { border-color: var(--accent, #a95036); color: var(--accent, #a95036); }
.dash-onboarding-help { margin: 16px 0 0; font-size: 13px; color: var(--ink-2, #9aa3af); }
.dash-onboarding-help b { color: var(--accent, #a95036); }
.dash-onboarding-link { background: none; border: none; color: var(--accent, #a95036); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 720px) { .dash-onboarding-steps { grid-template-columns: 1fr; } }

/* Saldo en 0 → tarjeta con estado vacío (llama la atención hacia recargar) */
.dash-stat-card.is-empty { border-color: rgba(245,179,1,.4); }
.dash-stat-card.is-empty #stat-saldo { color: #f5b301; }
.dash-stat-card.is-empty .dash-stat-link { color: var(--accent, #a95036); font-weight: 700; }

/* ============================================================
   AJUSTES DE AUDITORÍA PRE-PRODUCCIÓN (móvil + accesibilidad)
   Bloque final para sobrescribir de forma controlada, sin tocar
   las reglas originales. Ver informe de auditoría.
   ============================================================ */

/* [a11y] Foco VISIBLE por teclado (antes los inputs hacían outline:0 sin sustituto
   claro). :focus-visible no molesta al hacer click/touch, solo al navegar con Tab. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #a95036);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [móvil] iOS Safari hace auto-zoom al enfocar un input con font-size < 16px.
   Debajo de 640px forzamos >= 16px en todos los campos de texto. */
@media (max-width: 640px) {
  input, select, textarea,
  .dash-input, .dash-select,
  .verify-name-input, .verify-field input,
  #yape-name-input, #yape-name-input {
    font-size: 16px;
  }
}

/* [móvil/a11y] Objetivos táctiles mínimos (~44px) en botones de cierre/acción
   pequeños, para poder tocarlos con el dedo sin fallar. */
.yape-modal-close,
.app-confirm-close,
.app-toast-close,
.dash-onboarding-x,
.ad-left-close {
  min-width: 44px;
  min-height: 44px;
}

/* [móvil] Enlaces de servicio en el drawer: altura táctil cómoda. */
@media (max-width: 900px) {
  .dash-svc-item,
  .dash-cat-single,
  .cat-items-inner a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* Datos de pago Yape (número + titular) que reemplazan el antiguo "QR" decorativo. */
.yape-pay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  text-align: center;
  border: 1px dashed var(--border, #d9d9d9);
  border-radius: 14px;
  background: rgba(107, 39, 216, 0.05);
}
.yape-pay-label { font-size: 12px; letter-spacing: .08em; color: var(--ink-2, #6b7280); font-weight: 800; }
.yape-pay-number { font-size: 26px; font-weight: 800; letter-spacing: .04em; color: var(--ink-1, #17191d); }
.yape-pay-titular { font-size: 14px; color: var(--ink-2, #6b7280); }
[data-theme="dark"] .yape-pay-number { color: var(--ink-1, #e8eaed); }
.yape-pay-box.is-missing { border-style: solid; }
.yape-pay-box.is-missing p { margin: 0; color: var(--ink-2, #6b7280); font-size: 14px; }

/* Estado "sin resultados" del filtro del sidebar. */
.dash-filter-empty { padding: 14px 12px; color: var(--ink-2, #6b7280); font-size: 13px; text-align: center; }

/* ============================================================
   Historial reciente en la columna junto al ranking.
   La lista crece para igualar la altura del ranking y, si hay
   muchas consultas, hace scroll interno en vez de desbordar.
   ============================================================ */
.dash-novedades.dash-recent { margin-bottom: 0; min-width: 0; }
.dash-novedades.dash-recent .dash-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
}
/* Las filas se reparten el alto de la caja: nunca queda vacío abajo.
   (con 8 consultas llenan exacto; el tope evita filas gigantes si hay pocas) */
.dash-novedades.dash-recent .dash-history-item { flex: 1 0 auto; min-height: 56px; max-height: 118px; }
/* Estado vacío centrado ocupando toda la caja */
.dash-novedades.dash-recent .dash-history-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* ============================================================
   Vinculador de clientes de Telegram (admin) — .tg-*
   ============================================================ */
.tg-card { margin-bottom: 18px; }
.tg-card > .adm-card-head h2 { font-size: 16px; }
.tg-help, .tg-hint-sm, .tg-step-info { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.tg-hint-sm { font-size: 12px; margin: 8px 0 0; }
.tg-help a { color: var(--accent); font-weight: 700; }

.tg-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tg-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; min-width: 0; }
.tg-field-wide { flex: 2 1 300px; }
.tg-field span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tg-field input {
  height: 42px; padding: 0 12px; font-size: 15px;
  background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s ease;
}

/* Respuestas y documentos de consultas ampliadas. */
.consulta-resultado-head,
.consulta-archivo-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.consulta-resultado-head span,
.consulta-archivo-titulo span {
  color: var(--muted, #6b7280);
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.consulta-respuesta-texto {
  margin: 0;
  padding: 16px;
  max-height: 520px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid rgba(127, 127, 127, .22);
  border-radius: 14px;
  background: rgba(127, 127, 127, .07);
  color: inherit;
  font: 500 .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.consulta-datos-grid {
  display: grid;
  gap: 14px;
}
.consulta-datos-seccion {
  overflow: hidden;
  border: 1px solid rgba(127, 127, 127, .2);
  border-radius: 14px;
  background: var(--bg);
}
.consulta-datos-seccion > h3 {
  margin: 0;
  padding: 11px 14px;
  border-left: 4px solid var(--accent);
  background: rgba(169,80,54, .07);
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.35;
}
.consulta-datos-notas {
  display: grid;
  gap: 6px;
  padding: 12px 14px 0;
}
.consulta-datos-notas p {
  margin: 0;
  color: var(--ink-2);
  font-size: .86rem;
  line-height: 1.5;
}
.consulta-datos-registro { padding: 12px 14px; }
.consulta-datos-registro + .consulta-datos-registro {
  border-top: 1px solid rgba(127, 127, 127, .16);
}
.consulta-registro-numero {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.consulta-datos-registro dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 127, 127, .16);
  border-radius: 10px;
  background: rgba(127, 127, 127, .12);
}
.consulta-datos-registro dl > div {
  min-width: 0;
  padding: 9px 11px;
  background: var(--bg-soft);
}
.consulta-datos-registro dt {
  margin-bottom: 3px;
  color: var(--ink-3);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.consulta-datos-registro dd {
  margin: 0;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .consulta-datos-registro dl { grid-template-columns: 1fr; }
}
.consulta-pdf-lista {
  display: grid;
  gap: 22px;
}
.consulta-pdf-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(127, 127, 127, .2);
  border-radius: 16px;
}
.consulta-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.consulta-imagen {
  margin: 0;
  cursor: zoom-in;
}
.consulta-imagen img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(127, 127, 127, .08);
}
.consulta-imagen figcaption {
  padding-top: 8px;
  color: var(--muted, #6b7280);
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.consulta-saldo-intacto {
  margin-top: 2px !important;
  padding: 8px 13px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 999px;
  background: rgba(34, 197, 94, .08);
  color: #16803a !important;
  font-size: .78rem !important;
}
[data-theme="dark"] .consulta-saldo-intacto {
  color: #67df91 !important;
}

/* Un solo selector por buscador: se mantiene el integrado del marco naranja. */
.consulta-legacy-option-field {
  display: none !important;
}

/* Opciones sencillas para los reconocimientos faciales del proveedor alterno. */
.facial-query-options,
.facial-massive-note {
  padding: 15px;
  border: 1px solid rgba(169,80,54, .24);
  border-radius: 15px;
  background: rgba(169,80,54, .055);
}
.facial-query-options[hidden],
.facial-massive-note[hidden] {
  display: none !important;
}
.facial-query-options-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.facial-query-options-head > div {
  display: grid;
  gap: 3px;
}
.facial-query-options-head strong,
.facial-massive-note strong {
  color: var(--ink);
  font-size: .92rem;
}
.facial-query-options-head span {
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.facial-query-options-head p,
.facial-massive-note p {
  margin: 0;
  color: var(--ink-2);
  font-size: .82rem;
  line-height: 1.5;
}
.facial-query-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.facial-query-options-grid > label,
.facial-age-range label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: .79rem;
  font-weight: 750;
}
.facial-query-options-grid small,
.facial-age-range small {
  color: var(--ink-3);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.35;
}
.facial-age-range {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 11px 12px 12px;
  border: 1px solid rgba(127, 127, 127, .2);
  border-radius: 12px;
}
.facial-age-range legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: .79rem;
  font-weight: 750;
}
.facial-age-range > small {
  grid-column: 1 / -1;
}
.facial-massive-note {
  display: grid;
  gap: 5px;
}
.facial-filter-accordion {
  overflow: hidden;
  border: 1px solid rgba(127, 127, 127, .24);
  border-radius: 15px;
  background: var(--bg-soft);
  transition: border-color .18s ease, background .18s ease;
}
.facial-filter-accordion[open] {
  border-color: rgba(169,80,54, .34);
  background: rgba(169,80,54, .035);
}
.facial-filter-accordion > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 13px 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.facial-filter-accordion > summary::-webkit-details-marker { display: none; }
.facial-filter-accordion > summary:hover { background: rgba(169,80,54, .055); }
.facial-filter-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(169,80,54, .11);
  color: var(--accent);
}
.facial-filter-icon svg { width: 21px; height: 21px; }
.facial-filter-summary-copy { display: grid; gap: 3px; min-width: 0; }
.facial-filter-summary-copy strong { color: var(--ink); font-size: .9rem; }
.facial-filter-summary-copy small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: .74rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facial-filter-optional {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(169,80,54, .1);
  color: var(--accent);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.facial-filter-chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.facial-filter-accordion[open] .facial-filter-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}
.facial-filter-body {
  padding: 15px;
  border-top: 1px solid rgba(127, 127, 127, .18);
  animation: bl-fadein .18s ease;
}
.facial-filter-body > p {
  margin: 0 0 13px;
  color: var(--ink-2);
  font-size: .78rem;
  line-height: 1.5;
}
.facial-filter-body .facial-query-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.facial-filter-body .facial-age-range { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .facial-filter-body .facial-query-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cargador facial: archivo, arrastrar, portapapeles y cámara móvil. */
.facial-upload-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.facial-upload-zone {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: 100%;
  padding: 24px 18px 18px;
  border: 2px dashed rgba(127, 127, 127, .35);
  border-radius: 16px;
  background: var(--bg-soft);
  color: var(--ink);
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.facial-upload-zone[hidden] { display: none !important; }
.facial-upload-zone:hover,
.facial-upload-zone:focus-visible,
.facial-upload-zone.is-dragging {
  border-color: var(--accent);
  background: rgba(169,80,54, .075);
}
.facial-upload-zone.is-dragging { transform: scale(1.006); }
.facial-upload-zone.has-file {
  border-color: rgba(34, 197, 94, .5);
  background: rgba(34, 197, 94, .055);
}
.facial-upload-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(169,80,54, .12);
  color: var(--accent);
}
.facial-upload-icon svg { width: 27px; height: 27px; }
.facial-upload-copy { display: grid; gap: 2px; }
.facial-upload-copy strong { color: var(--ink); font-size: 1rem; }
.facial-upload-copy span { color: var(--ink-2); font-size: .82rem; }
.facial-upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.facial-upload-btn {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(127, 127, 127, .28);
  border-radius: 11px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.facial-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.facial-upload-btn.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.facial-upload-btn.is-primary:hover { background: #e94722; color: #fff; }
.facial-upload-shortcut {
  color: var(--ink-3);
  font-size: .72rem;
  line-height: 1.45;
}
.facial-upload-shortcut kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  border: 1px solid rgba(127, 127, 127, .3);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink-2);
  font: 700 .68rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.facial-upload-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--ink-2);
  font-size: .75rem;
}
.facial-upload-status.is-ok { color: #16803a; }
.facial-upload-status.is-error { color: #dc2626; }
[data-theme="dark"] .facial-upload-status.is-ok { color: #67df91; }
.dash-file-preview.is-enhanced {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 14px;
  background: rgba(34, 197, 94, .055);
}
.dash-file-preview.is-enhanced img {
  width: 100%;
  height: 128px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(127, 127, 127, .1);
  box-shadow: none;
}
.dash-file-preview-info { display: grid; gap: 4px; min-width: 0; text-align: left; }
.dash-file-preview-info strong,
.dash-file-preview-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-file-preview-info strong { color: var(--ink); font-size: .88rem; }
.dash-file-preview-info span { color: var(--ink-2); font-size: .76rem; }
.dash-file-preview-info small { color: #16803a; font-size: .72rem; font-weight: 700; }
[data-theme="dark"] .dash-file-preview-info small { color: #67df91; }
.dash-file-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.dash-file-preview-change,
.dash-file-preview-remove {
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}
.dash-file-preview-change {
  border: 1px solid rgba(127, 127, 127, .3);
  color: var(--ink-2);
}
.dash-file-preview-change:hover { border-color: var(--accent); color: var(--accent); }
.dash-file-preview-remove {
  border: 1px solid rgba(239, 68, 68, .3);
  color: #dc2626;
}
.facial-camera-modal[hidden] { display: none !important; }
.facial-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(7px);
}
body.has-facial-camera { overflow: hidden; }
.facial-camera-dialog {
  width: min(680px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: #14161b;
  color: #fff;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .5);
}
.facial-camera-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.facial-camera-dialog > header > div { display: grid; gap: 2px; }
.facial-camera-dialog > header span {
  color: #ff6a45;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.facial-camera-dialog > header strong { font-size: 1.02rem; }
.facial-camera-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: 300 1.65rem/1 sans-serif;
  cursor: pointer;
}
.facial-camera-view {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  overflow: hidden;
  border-radius: 15px;
  background: #050608;
}
.facial-camera-view video {
  display: block;
  width: 100%;
  max-height: min(64dvh, 520px);
  object-fit: contain;
}
.facial-camera-frame {
  position: absolute;
  inset: 9%;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 16px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .08);
}
.facial-camera-message {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font-size: .72rem;
  text-align: center;
}
.facial-camera-help {
  margin: 11px 0 0;
  color: #aeb4c0;
  font-size: .75rem;
  line-height: 1.45;
  text-align: center;
}
.facial-camera-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}
.facial-camera-actions button {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
}
.facial-camera-actions .facial-camera-capture {
  min-width: 150px;
  border-color: var(--accent);
  background: var(--accent);
}
.facial-camera-actions .facial-camera-capture:disabled {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .45);
  cursor: wait;
}
.facial-camera-actions .facial-camera-fallback { border-color: #ffbd4a; color: #ffcf79; }
@media (max-width: 640px) {
  .facial-query-options-head { flex-direction: column; gap: 6px; }
  .facial-query-options-grid,
  .facial-age-range { grid-template-columns: 1fr; }
  .facial-age-range > small { grid-column: auto; }
  .facial-filter-accordion > summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  .facial-filter-summary-copy small { white-space: normal; line-height: 1.35; }
  .facial-filter-optional { display: none; }
  .facial-filter-body { padding: 12px; }
  .facial-filter-body .facial-query-options-grid { grid-template-columns: 1fr; }
  .facial-upload-zone { padding: 20px 12px 14px; }
  .facial-upload-actions { width: 100%; }
  .facial-upload-btn { flex: 1 1 135px; }
  .dash-file-preview.is-enhanced { grid-template-columns: 96px minmax(0, 1fr); }
  .dash-file-preview.is-enhanced img { height: 96px; }
  .dash-file-preview-actions { grid-column: 1 / -1; width: 100%; }
  .dash-file-preview-actions button { flex: 1 1 0; }
  .facial-camera-modal { padding: 0; align-items: stretch; }
  .facial-camera-dialog {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 14px;
  }
  .facial-camera-view { min-height: min(66dvh, 520px); }
  .facial-camera-actions button { flex: 1 1 120px; }
}
.tg-field input:focus { outline: none; border-color: var(--accent); }
.tg-form-row .adm-btn { height: 42px; }

.tg-status { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.tg-status.is-ok { color: #16a34a; }
.tg-done { font-size: 15px; color: var(--ink); font-weight: 700; margin: 0 0 12px; }
.adm-hint.is-warn { color: #b45309; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); border-radius: 10px; padding: 10px 14px; }

/* Lista de clientes vinculados */
.tg-client {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft); margin-bottom: 8px;
}
.tg-client-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tg-client-avatar {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; background: var(--bg-pill); flex: 0 0 auto;
}
.tg-client-main strong { display: block; color: var(--ink); font-size: 14.5px; }
.tg-client-sub { display: block; color: var(--ink-2); font-size: 12.5px; }
.tg-client-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tg-btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }

.tg-badge { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tg-badge.is-ok { color: #16a34a; }
.tg-badge.is-err { color: #dc2626; }

@media (max-width: 640px) {
  .tg-form-row .adm-btn { width: 100%; }
  .tg-client { flex-direction: column; align-items: stretch; }
  .tg-client-right { justify-content: space-between; }
}

/* Cabecera de "Clientes vinculados" con botón + a la derecha */
.tg-clients-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Accion de descarga sobre el visor: visible sin recorrer todo el PDF. */
.api-pdf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
}
.api-pdf-wrap > .api-pdf-header { margin-bottom: 0; }
.api-pdf-download.is-top-action {
  align-self: center;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 8px 16px;
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(169,80,54, .2);
}
.api-pdf-download.is-top-action:hover {
  background: var(--accent-2);
  color: #FFFFFF;
  border-color: var(--accent-2);
}
.consulta-archivo-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.consulta-archivo-titulo .api-pdf-download.is-top-action { margin-left: auto; }

@media (max-width: 640px) {
  .api-pdf-header,
  .consulta-archivo-titulo { flex-wrap: wrap; }
  .api-pdf-download.is-top-action {
    padding: 8px 13px;
    font-size: 12px;
  }
}

/* Presentacion del documento: hoja centrada y laterales de vidrio difuminado. */
.api-pdf-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  padding: 18px clamp(18px, 6vw, 96px);
  overflow: hidden;
  border: 1px solid rgba(127, 127, 127, .18);
  border-radius: 16px;
  background: rgba(248, 248, 248, .58);
  backdrop-filter: blur(18px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
}
.api-pdf-stage::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -42px;
  background-image: var(--pdf-preview-image, linear-gradient(135deg,
    rgba(169,80,54, .18), rgba(255, 255, 255, .72) 46%, rgba(169,80,54, .12)));
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(80%);
  transform: scale(1.08);
  opacity: .3;
}
.api-pdf-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0%,
    rgba(255, 255, 255, .18) 27%,
    rgba(255, 255, 255, .04) 43%,
    rgba(255, 255, 255, .04) 57%,
    rgba(255, 255, 255, .18) 73%,
    rgba(255, 255, 255, .5) 100%);
}
.api-pdf-stage .api-pdf-embed {
  position: relative;
  z-index: 1;
  width: min(100%, 630px);
  height: min(68vh, 720px);
  border: 1px solid rgba(127, 127, 127, .24);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .2), 0 3px 10px rgba(0, 0, 0, .12);
}
.api-pdf-page-preview {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 630px);
  height: auto;
  border: 1px solid rgba(127, 127, 127, .2);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .2), 0 3px 10px rgba(0, 0, 0, .12);
}
.api-pdf-viewer {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.api-pdf-main { min-width: 0; }
.api-pdf-thumbnails {
  display: flex;
  position: sticky;
  top: 76px;
  flex-direction: column;
  gap: 9px;
  max-height: min(78vh, 850px);
  padding: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(127, 127, 127, .18);
  border-radius: 14px;
  background: rgba(248, 248, 248, .72);
  scrollbar-width: thin;
}
.api-pdf-thumbnail {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  width: 100%;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-2);
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease,
              transform 140ms ease;
}
.api-pdf-thumbnail:hover {
  color: var(--ink);
  background: rgba(169,80,54, .08);
  transform: translateY(-1px);
}
.api-pdf-thumbnail.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(169,80,54, .1);
}
.api-pdf-thumbnail img,
.api-pdf-thumb-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border: 1px solid rgba(127, 127, 127, .22);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.api-pdf-pagebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid rgba(127, 127, 127, .18);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: rgba(248, 248, 248, .78);
  color: var(--ink);
  font-size: 12px;
}
.api-pdf-pagebar button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid rgba(127, 127, 127, .24);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  font-size: 17px;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.api-pdf-pagebar button:hover:not(:disabled) {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.api-pdf-pagebar button:disabled { cursor: default; opacity: .35; }
.api-pdf-viewer .api-pdf-stage { border-radius: 0 0 16px 16px; }
[data-theme="dark"] .api-pdf-thumbnails,
[data-theme="dark"] .api-pdf-pagebar { background: rgba(28, 30, 34, .76); }
[data-theme="dark"] .api-pdf-stage {
  background: rgba(28, 30, 34, .56);
  border-color: rgba(255, 255, 255, .09);
}
[data-theme="dark"] .api-pdf-stage::before { opacity: .4; }
[data-theme="dark"] .api-pdf-stage::after {
  background: linear-gradient(90deg,
    rgba(20, 22, 25, .58) 0%,
    rgba(20, 22, 25, .25) 27%,
    rgba(20, 22, 25, .06) 43%,
    rgba(20, 22, 25, .06) 57%,
    rgba(20, 22, 25, .25) 73%,
    rgba(20, 22, 25, .58) 100%);
}

@media (max-width: 720px) {
  .api-pdf-viewer {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .api-pdf-thumbnails {
    position: static;
    flex-direction: row;
    max-height: none;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .api-pdf-thumbnail {
    width: 82px;
    scroll-snap-align: start;
  }
  .api-pdf-pagebar { min-height: 38px; }
  .api-pdf-stage {
    min-height: 0;
    padding: 7px;
    border-radius: 12px;
  }
  .api-pdf-stage .api-pdf-embed {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 170px);
    aspect-ratio: 210 / 297;
    border-radius: 7px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  }
  .api-pdf-page-preview {
    width: 100%;
    border-radius: 7px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  }
}

/* ===== Consulta IMEI: identidad y estado del equipo ===== */
.api-imei {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%),
    var(--bg-card, #fff);
}
.api-imei-hero {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}
.api-imei-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, #ff6a44, #ff3d16);
  box-shadow: 0 12px 28px rgba(255, 78, 39, .22);
}
.api-imei-icon svg { width: 29px; height: 29px; }
.api-imei-title { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.api-imei-title > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}
.api-imei-title strong {
  color: var(--ink);
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.15;
}
.api-imei-title small { color: var(--muted); font-size: 12px; font-weight: 700; }
.api-imei-chips { display: flex; gap: 8px; padding: 14px 22px 0; flex-wrap: wrap; }
.api-imei-chip {
  padding: 7px 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card, #fff) 88%, #a0a8b2);
  font-size: 11px;
  font-weight: 800;
}
.api-imei-chip.is-clean {
  color: #18723b;
  border-color: rgba(34, 197, 94, .3);
  background: rgba(34, 197, 94, .1);
}
.api-imei-chip.is-danger {
  color: #b42318;
  border-color: rgba(239, 68, 68, .3);
  background: rgba(239, 68, 68, .1);
}
.api-imei-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 22px 22px;
}
.api-imei-panel {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-card, #fff) 94%, #f1f3f5);
}
.api-imei-panel h4 {
  margin: 0 0 11px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.api-imei-panel dl { display: grid; gap: 0; margin: 0; }
.api-imei-panel dl > div {
  display: grid;
  grid-template-columns: minmax(110px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}
.api-imei-panel dl > div:first-child { padding-top: 0; border-top: 0; }
.api-imei-panel dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.api-imei-panel dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .api-imei-hero { align-items: flex-start; padding: 16px; }
  .api-imei-icon { width: 47px; height: 47px; border-radius: 14px; }
  .api-imei-chips { padding: 12px 16px 0; }
  .api-imei-grid { grid-template-columns: minmax(0, 1fr); padding: 13px 16px 17px; }
  .api-imei-panel dl > div { grid-template-columns: minmax(95px, .8fr) minmax(0, 1.2fr); }
}

/* Nota al pie del resultado IMEI (aclara cobertura de la consulta gratuita) */
.api-imei-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ============================================================
   RESPONSIVE MÓVIL FINAL — densidad, ritmo y lectura
   Esta capa vive al final para resolver reglas móviles históricas que
   competían entre sí. No modifica la composición de escritorio.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --pad-x: clamp(12px, 3.8vw, 16px);
    --header-h: 52px;
    --info-bar-h: 0px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    min-width: 0;
    padding-bottom: 0;
    font-size: 14px;
  }
  main, section, article, aside, form, header, footer,
  .home, .planes-main, .tutoriales-main, .dashboard-main,
  .dash-content, .plan-card, .tut-card {
    min-width: 0;
    max-width: 100%;
  }
  img, video, canvas, iframe { max-width: 100%; }
  .brand-watermark { display: none; }

  /* La franja informativa deja de cubrir el contenido del teléfono. */
  .info-bar {
    position: static;
    min-height: 0;
    margin-top: auto;
  }
  .info-bar-inner { padding: 8px var(--pad-x); }
  .info-bar p { font-size: 10.5px; line-height: 1.35; }
  .info-bar-link { display: inline; margin-left: 2px; white-space: normal; }

  /* Cabecera pública: una sola fila limpia y de altura contenida. */
  .site-header:not(.dash-header) .header-inner,
  .site-header--minima .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    min-height: 52px;
    height: 52px;
    padding: 0 var(--pad-x);
    row-gap: 0;
    column-gap: 8px;
  }
  .site-header:not(.dash-header) .header-left,
  .site-header:not(.dash-header) .header-right {
    grid-row: 1;
  }
  .site-header:not(.dash-header) .header-left { grid-column: 1; }
  .site-header:not(.dash-header) .header-right { grid-column: 2; }
  .logo { gap: 7px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-text { font-size: 16px; }
  .site-header:not(.dash-header) .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .site-header:not(.dash-header) .header-right .btn {
    height: 36px;
    padding: 0 11px;
    font-size: 12px;
  }

  /* Inicio / acceso: menos aire vacío y banner proporcional. */
  .home {
    padding: 14px var(--pad-x) 24px;
    gap: 18px;
  }
  .login-block h1 { margin-bottom: 7px; font-size: 21px; }
  .login-block .subtitle { margin-bottom: 16px; font-size: 13px; line-height: 1.4; }
  .login-form { gap: 11px; }
  .field { gap: 4px; }
  .field label { font-size: 12px; }
  .field input { height: 44px; padding: 0 13px; }
  .forgot { margin: 1px 0; font-size: 12.5px; }
  .btn-login { height: 44px; font-size: 14px; }
  .signup-microcopy { margin-top: 13px; font-size: 12px; }
  .hero-col { padding-top: 2px; }
  .hero-carousel {
    width: min(82vw, 280px) !important;
    max-width: 280px !important;
    margin-inline: auto;
  }
  .carousel-slide { border-radius: 20px; }

  /* Planes públicos: dos tarjetas compactas por fila sin perder contenido. */
  .planes-main { padding: 20px var(--pad-x) 38px; }
  .planes-head { margin-bottom: 17px; }
  .planes-head h1 { margin-bottom: 4px; font-size: 22px; }
  .planes-head p { font-size: 13px; line-height: 1.42; }
  body.planes-page .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body.planes-page .plan-card {
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
  }
  body.planes-page .plan-card.has-plan-art .plan-head {
    top: 16px;
    right: 16px;
  }
  body.planes-page .plan-art { border-radius: 9px; }
  body.planes-page .plan-card.has-plan-art .plan-info {
    min-height: 76px;
    padding: 9px 8px 26px 10px;
    border-radius: 10px;
  }
  body.planes-page .plan-card.has-plan-art .plan-info::after {
    top: auto;
    right: 7px;
    bottom: 7px;
    transform: none;
    padding: 4px 6px;
    font-size: 7.5px;
  }
  body.planes-page .plan-title { font-size: 15px; }
  body.planes-page .plan-subtitle { font-size: 11px; line-height: 1.25; }
  body.planes-page .plan-price {
    min-height: 40px;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 7px 9px;
    border-radius: 10px;
  }
  body.planes-page .plan-price-amount { font-size: 18px; }
  body.planes-page .plan-price-period { font-size: 10px; }
  body.planes-page .plan-tagline { padding: 5px 7px; font-size: 10px; line-height: 1.25; }
  body.planes-page .plan-features { gap: 7px; }
  body.planes-page .plan-features li { gap: 6px; font-size: 11px; line-height: 1.32; }
  body.planes-page .plan-feature-icon { width: 14px; height: 14px; }
  body.planes-page .plan-feature-icon svg { width: 13px; height: 13px; }
  body.planes-page .plan-cta { height: 40px; margin-top: 1px; padding: 0 7px; font-size: 11.5px; }
  body.planes-page .plan-badge { padding: 4px 7px; font-size: 8px; }

  /* Tutoriales: portada compacta; la ilustración se recorta antes de las piernas. */
  .tutoriales-page .tutoriales-main {
    width: calc(100% - 20px);
    padding: 12px 0 40px;
  }
  .tutoriales-page .tut-hero {
    min-height: 400px;
    margin-bottom: 16px;
    padding: 16px 12px;
    border-radius: 16px;
  }
  .tutoriales-page .tut-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(27px, 8.2vw, 32px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  .tutoriales-page .tut-hero > .tut-hero-copy > p {
    margin-bottom: 13px;
    font-size: 12px;
    line-height: 1.42;
  }
  .tutoriales-page .tut-hero-actions { gap: 8px; }
  .tutoriales-page .tut-primary-action,
  .tutoriales-page .tut-secondary-action {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 12px;
  }
  .tutoriales-page .tut-action-play { width: 24px; height: 24px; border-radius: 7px; }
  .tutoriales-page .tut-hero-metrics { display: none; }
  .tutoriales-page .tut-hero-metrics span { width: 33.333%; padding: 0 7px; }
  .tutoriales-page .tut-hero-metrics span:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, 0.12); }
  .tutoriales-page .tut-hero-metrics strong { font-size: 12.5px; }
  .tutoriales-page .tut-hero-visual > img {
    object-position: 69% 34%;
    transform: scale(1.55);
    transform-origin: 72% 8%;
  }
  .tutoriales-page .tut-library-head { margin-bottom: 14px; }
  .tutoriales-page .tut-library-head h2 { font-size: 22px; line-height: 1.12; }
  .tutoriales-page .tut-section-kicker { margin-bottom: 4px; font-size: 9px; }
  .tutoriales-page .tut-toolbar { margin-bottom: 14px; }
  .tutoriales-page .tut-filters { gap: 6px; padding-bottom: 3px; }
  .tutoriales-page .tut-chip { min-height: 36px; padding: 7px 10px; font-size: 10.5px; }
  .tutoriales-page .tut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .tutoriales-page .tut-card { border-radius: 13px; }
  .tutoriales-page .tut-thumb-play { width: 40px; height: 40px; }
  .tutoriales-page .tut-thumb-play::before { display: none; }
  .tutoriales-page .tut-thumb-play svg { width: 19px; height: 19px; }
  .tutoriales-page .tut-badge-dur { right: 7px; bottom: 7px; padding: 4px 6px; font-size: 9.5px; }
  .tutoriales-page .tut-card-body { gap: 6px; padding: 10px; }
  .tutoriales-page .tut-card-meta { font-size: 8px; }
  .tutoriales-page .tut-card-title { font-size: 13.5px; }
  .tutoriales-page .tut-card-desc { display: none; }
  .tutoriales-page .tut-card-footer { padding-top: 8px; font-size: 9.5px; }

  /* Modal de tutorial: aprovecha toda la pantalla sin marcos gigantes. */
  .tutoriales-page .tut-modal { align-items: flex-start; padding: 6px; }
  .tutoriales-page .tut-modal-card {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 14px;
  }
  .tutoriales-page .tut-modal-layout { min-height: 0; }
  .tutoriales-page .tut-player-shell { padding: 8px; }
  .tutoriales-page .tut-modal-media { border-radius: 10px; }
  .tutoriales-page .tut-modal-body { padding: 18px 13px 14px; }
  .tutoriales-page .tut-modal-body h2 { margin-top: 8px; font-size: 20px; }
  .tutoriales-page .tut-step-status { margin-top: 16px; }
  .tutoriales-page .tut-step-status small { display: none; }
  .tutoriales-page .tut-steps button { grid-template-columns: 30px 1fr auto; gap: 8px; padding: 8px; }

  /* Dashboard y consultas: densidad móvil uniforme. */
  .site-header.dash-header .dash-header-inner { height: 52px; padding-inline: 9px; gap: 6px; }
  .dash-menu-toggle { width: 36px; height: 36px; border-radius: 9px; }
  .dash-menu-toggle svg { width: 20px; height: 20px; }
  .dash-logo .logo-mark { width: 27px; height: 27px; }
  .dash-header-right { gap: 4px; }
  .dash-guides-toggle { min-height: 32px; padding: 5px 8px; font-size: 8px; }
  .dash-user-trigger { width: 36px; height: 36px; }
  .dash-content {
    padding: 10px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  .dash-welcome-head { margin-bottom: 11px; }
  .dash-welcome-head h1 { font-size: 22px; }
  .dash-welcome-head p { font-size: 12.5px; }
  .dash-stats { gap: 7px !important; margin-bottom: 12px; }
  .dash-stat-card { padding: 10px 9px; }
  .dash-stat-value { font-size: 19px !important; }
  .dash-stat-label { font-size: 9.5px !important; }
  .dash-stat-link, .dash-stat-sub { font-size: 9.5px; }
  .dash-novedades-row { gap: 10px !important; margin-bottom: 12px !important; }
  .dash-form-card { padding: 12px; }
  .dash-form-head { gap: 6px; margin-bottom: 10px; padding-bottom: 10px; }
  .dash-form-icon { width: 40px; height: 40px; }
  .dash-form-icon svg { width: 20px; height: 20px; }
  .dash-form-title { font-size: 17px; }
  .dash-form-desc { font-size: 12px; line-height: 1.4; }
  .dash-form-submit { min-height: 48px; height: 48px; font-size: 15px; }
  .dash-form-result { padding: 12px; }
  .dash-result { padding: 11px; }
  .dash-form-guide-grid { gap: 8px; }
  .dash-form-guide-card { border-radius: 11px; }
  .dash-onboarding { padding: 14px; }
  .dash-onboarding-head h2 { font-size: 17px; }
  .dash-onboarding-steps { gap: 8px; }
  .dash-onboarding-step { padding: 11px; }

  /* Recarga: 8 paquetes compactos en dos columnas incluso en teléfono. */
  .recarga-page .dash-content { padding: 8px !important; }
  .recarga-shell { gap: 8px; }
  .recarga-shell .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-top: 4px;
  }
  .recarga-shell .plan-card { gap: 4px; padding: 8px 7px; border-radius: 11px; }
  .recarga-shell .plan-card.has-plan-art .plan-head { top: 12px; right: 11px; }
  .recarga-shell .plan-art { border-radius: 8px; }
  .recarga-shell .plan-card.has-plan-art .plan-info {
    min-height: 65px;
    padding: 7px 6px 23px 8px;
    border-radius: 9px;
  }
  .recarga-shell .plan-card.has-plan-art .plan-info::before { width: 20px; height: 2px; margin-bottom: 3px; }
  .recarga-shell .plan-card.has-plan-art .plan-info::after {
    top: auto;
    right: 6px;
    bottom: 6px;
    transform: none;
    padding: 3px 5px;
    font-size: 7px;
  }
  .recarga-shell .plan-card .plan-title { font-size: 14px; }
  .recarga-shell .plan-card .plan-subtitle { font-size: 10px; line-height: 1.2; }
  .recarga-shell .plan-card .plan-price { min-height: 35px; padding: 5px 7px; border-radius: 9px; }
  .recarga-shell .plan-card .plan-price-amount { font-size: 16px; }
  .recarga-shell .plan-card .plan-price-period { font-size: 9px; }
  .recarga-shell .plan-card .plan-tagline { padding: 4px 5px; font-size: 9px; line-height: 1.2; }
  .recarga-shell .plan-card .plan-cta { height: 36px; padding: 0 5px; font-size: 11px; }
  .recarga-shell .plan-badge { padding: 3px 5px; font-size: 7.5px; }

  /* Pago Yape: QR y formulario visibles sin márgenes desperdiciados. */
  .yape-modal {
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
  }
  .yape-modal-shell { width: 100%; gap: 8px; }
  .yape-modal-card { padding: 13px; border-radius: 12px; }
  .yape-modal-head { margin-bottom: 10px; padding-bottom: 9px; }
  .yape-modal-head h2 { font-size: 15px; }
  .yape-qr-frame { padding: 10px; }
  .yape-qr-mock { width: 150px; height: 150px; }
  .yape-amount-box { padding: 7px 8px; }
  .yape-tutorial { gap: 8px; padding: 11px; border-radius: 12px; }
  .yape-tutorial-stage { width: min(100%, 280px); margin-inline: auto; }
  .yape-tutorial-carousel { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }
  .yape-tutorial-arrow { width: 30px; height: 30px; }

  /* Soporte, detalle de servicio y login independiente. */
  .soporte-main, .servicio-main { padding: 22px var(--pad-x) 38px; }
  .soporte-head { margin-bottom: 22px; }
  .soporte-head h1, .servicio-title { font-size: 22px; }
  .soporte-head p, .servicio-desc { font-size: 13px; }
  .soporte-item { gap: 11px; padding: 14px 0; }
  .soporte-item-num { width: 22px; }
  .servicio-info-section { margin-bottom: 24px; padding: 16px; }
  .servicio-info-list { gap: 9px; }
  .servicio-info-list li { padding-left: 24px; font-size: 13px; }
  body.login-page { padding: 12px var(--pad-x); }
  .login-card { padding: 22px 18px 20px; }
  .login-card-logo { margin-bottom: 8px; }
  .login-card-logo img { width: 52px; height: 52px; }
  .login-card-title { margin-bottom: 20px; font-size: 20px; }

  /* Tablas y cadenas largas nunca ensanchan el viewport. */
  .api-table-wrap,
  .dash-table-wrap,
  .adm-table-wrap,
  .result-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  pre, code, td, th, dd { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  :root { --pad-x: 11px; }
  .logo-text { display: none; }
  .site-header:not(.dash-header) .header-right .btn-primary { padding-inline: 9px; }
  body.planes-page .plans-grid,
  .recarga-shell .plans-grid,
  .tutoriales-page .tut-grid {
    grid-template-columns: 1fr !important;
  }
  body.planes-page .plan-card { padding: 11px; }
  .recarga-shell .plan-card { padding: 9px; }
  .tutoriales-page .tut-hero {
    min-height: 390px;
    padding: 15px 11px;
  }
  .tutoriales-page .tut-hero h1 { font-size: 26px; }
  .tutoriales-page .tut-hero-metrics { display: none; }
  .dash-guides-toggle { display: none; }
  .dash-stats { grid-template-columns: 1fr !important; }
  .dash-stats .dash-stat-card.is-primary { grid-column: auto; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .tutoriales-page .tut-hero {
    min-height: 390px;
    padding: 20px 48% 20px 20px;
  }
  .tutoriales-page .tut-hero-visual > img {
    object-position: 70% center;
    transform: none;
  }
  .tutoriales-page .tut-hero h1 { font-size: 28px; }
  .tutoriales-page .tut-hero-metrics { margin-top: 12px; }
  .tutoriales-page .tut-hero::before {
    background: linear-gradient(90deg, rgba(12,14,18,.99) 0%, rgba(12,14,18,.95) 48%, rgba(12,14,18,.2) 72%, rgba(12,14,18,.12) 100%);
  }
}

/* ============================================================
   ACCIONES UNIVERSALES DEL RESULTADO
   Siempre visibles: cerrar el resultado o volver al formulario.
   ============================================================ */
.dash-result-toolbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
}
.dash-result-new-query,
.dash-result-toolbar-close {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.dash-result-new-query {
  gap: 8px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 850;
}
.dash-result-new-query svg { width: 16px; height: 16px; color: var(--accent); }
.dash-result-toolbar-close {
  width: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}
.dash-result-toolbar-close svg { width: 17px; height: 17px; }
.dash-result-new-query:hover,
.dash-result-toolbar-close:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}
.dash-result-new-query:active,
.dash-result-toolbar-close:active { transform: scale(.97); }

/* Results share a single compact title/close row. */
.md-document-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.md-document-heading > h3 { margin: 0; font-size: 18px; }
.md-document-heading > .dash-result-toolbar { width: auto; margin: 0; flex: 0 0 auto; }
.md-document-heading .dash-result-toolbar-close { width: 36px; min-height: 36px; flex-basis: 36px; }
.dash-result-body:has(.md-document-list) { padding: 0; }

@media (max-width: 767px) {
  body.has-modal-result #form-result {
    top: max(7px, env(safe-area-inset-top));
    right: 7px;
    bottom: max(7px, env(safe-area-inset-bottom));
    left: 7px;
    padding: 0 10px 12px !important;
    border-radius: 14px;
  }
  body.has-modal-result #form-result:has(.dash-result-toolbar) {
    justify-content: flex-start;
  }
  body.has-modal-result #form-result .dash-result-toolbar {
    position: sticky;
    top: 0;
    width: calc(100% + 20px);
    margin: 0 -10px 10px;
    padding: 9px 10px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
  }
  .dash-result-new-query { min-height: 42px; padding-inline: 12px; font-size: 12px; }
  .dash-result-toolbar-close { width: 42px; min-height: 42px; flex-basis: 42px; }
}