/* Panel Cofferdock — el hub de conexión: foto de producto, ámbar de conexión.
   Ver DESIGN.md para el contrato completo del mundo visual. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* Variables de color. El PREDETERMINADO es el tema CLARO (definido en :root, más
   abajo) — "el hub bajo luz de estudio". Aquí va el tema OSCURO — "el hub de noche" —,
   que se activa con el botón (html[data-theme="dark"]). Así el color sale de
   variables y cambiar de tema no obliga a reescribir las reglas. */
html[data-theme="dark"] {
  --bg:           #131313;
  --bg-card:      #1c1d1f;
  --bg-hover:     #202124;
  --border:       #282930;
  --border-hover: #383a42;
  --text:         #f0f0f1;
  --muted:        #8a8a90;
  --accent:       #f2a93b;
  --accent-dim:   rgba(242,169,59,0.14);
  --on-accent:    #1a1206;
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.10);
  --yellow:       #f59e0b;
  --red:          #ef4444;
  --red-dim:      rgba(239,68,68,0.10);
  /* Superficies/textos que antes iban "a mano"; ahora variables para el tema. */
  --bg-input:         #17181a;
  --placeholder:      #55565c;
  --overlay-active:   rgba(255,255,255,0.08);
  --progress-bg:      #232428;
  --doc-text:         #b8b8bd;
  --code-bg:          #202124;
  --code-text:        #f5c37e;
  --pre-text:         #e6e6e8;
  --alert-error-text: #ff9b9b;
  --alert-ok-text:    #86efac;
  --hero-text:        #f0f0f1;
  --hero-faint:       rgba(255,255,255,0.35);
}

/* ── Tema CLARO = el PREDETERMINADO de la web (sin atributo) — "el hub bajo luz de
   estudio". El botón sol/luna cambia a oscuro y recuerda la elección. ── */
:root {
  --bg:           #eeede9;
  --bg-card:      #fbfaf8;
  --bg-hover:     #e6e4de;
  --border:       #d6d4cb;
  --border-hover: #c2c0b5;
  --text:         #26251f;
  --muted:        #64615a;
  --accent:       #8a5210;
  --accent-dim:   rgba(138,82,16,0.10);
  --on-accent:    #ffffff;
  --green:        #16a34a;
  --green-dim:    rgba(22,163,74,0.12);
  --yellow:       #b45309;
  --red:          #dc2626;
  --red-dim:      rgba(220,38,38,0.10);
  --bg-input:         #f3f2ee;
  --placeholder:      #9d9a90;
  --overlay-active:   rgba(0,0,0,0.06);
  --progress-bg:      #e2e0d9;
  --doc-text:         #4a4842;
  --code-bg:          #e9e7e1;
  --code-text:        #8a5210;
  --pre-text:         #2a2925;
  --alert-error-text: #b91c1c;
  --alert-ok-text:    #15803d;
  --hero-text:        #201f1a;
  --hero-faint:       rgba(0,0,0,0.40);
  /* Tipografía: Archivo es la única voz para titulares Y cuerpo — un hub de hardware
     no necesita un pareado editorial. Mono para etiquetas, código y cifras. */
  --font-display: 'Archivo', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  /* Sticky footer: cabecera arriba, contenido que crece, y el pie SIEMPRE abajo. */
  display: flex;
  flex-direction: column;
}
/* El contenido principal ocupa el espacio libre y empuja el footer al fondo. */
body > main { flex: 1 0 auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco de teclado: el mismo ámbar del sistema, nunca el azul por defecto del
   navegador (que además desentona con la paleta). Un anillo, no un cambio de
   fondo, para que se note igual en botones, enlaces, puertos y filas. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .hub-port:focus-visible,
.tool-row:focus-visible, .nav-tab:focus-visible, .lang-opt:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hub-port:focus-visible { outline-offset: 3px; }

/* ── Header ─────────────────────────────────────────── */
.header {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  row-gap: 12px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.logo span { color: var(--accent); }
.logo .tag {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* Botón de menú (hamburguesa): OCULTO en escritorio, visible solo en móvil.
   Tres rayas que se animan a una "X" al abrir el menú. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 38px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Layout centrado (login / registro / verify) ────── */
.center-screen {
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.card-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 28px;
}
/* Línea de confianza del registro (sin tarjeta, gratis, cancela cuando quieras). */
.reg-trust { color: var(--green); font-size: 0.82rem; font-weight: 500; margin: 2px 0 26px; line-height: 1.6; }

/* ── Formularios ────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input::placeholder { color: var(--placeholder); }
.form-input:focus { border-color: var(--accent); }
.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.form-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.85rem; color: var(--muted); line-height: 1.4;
  margin: -2px 0 18px; cursor: pointer;
}
.form-check input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.form-check a { color: var(--accent); }

/* ── Botones ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); transform: translateY(-1px); }
.btn-ghost {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-neutral {
  background: transparent;
  border-color: var(--border-hover);
  color: var(--muted);
}
.btn-neutral:hover { color: var(--text); border-color: var(--border-hover); }
.btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
  padding: 8px 16px;
  font-size: 0.72rem;
}
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-full { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.75rem; }

/* ── Entrar con Google (OAuth) ──────────────────────── */
/* Bloque "o ────" + botón claro con la G de Google (guía de marca: fondo claro). */
.oauth { margin-top: 18px; }
.oauth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.oauth-sep::before, .oauth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn-google { background: #ffffff; color: #1f1f1f; border-color: #dadce0; }
.btn-google:hover { background: #f3f4f6; border-color: #c6c9cd; transform: translateY(-1px); }
.btn-google .g-icon { width: 18px; height: 18px; display: block; }
.oauth-terms { text-align: center; margin-top: 10px; }

/* ── Mensajes ───────────────────────────────────────── */
.alert {
  font-size: 0.9rem;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.alert-error { background: var(--red-dim); color: var(--alert-error-text); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
/* Aviso "te quedan X usos" → mejorar plan (botón a la derecha). */
.limit-nudge { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--accent-dim); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.alert-ok    { background: var(--green-dim); color: var(--alert-ok-text); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.msg { font-size: 0.9rem; margin-top: 14px; min-height: 1.2em; }
.msg-error { color: var(--alert-error-text); }
.msg-ok { color: var(--alert-ok-text); }
.hidden { display: none !important; }
.text-center { text-align: center; }

.foot-link { margin-top: 22px; font-size: 0.9rem; color: var(--muted); text-align: center; }

/* ── Dashboard ──────────────────────────────────────── */
.container { max-width: 880px; margin: 0 auto; padding: 36px 24px 80px; }
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.page-sub { color: var(--muted); margin-bottom: 28px; font-size: 0.95rem; }

.stats {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin-bottom: 36px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: flex-start;
}
.stat {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 180px;
}
.stat-uso { text-align: right; min-width: 280px; }
.stat-uso .progress { margin-left: auto; }
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -1px; }
.stat-value small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.plan-badge {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  padding: 4px 14px;
  border-radius: 10px;
}
.progress { height: 6px; background: var(--progress-bg); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 10px; transition: width 0.4s ease; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.section-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }

/* Caja "key recién creada" */
.newkey {
  background: var(--green-dim);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 22px;
}
.newkey-warn { color: var(--alert-ok-text); font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; }
.newkey-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.newkey-value {
  flex: 1; min-width: 220px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-family: ui-monospace, monospace; font-size: 0.9rem;
  color: var(--text); word-break: break-all; user-select: all;
}
/* Onboarding: saludo de bienvenida + ejemplo listo para copiar bajo la primera llave. */
.newkey-welcome { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--green); margin-bottom: 10px; }
.newkey-example { margin-top: 16px; }
.newkey-example-head { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.newkey-example pre { margin-bottom: 10px; }
.newkey-example-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Lista de llaves (plana: filas separadas por una línea fina, sin caja) */
.keys { display: flex; flex-direction: column; }
.key {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 2px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.key:last-child { border-bottom: none; }
.key.revoked { opacity: 0.5; }
.key-main { min-width: 0; }
.key-name { font-weight: 700; margin-bottom: 4px; }
.key-name .revoked-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: 10px;
  padding: 1px 8px; margin-left: 8px; vertical-align: middle;
}
.key-mask { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
.key-meta { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

.empty {
  text-align: center; color: var(--muted); padding: 40px 20px;
  border: 1px dashed var(--border); border-radius: 12px;
}

.loading { color: var(--muted); padding: 40px 0; text-align: center; }

/* Cabecera del panel: título a la izquierda, botón "Instrucciones" a la derecha */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.page-head .page-sub { margin-bottom: 0; }

/* Pestañas de navegación de la cabecera: activa en blanco, inactiva en gris */
.header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-tab {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 9px 18px; border-radius: 10px;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.nav-tab:hover { color: var(--text); text-decoration: none; }
.nav-tab.active { color: var(--text); background: var(--overlay-active); }

/* Selector de idioma ES/EN */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.lang-opt {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 1px; color: var(--muted);
  padding: 6px 12px; transition: color 0.2s, background 0.2s;
}
.lang-opt:hover { color: var(--text); }
.lang-opt.active { color: var(--text); background: var(--overlay-active); }

/* Grupo "modo + idioma" para que vayan juntos en la misma fila (lo monta theme.js). */
.hdr-controls { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 560px) {
  .header-right { gap: 8px; }
  .nav-tab { padding: 8px 12px; font-size: 0.72rem; letter-spacing: 0.5px; }
}

/* ── Página de instrucciones (/docs) ────────────────────────── */
.doc { max-width: 820px; }
.doc-section { margin-bottom: 38px; }
.doc h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.3px; margin: 0 0 12px;
}
.doc p { color: var(--doc-text); margin-bottom: 12px; }
.doc ul { margin: 0 0 12px 20px; color: var(--doc-text); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--text); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--code-bg); color: var(--code-text);
  padding: 2px 6px; border-radius: 8px;
}
pre {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; overflow-x: auto; margin-bottom: 12px;
}
pre code { background: none; color: var(--pre-text); padding: 0; font-size: 0.85rem; line-height: 1.6; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.9rem; }
.doc-table th, .doc-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-table th { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 1px; }
.doc-table td code { white-space: nowrap; }

/* ── Demo tocable (3 ejemplos de HTML a imagen, dentro de la página de la tool) ── */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 22px;          /* aire entre el texto de arriba y las imágenes */
}
.demo-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
.demo-head { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; }
.demo-preview {
  height: 220px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.demo-img { max-width: 100%; max-height: 100%; display: block; transition: opacity 0.2s ease; }
.demo-img.loading { opacity: 0.4; }
.demo-card .demo-field { font-size: 0.9rem; padding: 9px 12px; }

/* Ventana propia (modal) — sustituye prompt()/confirm() nativos */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--bg-card); border: 1px solid var(--border-hover);
  border-radius: 12px; padding: 28px; width: 100%; max-width: 430px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  /* Si el contenido (p.ej. el selector de planes) no cabe en pantalla, que la ventana
     se pueda desplazar por dentro en vez de quedarse cortada (importante en móvil). */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.3px; margin-bottom: 10px; }
.modal-text { color: var(--muted); font-size: 0.95rem; margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.btn-danger-solid { background: var(--red); color: #fff; }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--red) 85%, black); transform: translateY(-1px); }
.modal-wide { max-width: 740px; }

/* Botón de icono (rueda de Ajustes en la cabecera) */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border-hover); color: var(--muted);
  cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
  text-decoration: none; flex-shrink: 0;
}
.btn-icon:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-hover); text-decoration: none; }
.btn-icon svg { display: block; }

/* Secciones de la ventana de Ajustes */
.set-section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.set-section:first-of-type { padding-top: 6px; }
.set-section-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.set-section-desc { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }

/* Acciones de plan + ventana "Mejorar plan" */
.plan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.plan-renew { color: var(--muted); font-size: 0.8rem; margin-top: 8px; }
.period-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin: 4px 0 20px;
}
.period-opt {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 18px;
  transition: color 0.2s, background 0.2s;
}
.period-opt:hover { color: var(--text); }
.period-opt.active { color: var(--text); background: var(--overlay-active); }
.plan-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-card {
  flex: 1; min-width: 170px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 12px; padding: 18px; text-align: center;
}
.plan-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; }
.plan-card-price { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; min-height: 1.5em; }
.plan-card-limit { color: var(--muted); font-size: 0.82rem; margin-bottom: 16px; }
/* Lista de características de cada plan (✓ incluido, ✕ no incluido). */
.plan-feats { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.plan-feats li { font-size: 0.82rem; color: var(--text); display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.plan-feats li::before { content: "✓"; color: var(--green); font-weight: 800; flex-shrink: 0; }
.plan-feats li.no { color: var(--muted); }
.plan-feats li.no::before { content: "✕"; color: var(--muted); font-weight: 700; }

/* Selector de caducidad (crear key) */
.dur-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.dur-opt {
  background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted); padding: 7px 14px; transition: all 0.2s;
}
.dur-opt:hover { color: var(--text); }
.dur-opt.active { color: var(--text); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Panel de administración (privado del dueño) */
.admin-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.admin-stat { flex: 1; min-width: 150px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.admin-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.admin-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -1px; }
.admin-stat-sub { color: var(--muted); font-size: 0.75rem; margin-top: 6px; }
.admin-h2 { margin: 28px 0 16px; }

/* Dos gráficas lado a lado (una columna en móvil) */
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .admin-cols { grid-template-columns: 1fr; } }

/* Gráfica de barras verticales (divs; la altura la pone admin.js, CSP-safe) */
.chart {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 150px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 8px;
}
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart-num { font-size: 0.68rem; color: var(--muted); margin-bottom: 2px; }
.chart-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.chart-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.chart-lbl { font-size: 0.62rem; color: var(--muted); margin-top: 4px; white-space: nowrap; height: 0.9rem; }
.chart-empty { color: var(--muted); font-size: 0.85rem; margin: auto; }

/* Barras horizontales de uso por herramienta */
.tool-bars { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.tb-row { display: flex; align-items: center; gap: 12px; }
.tb-name { width: 170px; font-size: 0.85rem; flex-shrink: 0; }
.tb-track { flex: 1; background: var(--bg-hover); border-radius: 999px; overflow: hidden; }
.tb-fill { height: 14px; background: var(--accent); border-radius: 999px; }
.tb-count { width: 52px; text-align: right; font-weight: 700; font-size: 0.85rem; }

/* Tabla de clientes: filas destacadas y toolbar */
.admin-row-risk { background: color-mix(in srgb, var(--red) 8%, transparent); }
.admin-row-off td { opacity: 0.55; }
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.admin-toolbar .form-input { max-width: 280px; }
.admin-select { width: auto; max-width: 220px; }
.admin-errors td { font-size: 0.85rem; }
.admin-sync-msg { color: var(--muted); font-size: 0.82rem; }
/* Título del admin con el icono de refrescar (sincronizar con Stripe) al lado, con el
   mismo estilo redondo que los botones de la cabecera. */
.admin-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-sync-icon {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}
.btn-sync-icon:hover { color: var(--text); }
.btn-sync-icon svg { width: 18px; height: 18px; display: block; }
.btn-sync-icon.syncing svg { animation: sync-spin 1s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }

/* Detalle de cliente (ventana) */
.cli-kv { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.cli-kv-row { display: flex; gap: 12px; font-size: 0.9rem; }
.cli-kv-k { width: 170px; color: var(--muted); flex-shrink: 0; }
.cli-kv-v { flex: 1; }
.cli-keys-title { font-weight: 700; margin: 10px 0 6px; font-size: 0.9rem; }
.cli-keys-empty { color: var(--muted); font-size: 0.85rem; }
.cli-key { font-size: 0.83rem; color: var(--muted); padding: 4px 0; border-top: 1px solid var(--border); }
.admin-denied { text-align: center; color: var(--muted); padding: 60px 20px; }
/* Precio anual: tachado el precio sin descuento + precio final + % de ahorro */
.price-old { text-decoration: line-through; color: var(--muted); font-weight: 500; margin-right: 6px; }
.price-now { color: var(--accent); font-weight: 700; }
.discount-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  background: var(--green-dim); color: var(--green);
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
}

/* ── Landing pública ────────────────────────────────────────── */
.lp { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* Héroe asimétrico: texto a la izquierda, la petición REAL a la API a la derecha
   (nada de ilustración decorativa; es justo lo que hace el producto). */
.lp-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: center; padding: 88px 0 70px; text-align: left; }
.lp-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.5px; line-height: 1.12; margin-bottom: 20px; }
.lp-hero p { color: var(--muted); font-size: 1.08rem; max-width: 520px; margin: 0 0 26px; line-height: 1.55; }
.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* Línea honesta "ya disponible" + enlace secundario discreto del hero. */
.lp-hero-now { color: var(--muted); font-size: 0.85rem; margin: -8px 0 24px; font-family: var(--font-mono); }
.lp-hero-now strong { color: var(--text); }
.lp-hero-link { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 0.92rem; }
.lp-hero-link:hover { color: var(--accent); }

/* Panel de la petición real a la API (la "imagen" del héroe). */
.lp-hero-code { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lp-hero-code-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lp-hero-code-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-hover); }
.lp-hero-code-label { margin-left: 8px; font-family: var(--font-mono); color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; }
.lp-hero-code pre {
  padding: 20px; margin: 0; overflow-x: auto; font-family: var(--font-mono);
  font-size: 0.8rem; line-height: 1.7; color: var(--pre-text); white-space: pre;
}
.lp-hero-code .k { color: var(--accent); }
.lp-hero-code .s { color: var(--code-text); }
.lp-section { padding: 52px 0; border-top: 1px solid var(--border); }
.lp-section h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.3px; margin-bottom: 32px; }
.lp-card-title { font-family: var(--font-display); font-weight: 800; margin-bottom: 8px; }

/* "Cómo funciona": pasos como una secuencia con regla, no 3 cajas idénticas
   flotando (el número SÍ importa aquí: hay un orden real). */
.steps-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step-flow-item { border-top: 2px solid var(--border); padding-top: 16px; }
.step-flow-num {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; color: var(--accent);
  font-size: 0.8rem; letter-spacing: 0.5px; margin-bottom: 10px;
}
.step-flow-item .lp-card-title { font-size: 1.02rem; }
.step-flow-item p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* "¿Por qué...?": lista con regla a la izquierda, sin tarjetas repetidas. */
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.why-item { border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; }
.why-item .lp-card-title { font-size: 1rem; }
.why-item p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

.pricing-grid { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.pricing-grid .plan-card { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.plan-card-cta { margin-top: auto; }
.plan-card.popular { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.plan-card-name { display: flex; align-items: center; gap: 8px; }
.plan-card-badge {
  font-family: var(--font-mono); color: var(--accent); background: var(--accent-dim);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 8px;
}
.lp-note { color: var(--muted); font-size: 0.85rem; margin-top: 18px; }
/* Selector Mensual/Anual de la landing + nota "facturado anualmente" + ahorro */
.lp-period { margin: 0 0 28px; }
.price-sub { font-size: 0.8rem; color: var(--muted); font-weight: 500; margin-top: 4px; }
.save-badge {
  display: inline-block; background: var(--green-dim); color: var(--green);
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle;
}
.lp-final { text-align: center; }
.lp-footer { border-top: 1px solid var(--border); padding: 30px 24px; text-align: center; color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--accent); }

/* Preguntas frecuentes (landing): lista con línea divisoria, no tarjetas sueltas. */
.lp-faq { display: flex; flex-direction: column; max-width: 760px; }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.faq-item:first-child { padding-top: 0; }
.faq-q { font-family: var(--font-display); font-weight: 800; margin-bottom: 8px; }
.faq-a { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.faq-rest { display: none; }
.faq-item.faq-open .faq-rest { display: inline; }
.faq-more {
  display: inline;
  margin-left: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.faq-more:hover { color: var(--text); }

/* ── Galería de plantillas (docs de HTML a imagen) ── */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.tpl-img { width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; }
.tpl-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-top: 2px; }
.tpl-meta { color: var(--muted); font-size: 0.78rem; margin-bottom: 4px; }
.tpl-card .tpl-copy { margin-top: auto; }
/* Textarea invisible del copiado de reserva (navegadores viejos, sin estilos en línea) */
.sr-copy { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ── Aviso de cookies (consentimiento de analítica) ── */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 720px;
  margin: 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.cookie-text { margin: 0; font-size: 0.9rem; color: var(--muted); flex: 1; min-width: 220px; }
.cookie-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Ajustes para móvil ─────────────────────────────────────── */
@media (max-width: 600px) {
  .lp-hero { grid-template-columns: 1fr; padding: 56px 0 40px; gap: 32px; }
  .lp-hero h1 { font-size: 2rem; }
  .lp-hero p { font-size: 1.02rem; max-width: none; }
  .lp-hero-code pre { font-size: 0.72rem; }
  .steps-flow, .why-list { grid-template-columns: 1fr; }
  .lp-section { padding: 36px 0; }
  .lp-section h2 { font-size: 1.5rem; margin-bottom: 22px; }
}

@media (max-width: 640px) {
  .header { padding: 14px 18px; position: relative; justify-content: center; align-items: center; }
  .container { padding: 28px 18px 64px; }
  .card { padding: 28px 22px; }
  .key { flex-direction: column; align-items: flex-start; }

  /* Cabecera móvil: hamburguesa a la izquierda, NOMBRE centrado, y todo lo demás
     (menú, idioma, tema, botones) pasa a un desplegable bajo la barra. */
  .nav-toggle { display: flex; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
  .header .logo { margin: 0 auto; }
  .header-right {
    position: absolute; top: calc(100% + 6px); left: 18px; right: auto;
    width: auto; min-width: 200px; max-width: calc(100vw - 36px);
    display: none;
    flex-direction: column; align-items: flex-start; gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    padding: 14px;
    z-index: 200;
  }
  .header.menu-open .header-right { display: flex; }
  /* Modo (izquierda) e idioma (derecha) en la misma fila, alineados por arriba. */
  .header-right .hdr-controls { display: flex; width: 100%; justify-content: space-between; align-items: flex-start; }
  .header-right .nav { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  .header-right .nav-tab { text-align: left; }
  .header-right .btn { width: 100%; }   /* a lo ancho del menú (cómodos de pulsar) */
  /* En la portada los dos botones van envueltos en #auth-links: lo hacemos columna
     para poder ordenarlos igual que en el resto de páginas. */
  .header-right #auth-links { display: flex; flex-direction: column; width: 100%; gap: 12px; }
  /* "Crear cuenta" (naranja) ARRIBA y "Entrar" debajo como texto naranja. */
  .header-right .btn-primary { order: 1; }
  .header-right .btn-neutral {
    order: 2;
    background: transparent;
    border-color: transparent;
    color: var(--accent);
    text-transform: none;   /* "Entrar" en vez de "ENTRAR" */
    letter-spacing: 0;
  }

  /* Panel: las estadísticas se apilan a lo ancho completo */
  .stats { gap: 24px; }
  .stat, .stat-uso { min-width: 100%; text-align: left; }
  .stat-uso .progress { margin-left: 0; }

  /* Tablas (instrucciones / admin): el texto baja de línea en vez de salirse */
  .doc-table { font-size: 0.82rem; }
  .doc-table th, .doc-table td { padding: 8px 8px; }
  .doc-table td code, .doc-table td, .doc-table th { white-space: normal; word-break: break-word; }
  code { word-break: break-word; }

  .page-title { font-size: 1.5rem; }
}

/* ── Página 404 ("Puerto no encontrado") ───────────────── */
.err-page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px;
}
.err-label {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--hero-faint); margin-bottom: 32px;
}
.err-title { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 40px; }
.err-code {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem);
  letter-spacing: -4px; color: var(--accent); line-height: 1;
}
.err-headline {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--hero-text); margin-top: 14px; text-transform: uppercase; letter-spacing: 0.5px;
}
.err-desc { font-size: 1.1rem; opacity: 0.5; max-width: 400px; line-height: 1.6; margin-bottom: 40px; }