/* ===========================
   TEMA OSCURO — oct-2026, a pedido de Alberto
   (negro mezclado con azul + bandas de gradiente azul→morado→cian,
   estilo "vidrio". Mismos selectores de siempre: ningún HTML de los
   ~80 módulos necesita cambiar, solo se actualizan los valores acá.)
=========================== */
:root {
  --bg-base: #05070d;
  --azul-500: #2563eb;
  --azul-glow: #3b82f6;
  --morado: #8b5cf6;
  --cian: #22d3ee;
  --cian-claro: #7dd3fc;
  --vidrio: rgba(255,255,255,.045);
  --vidrio-borde: rgba(255,255,255,.09);
  --vidrio-borde-fuerte: rgba(255,255,255,.16);
  --input-bg: rgba(255,255,255,.06);
  --texto: #eef1fa;
  --texto-sec: #9aa6c3;
  --texto-tenue: #6d7794;
  --gradiente-acento: linear-gradient(135deg,#3b82f6,#8b5cf6);
  --gradiente-banda: linear-gradient(90deg,#3b82f6,#8b5cf6 35%,#22d3ee 70%,#3b82f6);

  /* ═══════════════════════════════════════════════════════════════════
     TABLA CENTRAL DE TIPOGRAFÍA Y COLOR — oct-2026, a pedido de Alberto.
     Todo módulo nuevo (y todo módulo que se corrija) debe usar estas
     variables en vez de escribir px/colores a mano. Si en el futuro hay
     que subir una letra o cambiar un tono, se edita UNA línea aquí y
     cambia en los ~50 módulos que la usan — no archivo por archivo.

     Herencia de color (vínculo con las pestañas vecinas): el body usa
     --texto (claro, para el fondo oscuro general). El selector .form-panel
     (regla más abajo en este archivo, fuera de :root) fija color:var(--c-text)
     para TODO su contenido — y .form-panel es el contenedor que abre cada
     módulo/pestaña del CRM. Por eso cualquier tarjeta blanca nueva
     (.xx-card, .xx-sec, tablas generadas por JS, etc.) que NO defina su
     propio "color" ya hereda el oscuro correcto automáticamente, sin
     tener que acordarse de ponerlo en cada clase nueva. Si un módulo
     necesita texto claro sobre fondo oscuro (ej. .form-header), se fija
     explícitamente en esa clase — eso sí gana por especificidad.
     ═══════════════════════════════════════════════════════════════════ */

  /* Familias de letra */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* Escala de tamaños (texto de componentes dentro de las cards claras:
     tablas, badges, botones, labels, formularios). De menor a mayor. */
  --fs-2xs: 11px;   /* badges chicos, labels uppercase, notas al pie */
  --fs-xs:  12px;   /* hints, texto secundario, celdas de tabla */
  --fs-sm:  13px;   /* botones pequeños, inputs, texto de body estándar */
  --fs-base:14px;   /* texto de párrafo, celdas destacadas */
  --fs-md:  15px;   /* nombres de card, subtítulos */
  --fs-lg:  16px;   /* totales, montos, énfasis */
  --fs-xl:  18px;   /* íconos de cerrar, títulos de modal */
  --fs-2xl: 22px;
  --fs-3xl: 24px;

  /* Texto y bordes neutros (dentro de cards claras) */
  --c-heading:     #0f2644;  /* títulos, marca */
  --c-text:        #1a1a2e;  /* texto normal */
  --c-text-muted:  #6b7280;  /* texto secundario */
  --c-text-faint:  #9aa0a6;  /* texto terciario / placeholders */
  --c-border:      #d0cec9;  /* bordes de inputs/botones */
  --c-border-light:#e2e0db;  /* separadores de tabla/pestañas */
  --c-bg-subtle:   #f7f6f3;  /* fondos hover de botón secundario */
  --c-bg-hover:    #fafaf8;  /* fondos hover de fila de tabla */

  /* Texto que va DIRECTO sobre el fondo oscuro (fuera de las cards claras):
     títulos de columna/sección, pestañas sueltas, contadores. Nunca usar
     --c-heading ahí: es azul oscuro y sobre el fondo oscuro no se lee
     (oct-2026: títulos de Valoración, pestañas de Contador). */
  --c-heading-on-dark:    #eef1fa;  /* títulos sobre fondo oscuro */
  --c-text-on-dark-muted: #a9b4c6;  /* texto secundario sobre fondo oscuro */
  --c-badge-on-dark-bg:   #3b82f6;  /* contadores/insignias sobre fondo oscuro */

  /* Estados semánticos (éxito / peligro / advertencia / info) */
  --c-success-bg:     #f0fdf4;
  --c-success-text:   #166534;
  --c-success-border: #86efac;
  --c-danger-bg:       #fef2f2;
  --c-danger-text:     #b91c1c;
  --c-danger-border:   #fecaca;
  --c-warning-bg:      #fffbeb;
  --c-warning-text:    #92400e;
  --c-warning-border:  #fde68a;
  --c-info-bg:         #eff6ff;
  --c-info-text:       #1d4ed8;
  --c-info-border:     #bfdbfe;
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(37,99,235,.30), transparent 45%),
    radial-gradient(circle at 90% 8%, rgba(124,58,237,.24), transparent 42%),
    linear-gradient(180deg, #05070d, #070b14 40%, #0a0f1c);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
}

[hidden] {
  display: none !important;
}

/* ===========================
   LOGIN
=========================== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.35rem;
}

.login-subtitle {
  font-size: 14px;
  color: var(--texto-sec);
  margin-bottom: 1.5rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.login-error {
  font-size: 13px;
  color: #fca5a5;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 7px;
  padding: 8px 10px;
  margin: 0;
}

.btn-login {
  width: 100%;
  margin-top: 0.25rem;
  background: var(--gradiente-acento);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
}

.btn-login:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Verificación en dos pasos */
.otp-marca { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #c9d4e5; margin-bottom: .75rem; }
.otp-boxes { display: flex; gap: 8px; justify-content: center; margin: .25rem 0 .75rem; }
.otp-box {
  width: 46px; height: 56px; text-align: center; font-size: 26px; font-weight: 700;
  border-radius: 10px; border: 1px solid rgba(201,212,229,.45); background: rgba(11,37,69,.55); color: #fff;
}
.otp-box:focus { outline: 2px solid #60a5fa; outline-offset: 1px; border-color: #60a5fa; }
.otp-timer { text-align: center; font-size: 13px; color: var(--texto-sec); margin: 0 0 .75rem; min-height: 1.2em; }
.otp-acciones { margin-top: 14px; text-align: center; font-size: 14px; color: var(--texto-sec); }
.otp-link { background: none; border: none; color: #93c5fd; cursor: pointer; font-size: 14px; text-decoration: underline; padding: 4px; }
.otp-link:disabled { color: var(--texto-sec); cursor: not-allowed; text-decoration: none; }
.otp-link-sec { color: var(--texto-sec); }
@media (max-width: 380px) { .otp-boxes { gap: 5px; } .otp-box { width: 40px; height: 50px; font-size: 22px; } }

/* ===========================
   APP TOPBAR
=========================== */
.app-topbar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.user-email {
  font-size: 13px;
  color: var(--texto-sec);
}

.btn-logout {
  background: var(--vidrio);
  color: var(--texto);
  border: 1px solid var(--vidrio-borde-fuerte);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-logout:hover {
  background: rgba(255,255,255,.09);
}

/* FIX oct-2026: .btn-logout nació para la barra superior oscura (texto claro
   sobre vidrio). Usado dentro de tarjetas y ventanas blancas quedaba blanco
   sobre blanco ("← Volver a la lista", "Cancelar", "↺ Actualizar"…). Fuera
   de la barra superior se muestra como botón secundario claro. */
.btn-logout:not(.app-topbar .btn-logout) {
  background: #fff;
  color: #1a1a2e;
  border: 1px solid #cbd5e1;
}
.btn-logout:not(.app-topbar .btn-logout):hover {
  background: #f1f5f9;
}

/* Banda de gradiente bajo el topbar — firma visual del tema oscuro */
.app-topbar::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--gradiente-banda);
  margin-top: 14px;
}

/* ===========================
   NAV MÓDULOS
=========================== */
.nav-mod {
  background: var(--vidrio);
  color: var(--texto);
  text-decoration: none;
  border: 1px solid var(--vidrio-borde);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background .12s, border-color .12s;
}
.nav-mod:hover { background: rgba(255,255,255,.09); border-color: var(--vidrio-borde-fuerte); }
.nav-mod--active {
  background: var(--gradiente-acento);
  color: #fff;
  border-color: transparent;
}
.nav-mod--active:hover { filter: brightness(1.08); }

/* ===========================
   FORM PANEL
=========================== */
.form-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 0.5rem 6rem;
  /* FIX oct-2026: .form-panel es el contenedor que comparten TODAS las
     pestañas/módulos. El body (tema oscuro) define color:var(--texto)
     (claro), pensado para el fondo oscuro general. Cualquier tarjeta
     blanca nueva dentro de un módulo (.pp-card, .vp-card, .ter-sec, etc.)
     que no fije su propio color hereda ese claro y el texto queda
     invisible sobre fondo blanco. Al fijar el color oscuro acá UNA vez,
     se corrige automáticamente en todos los módulos presentes y futuros
     — nadie tiene que acordarse de ponerlo tarjeta por tarjeta. */
  color: var(--c-text);
}

.form-header {
  background: linear-gradient(135deg, #0a1428, #0f1d3d 55%, #16214a);
  border: 1px solid var(--vidrio-borde);
  border-bottom: none;
  color: #fff;
  padding: 1.1rem 1.5rem;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.form-header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.25), transparent 70%);
}

.form-header h1 {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.form-header p {
  font-size: 13px;
  color: var(--texto-sec);
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* ===========================
   CARDS
   Fix (oct-2026, Alberto): el marco (topbar/nav/header/botones) se queda
   oscuro, pero las cards de CONTENIDO vuelven a fondo claro. Motivo: 251
   textos en 45 archivos .js arman tablas/listas con color fijo en línea
   (style="color:#333" etc.) pensado para fondo blanco — ponerlas sobre
   fondo oscuro los dejaba ilegibles en todo el CRM. Esto evita tener que
   tocar esos 45 archivos uno por uno.
=========================== */
.card {
  background: #fff;
  border: 1px solid #e2e0db;
  border-top: none;
  padding: 1.2rem 1.4rem;
  color: #1a1a2e;
}

.card-last {
  border-radius: 0 0 14px 14px;
  border-top: 1px solid #e2e0db;
}

.card + .card {
  border-top: 1px solid #e2e0db;
}

.card-title {
  font-size: 12px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .85rem;
}

/* ===========================
   GRID LAYOUTS
=========================== */
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.g3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
}

.full {
  grid-column: 1 / -1;
}

/* ===========================
   FORM FIELDS
=========================== */
.f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.f label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.f input,
.f select,
.f textarea {
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #d0cec9;
  border-radius: 7px;
  background: #fff;
  color: #111;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.f input::placeholder,
.f textarea::placeholder {
  color: #aaa;
}

.f input:focus,
.f select:focus,
.f textarea:focus {
  outline: none;
  border-color: var(--azul-glow);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.f textarea {
  resize: vertical;
  min-height: 56px;
}

.f input[readonly] {
  background: #f5f4f1;
  color: #777;
}

.hint {
  font-size: 12px;
  color: #bbb;
  margin-top: 2px;
}

/* ===========================
   CHECKBOXES
=========================== */
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.ck {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  padding: 7px 9px;
  border: 1px solid #e5e3de;
  border-radius: 7px;
  user-select: none;
  transition: background .1s, border-color .1s;
}

.ck:hover {
  background: #f7f6f3;
}

.ck input {
  width: 15px;
  height: 15px;
  accent-color: var(--azul-glow);
  flex-shrink: 0;
  cursor: pointer;
}

.ck .pr {
  font-size: 12px;
  color: #bbb;
  display: block;
  margin-top: 1px;
}

/* ===========================
   TAGS & MESSAGES
=========================== */
.tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fef3e2;
  color: #b45309;
  font-weight: 600;
  margin-left: 4px;
}

.msg {
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 13px;
  margin-top: 6px;
  display: none;
}

.msg.ok {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.msg.warn {
  background: #fef9e7;
  border: 1px solid #fcd34d;
  color: #92700a;
}

.msg.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

/* ===========================
   SUMMARY
=========================== */
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0eeea;
  font-size: 14px;
}

.summary-line:last-child {
  border-bottom: none;
}

.summary-line .lb {
  color: #555;
}

.summary-line .vl {
  font-weight: 600;
  color: var(--azul-glow);
}

.summary-line.total {
  font-size: 16px;
  border-top: 2px solid var(--azul-glow);
  border-bottom: none;
  padding-top: 11px;
  margin-top: 5px;
}

.summary-line.total .lb {
  font-weight: 700;
  color: #111;
}

.summary-line.nota {
  font-size: 13px;
  color: #999;
  border: none;
  padding: 3px 0;
}

.empty {
  color: #ccc;
  font-size: 14px;
  text-align: center;
  padding: 1.5rem;
}

.sep {
  border: none;
  border-top: 1px solid #eee;
  margin: 8px 0;
}

/* ===========================
   ACTIONS BAR
=========================== */
.actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7,11,20,.92);
  border-top: 1px solid var(--vidrio-borde);
  padding: .9rem 1rem;
  display: flex;
  gap: .6rem;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, filter .15s;
}

.btn:hover {
  opacity: .9;
  filter: brightness(1.05);
}

.btn-pdf {
  background: var(--gradiente-acento);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,.35);
}

.btn-wa {
  background: transparent;
  color: var(--cian-claro);
  border: 2px solid var(--azul-glow);
}

/* ===========================
   PRINT DOCUMENT (screen hide)
=========================== */
.print-doc {
  display: none;
}

/* ===========================
   RESPONSIVE — MÓVIL (≤600px)
=========================== */
@media (max-width: 600px) {
  .g2, .g3 {
    grid-template-columns: 1fr;
  }

  .checks {
    grid-template-columns: 1fr;
  }

  .app-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }

  .app-topbar-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap;
  }

  .app-topbar-title {
    font-size: 15px;
  }

  .form-panel {
    padding: 10px;
  }

  .card {
    padding: 14px;
  }

  .actions {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .actions button, .actions .btn {
    width: 100%;
  }

  .btn {
    font-size: 14px;
    padding: 10px 14px;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px;
  }

  .summary-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .login-card {
    padding: 24px 16px;
    margin: 16px;
  }

  .card-title {
    font-size: 15px;
  }

  select, input, textarea {
    font-size: 16px;
  }

  .tab-bar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .tab-btn {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* ── Topbar: orden y apilado ─────────────────────── */
  /* El topbar ya apila en columna (título arriba, actions abajo).
     Dentro de actions: email → nav → logout — en ese orden natural del HTML. */

  /* Email y role-badge: ancho completo, text truncado */
  .user-email {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Botón cerrar sesión: ancho completo como última línea */
  .btn-logout {
    width: 100%;
    text-align: center;
  }

  /* ── Nav de módulos: grid 3 columnas ─────────────── */
  /* Cubre todos los divs *-mod-nav (index, dash, seg, nom, etc.)
     !important para vencer el inline style="display:flex" */
  [id$="-mod-nav"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
  }

  /* Botones del nav: más pequeños, centrados, sin nowrap */
  .nav-mod {
    font-size: 13px;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
  }
}

/* ===========================
   RESPONSIVE — MUY PEQUEÑO (≤400px)
=========================== */
@media (max-width: 400px) {
  .g2, .g3 {
    grid-template-columns: 1fr;
  }

  .form-panel {
    padding: 6px;
  }

  .card {
    padding: 10px;
  }
}

/* ===========================
   ESTÁNDAR ÚNICO DE MÓDULO (oct-2026, Alberto)
   Toda pantalla nueva de tabla/pestañas/badges debe usar estas clases
   en vez de inventar su propio CSS — así no vuelve a pasar que cada
   módulo tenga su propio tamaño de letra. Valores de referencia:
   pestañas 14px · encabezado de tabla 12px · celda de tabla 14px ·
   badge de estado 11px · botón pequeño 13px.
=========================== */
.tabs-std, .act-tabs, .inv-tabs, .vta-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 0 1.25rem 0; margin-bottom: -1px;
}
.tab-std-btn, .act-tab-btn, .inv-tab-btn, .vta-tab-btn {
  background: var(--c-bg-subtle); color: var(--c-text-muted);
  border: 1px solid var(--c-border-light); border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 18px; font-size: var(--fs-base); font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.tab-std-btn:hover, .act-tab-btn:hover, .inv-tab-btn:hover, .vta-tab-btn:hover { background: #efefeb; color: var(--c-heading); }
.tab-std-btn--active, .act-tab-btn--active, .inv-tab-btn--active, .vta-tab-btn--active {
  background: #fff; color: var(--c-heading);
  border-color: var(--c-border-light); border-bottom-color: #fff;
  position: relative; z-index: 1;
}
.tab-std-panel, .act-tab-panel, .inv-tab-panel, .vta-tab-panel { border-top: 1px solid var(--c-border-light); }
/* Fix oct-2026: un panel de pestaña que no es tarjeta quedaba transparente
   sobre el fondo oscuro, con la letra oscura de .form-panel encima (caso
   Pagos a Terceros: la tabla no se leía). Se le da la superficie blanca de
   las tarjetas para que siempre se lea. */
.tab-std-panel:not(.card) {
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: 0 10px 10px 10px; padding: 14px 16px;
}

.tabla-std, .act-table, .admin-table, .items-tbl { width: 100%; border-collapse: collapse; }
.tabla-std th, .act-table th, .admin-table th, .items-tbl th {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--c-border-light); white-space: nowrap;
}
.tabla-std td, .act-table td, .admin-table td, .items-tbl td {
  font-size: var(--fs-base); color: var(--c-text);
  padding: 10px 10px; border-bottom: 1px solid #f0eeea;
  vertical-align: middle;
}
.tabla-std tbody tr:last-child td, .act-table tbody tr:last-child td, .admin-table tbody tr:last-child td, .items-tbl tbody tr:last-child td { border-bottom: none; }
.tabla-std tbody tr:hover td, .act-table tbody tr:hover td, .admin-table tbody tr:hover td { background: rgba(0,0,0,.02); }
.items-tbl td:not(:first-child), .items-tbl th:not(:first-child) { text-align: right; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.act-table input[type="number"], .act-table input[inputmode="numeric"],
.act-table input[type="text"],
.act-table textarea,
.act-table select {
  font-family: inherit; font-size: var(--fs-sm);
  padding: 5px 8px; border: 1px solid var(--c-border);
  border-radius: 5px; width: 100%; box-sizing: border-box;
  background: var(--c-bg-hover); color: var(--c-text);
}
.act-table textarea { min-height: 40px; resize: vertical; }
.act-table input:focus, .act-table select:focus, .act-table textarea:focus {
  outline: none; border-color: var(--c-heading);
}

.badge-std, .act-badge, .cont-badge, .rec-badge {
  display: inline-block; font-size: var(--fs-2xs); font-weight: 700;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.act-badge-excelente { background: var(--c-success-bg); color: var(--c-success-text); border: 1px solid var(--c-success-border); }
.act-badge-bueno     { background: var(--c-info-bg); color: #1e40af; border: 1px solid var(--c-info-border); }
.act-badge-regular   { background: #fff7ed; color: var(--c-warning-text); border: 1px solid var(--c-warning-border); }
.act-badge-malo,
.act-badge-faltante,
.act-badge-inconsistencia { background: var(--c-danger-bg); color: var(--c-danger-text); border: 1px solid var(--c-danger-border); }

.btn-std-sm, .act-btn-sm, .inv-btn-sm {
  background: var(--c-bg-subtle); color: var(--c-heading);
  border: 1px solid var(--c-border); border-radius: 6px;
  padding: 5px 12px; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.btn-std-sm:hover, .act-btn-sm:hover, .inv-btn-sm:hover { background: #eceae4; }
.btn-std-sm--primary, .act-btn-sm--primary { background: var(--c-heading); color: #fff; border-color: var(--c-heading); }
.btn-std-sm--primary:hover, .act-btn-sm--primary:hover { background: #162f50; }
.btn-std-sm--danger, .act-btn-sm--danger, .inv-btn-danger { border-color: var(--c-danger-border); color: var(--c-danger-text); }
.btn-std-sm--danger:hover, .act-btn-sm--danger:hover, .inv-btn-danger:hover { background: var(--c-danger-bg); }

@media (max-width: 600px) {
  .tabs-std, .act-tabs, .inv-tabs, .vta-tabs { padding: 0 .75rem; gap: 2px; }
  .tab-std-btn, .act-tab-btn, .inv-tab-btn, .vta-tab-btn { padding: 7px 12px; font-size: var(--fs-sm); }
}

/* ── Botón volver (global, usado en todos los módulos) ─────────────────── */
.btn-back {
  background: #fff; color: var(--c-heading);
  border: 1px solid var(--c-border); border-radius: 7px;
  padding: 7px 14px; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-back:hover { background: var(--c-bg-subtle); }

/* ── Language toggle ─────────────────────────────────────────────────── */
.lang-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-lang {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
}

.btn-lang.active {
  background: var(--gradiente-acento);
  color: #fff;
  border-color: transparent;
}

.btn-lang:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ── Botón de ayuda contextual ───────────────────────────────────────── */
.btn-ayuda {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradiente-acento);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37,99,235,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s;
}
.btn-ayuda:hover { filter: brightness(1.1); }

.ayuda-modal {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff; color:var(--c-text);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 1001;
  padding: 20px;
  border: 1px solid #e2e0db;
}
.ayuda-modal.visible { display: block; }
.ayuda-modal h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f2644;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0f2644;
}
.ayuda-modal .ayuda-seccion {
  margin-bottom: 14px;
}
.ayuda-modal .ayuda-label {
  font-size: 12px;
  font-weight: 700;
  color: #0f2644;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ayuda-modal .ayuda-texto {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}
.ayuda-cerrar {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
}