/* ╔══════════════════════════════════════════════════════╗
   ║  ALCAMPO — TEMA OSCURO COMPARTIDO                    ║
   ║  Cargado DESPUÉS de los estilos del módulo para      ║
   ║  sobrescribir variables y componentes base.          ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── Variables globales (sobrescriben las del módulo) ─── */
:root {
  --bg:           #1A2B45 !important;
  --surface:      rgba(255,255,255,0.05) !important;
  --surface2:     rgba(255,255,255,0.09) !important;
  --border:       rgba(201,168,76,0.22) !important;
  --border2:      rgba(201,168,76,0.42) !important;
  --text:         #F5F0E8 !important;
  --text2:        rgba(245,240,232,0.62) !important;
  --text3:        rgba(245,240,232,0.38) !important;
  --radius:       10px !important;
  --radius-sm:    6px !important;
  /* Colores adaptados para fondo oscuro */
  --blue:         #6ab0ff !important;
  --blue-light:   rgba(106,176,255,0.14) !important;
  --green:        #5ccca6 !important;
  --green-light:  rgba(92,204,166,0.14) !important;
  --red:          #e57373 !important;
  --red-light:    rgba(229,115,115,0.14) !important;
  --amber:        #ffb74d !important;
  --amber-light:  rgba(255,183,77,0.14) !important;
  --purple:       #ce93d8 !important;
  --purple-light: rgba(186,104,200,0.14) !important;
  --teal:         #4dd0c4 !important;
  --teal-light:   rgba(77,208,196,0.14) !important;
  --orange:       #ffab76 !important;
  --orange-light: rgba(255,171,118,0.14) !important;
  /* Tema propio */
  --gold:  #C9A84C;
  --gold2: #E8C96A;
  --navy:  #1A2B45;
  --navy2: #243555;
  --cream: #F5F0E8;
}

/* ── Fuentes ─────────────────────────────────────────────── */
body, input, select, textarea, button {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Body ───────────────────────────────────────────────── */
html, body {
  background: #1A2B45 !important;
  color: #F5F0E8 !important;
}

body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(201,168,76,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(201,168,76,0.05) 0%, transparent 50%),
    repeating-linear-gradient(-45deg, transparent, transparent 40px,
      rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Línea dorada superior */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #C9A84C, #E8C96A, #C9A84C, transparent) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

/* ── Login screen ───────────────────────────────────────── */
#login-screen {
  background: #1A2B45 !important;
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.login-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

.login-card h1, .login-card h2, .login-card h3 {
  font-family: 'Cinzel', serif !important;
  color: #E8C96A !important;
}

.login-card p, .login-card span {
  color: rgba(245,240,232,0.45) !important;
}

.login-card input {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: #F5F0E8 !important;
  border-radius: 7px !important;
}

.login-card input:focus {
  border-color: #E8C96A !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
}

.login-card .login-error, .login-error {
  color: #e57373 !important;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar, #topbar, .top-bar, nav.topbar {
  background: rgba(26,43,69,0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(201,168,76,0.2) !important;
  color: #F5F0E8 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

.topbar h1, .topbar .topbar-title {
  font-family: 'Cinzel', serif !important;
  color: #E8C96A !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

.topbar-back, a.topbar-back {
  color: rgba(245,240,232,0.5) !important;
  text-decoration: none !important;
}

.topbar-back:hover { color: #E8C96A !important; }

.badge-empresa {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}

.badge-rina {
  background: rgba(106,176,255,0.15) !important;
  border: 1px solid rgba(106,176,255,0.35) !important;
  color: #6ab0ff !important;
}

.badge-rufina {
  background: rgba(92,204,166,0.15) !important;
  border: 1px solid rgba(92,204,166,0.35) !important;
  color: #5ccca6 !important;
}

/* ── Empresa / sección tabs ─────────────────────────────── */
.empresa-tabs, .tabs, .section-nav, .nav-tabs {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(201,168,76,0.15) !important;
}

.tab, .snav-tab, .nav-tab {
  color: rgba(245,240,232,0.45) !important;
  background: transparent !important;
  border-color: transparent !important;
  transition: all 0.2s !important;
}

.tab:hover, .snav-tab:hover {
  color: #E8C96A !important;
  background: rgba(201,168,76,0.07) !important;
}

.tab.active, .tab.active-rina, .tab.active-rufina,
.tab.active-todas, .snav-tab.active {
  color: #E8C96A !important;
  background: rgba(201,168,76,0.13) !important;
  border-color: rgba(201,168,76,0.5) !important;
}

/* ── Superficies / tarjetas ─────────────────────────────── */
.card, .stat-card, .resumen-card, .pago-card,
.form-card, .section-card, .info-card,
.factores-banner, .module-card, .sum-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(201,168,76,0.2) !important;
  color: #F5F0E8 !important;
}

.card-title, .card h3, .card h2,
.section-title, .resumen-title {
  font-family: 'Cinzel', serif !important;
  color: #E8C96A !important;
}

/* ── Tablas ─────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
  color: #F5F0E8 !important;
}

thead th {
  background: rgba(201,168,76,0.1) !important;
  color: #E8C96A !important;
  border-bottom: 1px solid rgba(201,168,76,0.25) !important;
  border-color: rgba(201,168,76,0.18) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

tfoot td, tfoot th {
  background: rgba(201,168,76,0.08) !important;
  color: #E8C96A !important;
  border-top: 1px solid rgba(201,168,76,0.3) !important;
  font-weight: 700 !important;
}

tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
}

tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}

tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02) !important;
}

tbody tr:nth-child(even):hover {
  background: rgba(255,255,255,0.05) !important;
}

tbody td {
  color: #F5F0E8 !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* ── Inputs / selects / textarea ────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(201,168,76,0.25) !important;
  color: #F5F0E8 !important;
  border-radius: 6px !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
  border-color: #E8C96A !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.12) !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(245,240,232,0.3) !important;
}

/* ── Botón primario ─────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #C9A84C, #E8C96A) !important;
  color: #1A2B45 !important;
  border: none !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.btn-primary:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

/* ── Botón export / import ──────────────────────────────── */
.btn-export, .export-btn {
  background: rgba(92,204,166,0.15) !important;
  border: 1px solid rgba(92,204,166,0.4) !important;
  color: #5ccca6 !important;
}

.btn-import {
  background: rgba(106,176,255,0.15) !important;
  border: 1px solid rgba(106,176,255,0.4) !important;
  color: #6ab0ff !important;
}

/* ── Botón secundario ───────────────────────────────────── */
.btn-sec {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(245,240,232,0.7) !important;
}

.btn-sec:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(201,168,76,0.35) !important;
  color: #E8C96A !important;
}

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay, .modal-backdrop {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
}

.modal, .modal-content, .modal-box {
  background: #243555 !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: #F5F0E8 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

.modal h2, .modal h3, .modal-title {
  font-family: 'Cinzel', serif !important;
  color: #E8C96A !important;
}

/* ── Toast / notificaciones ─────────────────────────────── */
.undo-toast, .toast, [class*="toast"] {
  background: #243555 !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  color: #F5F0E8 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ── Loading overlay ────────────────────────────────────── */
.loading-overlay, #loading {
  background: rgba(26,43,69,0.85) !important;
  backdrop-filter: blur(4px) !important;
  color: #E8C96A !important;
}

.loading-spinner {
  color: #E8C96A !important;
  border-top-color: #C9A84C !important;
}

/* ── Headings generales ─────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Cinzel', serif !important;
  color: #E8C96A !important;
}

h4, h5, h6 {
  font-family: 'Cinzel', serif !important;
  color: rgba(232,201,106,0.75) !important;
}

/* ── Links ──────────────────────────────────────────────── */
a:not(.btn-primary):not(.tab):not(.module-card) {
  color: #6ab0ff !important;
}

a:hover:not(.btn-primary):not(.tab):not(.module-card) {
  color: #E8C96A !important;
}

/* ── Chips / etiquetas de color ─────────────────────────── */
[class*="chip-blue"], [class*="chip-rina"], .chip-blue  { background: rgba(106,176,255,0.14) !important; color: #6ab0ff !important; border-color: rgba(106,176,255,0.3) !important; }
[class*="chip-green"], .chip-green                       { background: rgba(92,204,166,0.14) !important;  color: #5ccca6 !important; border-color: rgba(92,204,166,0.3) !important; }
[class*="chip-red"],   .chip-red                         { background: rgba(229,115,115,0.14) !important; color: #e57373 !important; border-color: rgba(229,115,115,0.3) !important; }
[class*="chip-amber"], .chip-amber                       { background: rgba(255,183,77,0.14) !important;  color: #ffb74d !important; border-color: rgba(255,183,77,0.3) !important; }

/* ── Valores positivos / negativos ─────────────────────── */
.pos, .positivo, .abono, [class*="-pos"]    { color: #5ccca6 !important; }
.neg, .negativo, .cargo, [class*="-neg"]    { color: #e57373 !important; }
.neu, .neutro, [class*="-neu"]              { color: #E8C96A !important; }

/* ── Scrollbar personalizada ────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb        { background: rgba(201,168,76,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(201,168,76,0.55); }

/* ── Selección de texto ─────────────────────────────────── */
::selection {
  background: rgba(201,168,76,0.35) !important;
  color: #F5F0E8 !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL  (iPhone y pantallas ≤ 768px)
   Todos los bloques van dentro de @media para no tocar Mac/desktop
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Evita que cualquier elemento desborde la pantalla y cause zoom */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Excepción: tablas y sus wrappers pueden desbordar su contenedor
     pero el wrapper tiene overflow:auto para contener el scroll */
  table, .table-scroll-wrap {
    max-width: none !important;
  }


  /* ── Topbar ──────────────────────────────────────────────── */
  .topbar, #topbar, .top-bar, nav.topbar {
    padding: 0 12px !important;
    height: 48px !important;
  }

  .topbar h1, .topbar .topbar-title {
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }

  .topbar-sub { display: none !important; }

  .badge-empresa {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  /* ── Page header (bancomer) ──────────────────────────────── */
  .page-header {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .page-title { font-size: 15px !important; }
  .page-subtitle { font-size: 11px !important; }

  /* ── Menú de navegación global ───────────────────────────── */
  #alcampo-nav-btn {
    font-size: 10px !important;
    padding: 4px 9px !important;
    gap: 4px !important;
  }

  #alcampo-nav-dropdown {
    right: 8px !important;
    left: 8px !important;
    min-width: unset !important;
    top: 48px !important;
  }

  /* ── Tablas — scroll horizontal ─────────────────────────── */
  .table-wrap, .table-container, [class*="table-wrap"],
  .fin-table-wrap, .section-page, .datos-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Wrappear tablas sueltas en secciones con overflow */
  .section-page, .tab-content, .card {
    overflow-x: auto !important;
  }

  table {
    font-size: 12px !important;
    /* NO min-width aquí — el JS ya envuelve cada tabla en overflow:auto */
  }

  thead th {
    font-size: 10px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  tbody td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* ── Formularios ─────────────────────────────────────────── */
  .form-row, .fg-row, [class*="form-row"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .form-group, .fg, [class*="form-group"] {
    width: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* evita zoom automático en iOS */
    padding: 10px 12px !important;
  }

  /* ── Botones ─────────────────────────────────────────────── */
  .btn-primary, .btn-export, .btn-import, .btn-sec {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .topbar-right .btn-primary,
  .topbar-right .btn-export,
  .topbar-right .btn-sec {
    width: auto !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  /* ── Cards / stat cards ──────────────────────────────────── */
  .card, .stat-card, .resumen-card, .sum-card {
    padding: 14px !important;
  }

  .stats-row, .resumen-row, [class*="stats-row"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── Tabs ────────────────────────────────────────────────── */
  .empresa-tabs, .tabs, .section-nav, .nav-tabs,
  .banco-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .tab, .snav-tab, .nav-tab, .banco-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* ── Modales ─────────────────────────────────────────────── */
  .modal, .modal-content, .modal-box {
    width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
  }

  /* ── Login card ──────────────────────────────────────────── */
  .login-card {
    width: 90vw !important;
    padding: 28px 20px !important;
  }

  /* ── Headings ────────────────────────────────────────────── */
  h1 { font-size: 18px !important; }
  h2 { font-size: 15px !important; }
  h3 { font-size: 13px !important; }

  /* ── Ocultar columnas poco importantes en móvil ──────────── */
  .hide-mobile { display: none !important; }

}