:root {
  color-scheme: dark;
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1c2330;
  --border: #2a3340;
  --border-strong: #3a4656;
  --text: #e6edf3;
  --text-dim: #9aa7b4;
  --text-faint: #6b7785;
  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --accent-ink: #06231f;
  --ok: #3fb950;
  --ok-bg: #0f2a16;
  --warn: #d29922;
  --warn-bg: #2a2310;
  --bad: #f85149;
  --bad-bg: #2a1413;
  --info: #58a6ff;
  --info-bg: #10243f;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #16202e 0%, var(--bg) 55%) fixed;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- App shell con barra lateral izquierda ---- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 236px;
  display: flex; flex-direction: column;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(8px);
  border-right: 1px solid var(--border);
  /* El aside NO scrollea como bloque: si lo hiciera, la marca y el pie se irían con el menú y en
     pantallas cortas las últimas opciones quedarían fuera del área visible. En su lugar, marca y
     pie quedan fijos y solo el .nav del medio scrollea (regla más abajo). */
  overflow: hidden;
  z-index: 40;
}

/* La marca (arriba) y el pie (abajo) no se encogen ni se van con el scroll. */
.side-brand, .side-foot { flex-shrink: 0; }

/* Solo la navegación scrollea, y ocupa todo el alto que sobra entre marca y pie. Así el menú es
   visible completo en cualquier resolución: si no cabe, aparece su propia barra, sin tocar el zoom. */
.sidebar .nav {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 62px;
}

.brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .dot, .brand-sm .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.brand-logo { height: 36px; max-width: 108px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); }
.brand-sub { font-size: 0.63rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.09em; margin-top: 1px; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.nav a {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
}
.nav a:hover { background: var(--bg-elev); color: var(--text); }
.nav a.active { background: var(--bg-elev-2); color: var(--accent); }

.side-foot {
  margin-top: auto;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.55rem;
  font-size: 0.85rem;
}
.side-logout {
  background: none; border: 1px solid var(--border-strong); color: var(--accent);
  cursor: pointer; font: inherit; padding: 7px 12px; border-radius: 8px; text-align: left;
}
.side-logout:hover { background: var(--bg-elev); }
.side-icons { display: flex; gap: 8px; align-items: center; }
.side-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: none; color: var(--accent);
  cursor: pointer; text-decoration: none; font: inherit;
}
.side-ico:hover { background: var(--bg-elev); color: var(--text); border-color: var(--accent); }
.side-ico svg { width: 19px; height: 19px; }
.msg-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger, #c0392b); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.msg-badge[hidden] { display: none; }

/* Chat de soporte (burbujas estilo mensajería). */
.chat { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 340px; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 74%; display: flex; flex-direction: column; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.them { align-self: flex-start; align-items: flex-start; }
.chat-de { font-size: .72rem; color: var(--text-dim); margin: 0 4px 2px; }
.chat-burbuja {
  padding: 8px 12px; border-radius: 14px; line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-msg.them .chat-burbuja { background: var(--bg-elev); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.me .chat-burbuja { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.chat-time { font-size: .66rem; color: var(--text-dim); margin: 2px 4px 0; }
.chat-vacio { margin: auto; color: var(--text-dim); text-align: center; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-input textarea, .chat-difundir textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 150px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); font: inherit;
}
.chat-difundir textarea { width: 100%; }

.main { margin-left: 236px; flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.topbar-mobile { display: none; }
.nav-toggle {
  background: none; border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 8px; padding: 5px 11px; font-size: 1.15rem; cursor: pointer; line-height: 1;
}
.brand-sm { font-weight: 800; display: flex; align-items: center; gap: 9px; }

.scrim { display: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 34px 32px 80px; width: 100%; flex: 1; }

/* ---- Responsive: la barra se vuelve un cajón deslizable ---- */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar-mobile {
    display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 16px;
    position: sticky; top: 0; z-index: 20;
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .scrim.show {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 35;
  }
  .container { padding: 22px 16px 64px; }
}

/* Banner de estado de suscripción, arriba del contenido en todas las pantallas. */
.banner-suscripcion{
  padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem;line-height:1.5;
  border:1px solid transparent;
}
.banner-suscripcion a{font-weight:600;white-space:nowrap;}
.banner-suscripcion-mora{background:#3a1c1a;border-color:#5a2422;color:#f3d6d2;}
.banner-suscripcion-gracia{background:#3a2f14;border-color:#5a4a1c;color:#f0e4c4;}

/* Logo en la versión HTML del documento legal: el enlace es público y se lee sin sesión, así que
   la página tiene que identificarse sola, igual que el PDF. */
.legal-logo { max-height: 56px; max-width: 240px; object-fit: contain; margin-bottom: 14px; }

/* Una tarjeta por línea de detalle. Reemplaza a la tabla ancha: con diez columnas el IVA quedaba
   fuera de la pantalla y había que scrollear de lado para ver lo que se estaba cobrando. */
.linea-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.02);
}
.linea-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
/* En pantallas angostas las grillas se apilan: el objetivo es no scrollear de lado nunca. */
@media (max-width: 900px) {
  .linea-card .grid-2, .linea-card .grid-3, .linea-card .grid-4 { grid-template-columns: 1fr; }
}

/* Buscador CAByS dentro de una línea. El contenedor de resultados flota sobre la tabla:
   dentro del flujo empujaría las filas de abajo con cada búsqueda. */
.cabys-res {
  position: absolute; z-index: 60; left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; max-height: 280px; overflow: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.cabys-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: .85rem; }
.cabys-item:last-child { border-bottom: 0; }
.cabys-item:hover { background: rgba(255,255,255,.06); }
.cabys-meta { color: var(--text-dim); }
.cabys-desc { display: block; color: var(--text-dim); }
/* El .field del CAByS ancla el desplegable (lleva position:relative en la vista). */
.linea-card .cabys-res { top: 100%; }

/* Botón de retroceso del layout: discreto y pegado al borde superior del contenido. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
.page-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.page-head p { color: var(--text-dim); margin: 6px 0 0; font-size: 0.95rem; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: #232c3a; color: var(--text); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

/* Botón alargado: ícono a la izquierda, texto a la derecha. Para pantallas de consulta, donde
   los mosaicos grandes (.action-tile) roban espacio a lo que importa, que son los datos. */
/* Ícono dentro de un botón: tamaño fijo, siempre a la izquierda del texto (.btn ya es flex). */
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-fila { justify-content: flex-start; text-align: left; }
.btn-fila svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); color: var(--accent-ink); border-color: var(--accent-strong); }
.btn-danger { background: transparent; border-color: #e0796f; color: #e0796f; }
.btn-danger:hover { background: #e0796f; color: #fff; border-color: #e0796f; }
/* Empuja las acciones a la derecha de una fila (ej. Cancelar). */
.btn-right { margin-left: auto; }

/* Grilla ordenada de acciones con ícono + etiqueta (página del comprobante). */
.action-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 18px 0 6px; font-weight: 700; }
.action-section-label:first-child { margin-top: 0; }
/* Botonera. Los "azulejos" eran cuadrados grandes con el ícono arriba; ahora son filas alargadas
   con el ícono a la izquierda y el texto a la derecha. Ocupan menos alto, se leen antes y en
   pantallas angostas no se apilan como ladrillos. El HTML no cambió: ya venía con el ícono antes
   del texto, así que basta con acostar el flex. */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.action-grid form { display: contents; }
.action-tile {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 10px 14px; min-height: 42px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-elev-2); color: var(--text);
  font-weight: 600; font-size: 0.86rem; text-align: left; line-height: 1.25;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
/* El ícono no se encoge ni se estira; el texto se lleva el resto. */
.action-tile > span { flex: 1 1 auto; min-width: 0; }
.action-tile:hover { background: #232c3a; border-color: var(--accent); color: var(--text); }
.action-tile:active { transform: translateY(1px); }
.action-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.action-tile svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.action-tile.tile-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.action-tile.tile-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.action-tile.tile-primary svg { stroke: var(--accent-ink); }
/* Variante compacta para barras de filtro/acción (no descuadra filas). */
.action-tile.tile-sm { min-height: 34px; padding: 6px 10px; gap: 8px; font-size: 0.78rem; }
.action-tile.tile-sm svg { width: 15px; height: 15px; }
/* Grupo de azulejos que no ocupa todo el ancho (para poner junto a filtros). */
/* Grupo de botones que no ocupa todo el ancho (para poner junto a filtros).
   Antes era inline-grid con grid-auto-flow:column, que crea UNA COLUMNA POR BOTÓN y nunca envuelve:
   en pantallas angostas se desbordaba del contenedor y se montaba sobre lo de al lado. Con flex-wrap
   los botones bajan de línea en vez de pisarse. */
.action-grid.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: bottom; }
.action-grid.inline > .action-tile, .action-grid.inline form > .action-tile { flex: 0 1 auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85em; }
.clave { color: var(--text-dim); white-space: nowrap; overflow-x: auto; max-width: 100%; display: block; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); border-color: #1c5a2a; }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: #5a4a16; }
.pill-bad { background: var(--bad-bg); color: var(--bad); border-color: #5a2422; }
.pill-info { background: var(--info-bg); color: var(--info); border-color: #1c456f; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
/* Base global: TODO input/select/textarea del sistema hereda el estilo estándar (el de los
   formularios como Condiciones), estén o no dentro de un .field. Las pantallas con estilos
   propios (chat, buscadores, diseñador) lo sobreescriben por especificidad, y cualquier
   formulario nuevo nace consistente sin markup especial. Checkbox/radio/range/color quedan
   fuera: los cubren sus propias reglas. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); }

.field input, .field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); }

/* Checkboxes y radios: no heredar el width:100% ni el padding de los inputs de texto. */
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; accent-color: var(--accent, #2dd4bf); }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; padding: 0; margin: 0 8px 0 0; vertical-align: middle; }
.field label:has(> input[type="checkbox"]), .field label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 0; cursor: pointer;
}
/* CAUSA RAÍZ de los campos montados en iPad: por defecto los hijos de un grid tienen
   min-width:auto, o sea que NO se encogen por debajo del ancho mínimo de su contenido. Safari en
   iOS le da a <input type="date"> un ancho intrínseco grande (dibuja su propio selector), así que
   la celda de "Desde"/"Hasta" se negaba a achicarse, reventaba la columna y se montaba sobre la de
   al lado. Por eso fallaban SIEMPRE las fechas y nunca los demás campos.
   min-width:0 en los hijos les devuelve el permiso de encogerse. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.field { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; min-width: 0; }
/* En iOS el date usa su propio dibujo y su propio ancho; se le quita para que respete el 100%. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Tabletas (iPad retrato = 768px). El menú ya se colapsa a los 900px, pero los grids seguían en
   4 columnas hasta los 720: justo en ese hueco los formularios se desbordaban y se montaban unos
   sobre otros. */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) { .grid-4 { grid-template-columns: 1fr 1fr; } }

.section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); font-weight: 800; margin: 28px 0 14px; }

.lines-table input, .lines-table select { padding: 8px 10px; font-size: 0.86rem; }
.lines-table td { padding: 8px; }

.validation-summary-errors, .alert-bad {
  background: var(--bad-bg);
  border: 1px solid #5a2422;
  color: #ffb3ae;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.text-danger { color: var(--bad); font-size: 0.8rem; }

.banner-note {
  background: var(--info-bg);
  border: 1px solid #1c456f;
  color: #bcd6f5;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 22px;
  font-size: 0.88rem;
}

pre.xml {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  overflow: auto;
  max-height: 460px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  color: #c9d4e0;
  line-height: 1.5;
}

.empty { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.hint { display: block; color: var(--text-faint); font-size: 0.8rem; margin-top: 6px; line-height: 1.35; }
.empty .big { font-size: 1.05rem; color: var(--text-dim); margin-bottom: 16px; }

.kv { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 10px 20px; font-size: 0.93rem; }
.kv dt { color: var(--text-faint); font-weight: 700; }
.kv dd { margin: 0; color: var(--text); }

.actions-row { display: flex; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; align-items: center; }

footer { color: var(--text-faint); font-size: 0.8rem; text-align: center; padding: 30px; border-top: 1px solid var(--border); }
.foot-copy { color: var(--text-dim); }
.foot-copy strong { color: var(--text); font-weight: 700; }
.foot-sub { margin-top: 4px; color: var(--text-faint); }
.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-main > div { width: 100%; }
.auth-foot { flex-shrink: 0; text-align: center; padding: 20px; color: var(--text-faint); font-size: 0.8rem; }
.auth-foot strong { color: var(--text); font-weight: 700; }

/* ===== Modal de error amigable ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modal-fade .12s ease-out}
.modal-card{background:var(--bg-elev-2);border:1px solid var(--border-strong);border-radius:14px;max-width:460px;width:100%;padding:22px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modal-head h3{margin:0;font-size:1.05rem;color:var(--text);font-weight:700}
.modal-ico{font-size:1.35rem;line-height:1}
.modal-msg{color:var(--text-dim);line-height:1.55;margin:0 0 18px;font-size:.95rem}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}

/* ---- Ajustes responsive de contenido ---- */
/* Tabletas: las tablas anchas deben poder desplazarse dentro de la tarjeta en vez de estirarla y
   empujar el resto del contenido. */
@media (max-width: 1024px) {
  .card { overflow-x: auto; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
}

@media (max-width: 720px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .card-pad { padding: 18px; }
  .page-head h1 { font-size: 1.4rem; }
  /* Tablas anchas: permitir scroll horizontal dentro de la tarjeta */
  .card { overflow-x: auto; }
  table { min-width: 520px; }
  .actions-row { flex-wrap: wrap; }
}

/* ---- Barra de paginado (log de cambios y listados largos) ---- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.pager-tam { display: flex; align-items: center; gap: 8px; margin: 0; }
.pager-nav { display: flex; align-items: center; gap: 10px; }
/* Un botón que no lleva a ningún lado: se ve como botón pero apagado, para que "Anterior" y
   "Siguiente" no salten de posición al aparecer o desaparecer en los bordes del listado. */
.btn-disabled {
  opacity: .45; cursor: default; pointer-events: none;
  display: inline-flex; align-items: center;
}
@media (max-width: 640px) {
  .pager { flex-direction: column; align-items: stretch; }
  .pager-nav { justify-content: space-between; }
}

/* ---- Menú de acciones por fila (dropdown con icono) ---- */
.rowmenu { position: relative; display: inline-block; }
.rowmenu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text-dim); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rowmenu-btn:hover { background: var(--bg-elev); color: var(--text); border-color: var(--accent); }
.rowmenu-btn svg { width: 18px; height: 18px; }
.rowmenu-list {
  position: fixed; display: none; min-width: 192px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 1000;
}
.rowmenu-list.open { display: block; }
.rowmenu-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  color: var(--text-dim); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
}
.rowmenu-list a:hover { background: var(--bg-elev); color: var(--text); }
.rowmenu-list a:hover .ico { color: var(--accent-strong); }
.rowmenu-list .ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
.rowmenu-list form { margin: 0; }
.rowmenu-list button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 7px; border: none; background: transparent;
  color: var(--text-dim); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  cursor: pointer; text-align: left; font-family: inherit;
}
.rowmenu-list button:hover { background: var(--bg-elev); color: var(--text); }
.rowmenu-list button:hover .ico { color: var(--accent-strong); }
.rowmenu-list button.danger { color: var(--danger, #c0392b); }
.rowmenu-list button.danger .ico { color: var(--danger, #c0392b); }

/* ---- Notificaciones (campanita en la barra superior) ---- */
.topbar-acciones {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 10px 24px 0 24px;
}
.notif { position: relative; }
.notif-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 10px; color: var(--text-dim); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.notif-btn:hover { background: var(--bg-elev); color: var(--text); border-color: var(--accent); }
.notif-btn svg { width: 19px; height: 19px; }
.notif-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger, #c0392b); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.notif-panel {
  position: absolute; top: 46px; right: 0; display: none; width: 360px; max-width: 90vw;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow); z-index: 1000; overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.notif-todas {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: .78rem; font-weight: 600; font-family: inherit; padding: 0;
}
.notif-todas:hover { color: var(--accent-strong); text-decoration: underline; }
.notif-body { max-height: 380px; overflow-y: auto; }
.notif-vacio { padding: 22px 14px; text-align: center; color: var(--text-dim); font-size: .88rem; }
.notif-item {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-left: 3px solid transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-elev); }
.notif-item.leida { opacity: .55; cursor: default; }
.notif-item.notif-info  { border-left-color: var(--accent); }
.notif-item.notif-warn  { border-left-color: #d9a53b; }
.notif-item.notif-error { border-left-color: var(--danger, #c0392b); }
.notif-item-tit { font-weight: 700; font-size: .87rem; color: var(--text); margin-bottom: 3px; }
.notif-item-tit a { color: inherit; text-decoration: none; }
.notif-item-tit a:hover { text-decoration: underline; }
.notif-item-msg { font-size: .8rem; color: var(--text-dim); line-height: 1.4; }
.notif-item-fec { font-size: .72rem; color: var(--text-dim); opacity: .7; margin-top: 4px; }


/* ---- Grupos del menú lateral ---- */
.nav-group { margin: 2px 0; }
.nav-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; list-style: none;
  color: var(--text-dim); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--bg-elev); color: var(--text); }
.nav-group > summary::after {
  content: "›"; font-size: 1.05rem; line-height: 1;
  transform: rotate(90deg); transition: transform .15s;
}
.nav-group[open] > summary::after { transform: rotate(-90deg); }
.nav-group .nav-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; margin-top: 2px; }
.nav-group .nav-sub a { font-size: .88rem; }

/* ---- Aviso de ambiente de pruebas ---- */
.banner-pruebas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 1rem;
  background: rgba(217, 165, 59, .10);
  border: 1px solid rgba(217, 165, 59, .45);
  border-left: 4px solid #d9a53b;
  border-radius: 0 10px 10px 0;
  color: var(--text-dim); font-size: .88rem; line-height: 1.5;
}
.banner-pruebas strong { color: var(--text); }
.banner-pruebas-pill {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: #d9a53b; color: #12151a;
  font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
/* Marca de agua diagonal sobre los paneles de datos en pruebas. */
.datos-pruebas { position: relative; }
.datos-pruebas::after {
  content: "PRUEBAS"; position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: .2em;
  color: rgba(217, 165, 59, .07); transform: rotate(-18deg);
  z-index: 0; user-select: none;
}
.datos-pruebas > * { position: relative; z-index: 1; }

/* ---- Aviso de cierre de sesión por inactividad ---- */
.sesion-overlay {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(5, 8, 12, .72); backdrop-filter: blur(3px);
}
.sesion-overlay.open { display: flex; }
.sesion-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 28px 24px; box-shadow: var(--shadow);
}
.sesion-icono {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(217, 165, 59, .12); color: #d9a53b;
}
.sesion-icono svg { width: 26px; height: 26px; }
.sesion-card h2 { margin: 0 0 8px; font-size: 1.15rem; color: var(--text); }
.sesion-card p { margin: 0 0 16px; font-size: .9rem; color: var(--text-dim); line-height: 1.55; }
.sesion-cuenta {
  font-size: 2.1rem; font-weight: 700; letter-spacing: 2px;
  color: #d9a53b; margin-bottom: 20px; font-variant-numeric: tabular-nums;
}
.sesion-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }