:root {
  --ink: #2B2621;
  --paper: #FBF9F6;
  --card: #FFFFFF;
  --line: #E5E0D8;
  --accent: #2C7A7B;
  --accent-dark: #205C5D;
  --muted: #8A8478;
  --danger: #B4463C;
  --danger-bg: #B4463C1A;
  --warn-bg: #C9A22726;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
h1, h2 { margin: 0 0 4px; font-weight: 600; }
.hidden { display: none !important; }
.hint-text { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

.app-view { min-height: 100vh; }
.tab-view { display: block; }

/* ---- Login ---- */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-card label { font-size: 0.85rem; margin-top: 6px; }
.login-card input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.95rem; }
.login-card button { margin-top: 12px; }

/* ---- App shell ---- */
.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.app-header h1 { font-size: 1.15rem; flex-shrink: 0; }
.app-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.app-brand-icon { width: 30px; height: 30px; border-radius: 7px; }
.app-header nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.tab-btn {
  background: none; border: none; padding: 8px 14px; border-radius: 6px;
  color: var(--muted); font-size: 0.92rem; cursor: pointer; white-space: nowrap;
}
.tab-btn.active { background: var(--accent); color: white; }
.app-header nav { align-items: center; }
.tab-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* Selector de producto — separa con claridad los clientes de Canyon Base
   de los asientos de Kinés.io, para que no se mezclen en una sola lista.
   Visualmente distinto de las pestañas normales (más grande, con icono)
   porque es una decisión de nivel superior, no una pestaña más. */
.producto-switcher {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.producto-btn {
  background: none; border: none; padding: 6px 14px; border-radius: 6px;
  color: var(--muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.producto-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.producto-btn.active { background: var(--ink); color: white; }
.icon-only-tab-btn {
  font-size: 1.05rem;
  padding: 6px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.icon-only-tab-btn.active { background: var(--ink); color: white; }
.icon-only-tab-btn:hover { background: var(--bg); }
.icon-only-tab-btn.active:hover { background: var(--ink); }

.badge-count {
  display: inline-block;
  background: var(--danger, #C0392B);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
}

main { padding: 20px 24px; max-width: 900px; margin: 0 auto; }

@media (max-width: 640px) {
  .app-header { padding: 12px 16px; gap: 12px; }
  main { padding: 16px; }
}

/* ---- Buttons ---- */
button { font-family: inherit; cursor: pointer; }
.btn-primary {
  background: var(--accent); color: white; border: none;
  padding: 9px 16px; border-radius: 6px; font-size: 0.92rem; font-weight: 500;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline {
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 8px 14px; border-radius: 6px; font-size: 0.9rem;
}
.btn-ghost { background: none; border: none; color: var(--muted); padding: 8px 12px; font-size: 0.9rem; }
.btn-danger {
  background: var(--danger); color: white; border: none;
  padding: 9px 16px; border-radius: 6px; font-size: 0.92rem;
}
.icon-btn { background: none; border: none; font-size: 1.3rem; color: var(--muted); cursor: pointer; line-height: 1; }

/* ---- Toolbar / lists ---- */
.module-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.module-toolbar input { flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }

.cliente-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 14px; cursor: pointer; flex-wrap: wrap;
}
.cliente-row:hover { border-color: var(--accent); }
.cliente-main { flex: 1; min-width: 0; }
.cliente-main strong { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-meta { color: var(--muted); font-size: 0.83rem; margin-top: 2px; }
.cliente-codigo { font-family: monospace; font-size: 0.8rem; color: var(--muted); }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.78rem; font-weight: 600;
}
.badge-activa { background: #2C7A7B1A; color: var(--accent-dark); }
.badge-revocada { background: var(--danger-bg); color: var(--danger); }
.badge-caducada { background: var(--warn-bg); color: #8A6B10; }
.badge-sin_licencia { background: #8A84781A; color: var(--muted); }

.empty-inline { color: var(--muted); text-align: center; padding: 30px 0; }

/* ---- Modals ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(43,38,33,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
/* Modales de "segundo nivel" — se abren COMO ACCIÓN desde dentro de otro
   modal ya abierto (emitir/renovar, confirmar una acción). Con el mismo
   z-index que el resto, quién queda encima dependía del orden en el HTML
   — y "duracion-modal" está declarado ANTES que "asiento-detail-modal",
   así que al abrirlo desde ahí quedaba TAPADO por él (parecía que no
   pasaba nada al pulsar "Emitir", hasta cerrar el modal de detalle, que
   lo dejaba al descubierto). Con un z-index explícito más alto, quedan
   siempre encima sin importar el orden en el documento. */
#duracion-modal, #confirm-modal { z-index: 200; }
.modal-card {
  background: var(--card); border-radius: var(--radius); width: 480px; max-width: 100%;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-narrow { width: 380px; }
.modal-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-header h2 { font-size: 0.95rem; letter-spacing: 0.03em; color: var(--muted); }
.modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.modal-body label { font-size: 0.85rem; font-weight: 500; margin-top: 4px; }
.modal-body input, .modal-body select, .modal-body textarea {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.95rem; font-family: inherit; width: 100%;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap;
}

.error-box { background: var(--danger-bg); color: var(--danger); padding: 8px 12px; border-radius: 6px; font-size: 0.87rem; }
.saved-msg { color: var(--accent-dark); font-size: 0.85rem; }

/* ---- Settings ---- */
/* Subpestañas dentro de Ajustes (Empresa / Configuración / Caducidad /
   Claves / Versión) y dentro de Clientes de Kinés.io (Clientes / Asientos
   / Solicitudes) — mismo patrón visual "compact" que ya usa Kinés.io para
   Sistema -> Licencia/Backup/Versión, adaptado a los colores del panel.
   Con 5 subpestañas (desde que se añadió "Caducidad"), en una pantalla
   estrecha ya no cabían todas — confirmado renderizando de verdad: se
   cortaba "Claves" y "Versión" quedaba fuera de la pantalla, invisible e
   inaccesible. overflow-x:auto deja deslizar horizontalmente en vez de
   forzarlas a encogerse (perdería legibilidad) o partir la fila en dos
   líneas (empujaría el contenido de abajo de forma inconsistente según
   cuántas subpestañas tenga cada sitio). */
.subtabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.subtab {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.subtab:hover { color: var(--ink); }
.subtab.active { background: var(--accent); color: white; border-color: var(--accent); }

.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; cursor: pointer; margin-top: 4px;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.mini-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 6px 0 2px; }

.settings-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.settings-card label { display: block; font-size: 0.85rem; font-weight: 500; margin-top: 12px; margin-bottom: 4px; }
.settings-card > input, .settings-card > select, .settings-card > textarea {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.95rem; font-family: inherit; width: 100%;
}
.danger-card { border-color: var(--danger-bg); }
.version-detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.version-detail-row:last-child { border-bottom: none; }
.version-detail-row span { color: var(--muted, #888); }
.adventurebase-logo { max-width: 220px; width: 100%; height: auto; display: block; margin: 16px 0 6px; }
.field-row { display: flex; gap: 10px; margin-top: 10px; }
.field-row input { flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: monospace; }
.field-row.plain input, .field-row.plain select { font-family: inherit; }
.field-row.plain > div input, .field-row.plain > div select {
  /* Sin esto, un <input> usa su ancho nativo del navegador (~199px) en
     vez del que le da su columna flexible — medido de verdad: en una
     fila de dos columnas en móvil, esto hacía que la fila entera
     midiera 445px en una pantalla de 390px, cortando la segunda columna
     (Ciudad, Provincia, etc.) fuera de la pantalla. */
  width: 100%;
  box-sizing: border-box;
}

.section-divider { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.section-divider span { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }

.logo-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; flex-wrap: wrap; }
.logo-preview {
  width: 90px; height: 90px; min-width: 90px; flex-shrink: 0; border: 1px dashed var(--line); border-radius: 8px;
  /* Sin flex-shrink:0, en una pantalla estrecha esta caja se aplastaba
     para dejarle sitio al selector de archivo (llegó a medir 49px de
     ancho en vez de 90 — confirmado midiéndolo de verdad), y con la
     imagen del logo rota dentro (si el archivo daba 404) parecía solo
     una raya vertical punteada, no un recuadro. flex-wrap en .logo-row
     además deja que el selector de archivo baje a su propia línea en
     vez de seguir empujando la caja. */
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--paper);
  font-size: 0.75rem; color: var(--muted); text-align: center;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.factura-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.factura-main { flex: 1; min-width: 0; }
.factura-numero { font-family: monospace; font-weight: 600; }
.factura-estado { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 600; }
.factura-estado-emitida { background: #2C7A7B1A; color: #205C5D; }
.factura-estado-rectificada { background: #8A84781A; color: #8A8478; }
.factura-estado-rectificativa { background: #C9A22726; color: #92650B; }
#clave-publica-box {
  width: 100%; font-family: monospace; font-size: 0.8rem; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px; margin-top: 10px; resize: vertical; background: var(--paper);
}
.token-box-wrap { margin-top: 10px; }
.token-box {
  width: 100%; font-family: monospace; font-size: 0.78rem; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical; background: var(--paper);
  box-sizing: border-box; margin-bottom: 6px;
  max-height: 260px; overflow-y: auto; /* por si aun con 8 filas el token es más largo (vitalicia, etc.) */
}
.danger-card button { margin-top: 10px; }

/* ---- Client detail ---- */
.detail-section { margin-bottom: 16px; }
.detail-section h3 { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.evento-row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.evento-row:last-child { border-bottom: none; }
.evento-tipo { font-weight: 600; text-transform: capitalize; }
.evento-fecha { color: var(--muted); font-size: 0.8rem; }