:root{--bg:#f9f9fb;--text:#333;--sidebar-bg:#fff;--sidebar-border:#eee;--hover-bg:#f2f4f7;--active-bg:#e9ecf2;--active-text:#1a73e8}
body.dark,html[data-theme="dark"] body{--bg:#1e1e2f;--text:#f1f1f1;--sidebar-bg:#2a2a3c;--sidebar-border:#444;--hover-bg:#33384d;--active-bg:#3a3f55;--active-text:#4a90e2}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.header{background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border);color:var(--text);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:60px;z-index:1000}
.header h1{margin:0;font-size:18px;font-weight:600}
.app-title{text-decoration:none;color:var(--text)}.app-title:hover{color:var(--active-text)}
.toggle-btn,.theme-btn{font-size:20px;background:none;border:none;color:var(--text);cursor:pointer;margin-left:10px}
.toggle-btn{position:relative}
.toggle-btn:hover::after{content:attr(title);position:absolute;bottom:-34px;left:0;background:var(--active-text);color:#fff;padding:6px 8px;font-size:12px;border-radius:6px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.header-actions{display:flex;align-items:center;gap:10px}
.user-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--active-bg);color:var(--active-text);font-size:13px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:transparent;border:1px solid var(--sidebar-border);text-decoration:none}
.icon-btn:hover{background:var(--hover-bg)}
.sidebar{width:240px;background:var(--sidebar-bg);color:var(--text);min-height:calc(100vh - 60px);position:fixed;top:60px;left:0;border-right:1px solid var(--sidebar-border);transition:transform .3s ease,background .3s ease;display:flex;flex-direction:column}
.sidebar .logo{display:flex;align-items:center;justify-content:center;gap:10px;height:80px;font-size:18px;font-weight:700;border-bottom:1px solid var(--sidebar-border);text-transform:uppercase;letter-spacing:1px}
.brand-logo{height:28px;width:28px;object-fit:contain;border-radius:6px}
.brand-logo.small{height:18px;width:18px;margin-right:8px}
.sidebar nav{flex:1;padding:10px 0}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar ul li a{display:flex;align-items:center;gap:12px;padding:12px 18px;text-decoration:none;color:var(--text);font-size:14px;border-radius:8px;transition:background .2s ease,color .2s ease}
.sidebar ul li a i{font-size:18px}
.sidebar ul li a:hover{background:var(--hover-bg)}
.sidebar ul li a.active{background:var(--active-bg);font-weight:600;color:var(--active-text)}
.site-footer{padding:10px 20px;text-align:center;background:var(--sidebar-bg);border-top:1px solid var(--sidebar-border);margin-left:240px;margin-top:20px}
.footer-brand{display:inline-flex;align-items:center;gap:8px}
.main-content{margin-left:240px;margin-top:60px;padding:20px;transition:margin-left .3s ease}
.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:#ecfdf5;border-color:#10b98133;color:#065f46}
.settings-section{background:var(--sidebar-bg);padding:20px;border:1px solid var(--sidebar-border);border-radius:8px;margin-bottom:20px}
.settings-section h2{margin-top:0;color:var(--active-text)}
.settings-section label{display:block;margin:10px 0 5px;font-weight:500}
.settings-section input,.settings-section select{width:100%;padding:8px;border:1px solid var(--sidebar-border);border-radius:5px;margin-bottom:15px}
.settings-section button{padding:10px 15px;background:var(--active-text);color:#fff;border:0;border-radius:6px;cursor:pointer}
.settings-section button:hover{opacity:.92}
.logo-preview img{border:1px solid var(--sidebar-border);border-radius:6px;padding:5px;background:#fff}
/* Overlay para móvil/tablet */
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1040;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sidebar-overlay.active{display:block;}

/* Sidebar colapsado en desktop (≥1024px) */
body.sidebar-collapsed .sidebar{transform:translateX(-240px);}
body.sidebar-collapsed .main-content{margin-left:0 !important;}
body.sidebar-collapsed .site-footer{margin-left:0 !important;}

/* Tablet y móvil (<1024px): sidebar oculto, abre como overlay */
@media (max-width:1023px){
  .sidebar{transform:translateX(-100%) !important;z-index:1050;}
  .sidebar.active{transform:translateX(0) !important;}
  .main-content{margin-left:0 !important;margin-top:60px;}
  .site-footer{margin-left:0 !important;}

  /* Scroll horizontal en contenedores de tabla */
  .settings-section{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;}

  /* Todas las tablas dentro de main-content scrollean horizontalmente */
  .main-content .styled-table,
  .main-content table:not(.no-scroll){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:100%;
    white-space:nowrap;
  }

  /* Formularios: inputs full width en móvil */
  .form-row{flex-direction:column !important;}
  .form-row .form-group{flex:1 1 100% !important;width:100% !important;}

  /* Header: ocultar chip de usuario si no cabe */
  .user-chip span:not(.mdi){display:none;}
  .user-chip{padding:6px;}
}
/* ==== Tablas Estilizadas ==== */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.styled-table th,
.styled-table td {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
}
.styled-table th {
  text-align: left;
  background-color: #f8f9fa;
  font-weight: bold;
}
.styled-table td { vertical-align: middle; }
.styled-table tr:hover { background-color: #f1f1f1; }
.styled-table td.actions { text-align: center; }
.styled-table td.money { text-align: right; }

/* ==== Botones ==== */
.btn-action {
  display: inline-block;
  padding: 8px 14px;
  margin-right: 8px;
  border-radius: 6px;
  background-color: #4CAF50;
  color: #fff !important;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}
.btn-action:hover { background-color: #45a049; }
.btn-secondary { background-color: #007bff; }
.btn-secondary:hover { background-color: #0056b3; }
.btn-cancel { background-color: #6c757d; }

/* ==== Submenús ==== */
.sidebar ul li.active > a {
  background: var(--active-bg);
  color: var(--active-text);
  font-weight: 600;
  border-radius: 6px;
}
.sidebar ul li.active > a i { color: var(--active-text); }
.sidebar ul li ul.submenu li a { padding-left: 40px; font-size: 13px; }
.sidebar ul li ul.submenu li a:hover { background: var(--hover-bg); color: var(--active-text); }
.sidebar ul li ul.submenu li a.active { background: var(--active-bg); color: var(--active-text); font-weight: 600; border-radius: 6px; }
.sidebar .submenu-arrow { margin-left: auto; transition: transform 0.3s ease; font-size: 12px; }
.sidebar li.has-submenu.active .submenu-arrow { transform: rotate(180deg); }
.sidebar ul li ul.submenu li a i { font-size: 14px; color: var(--active-text); }

/* =========================================================
   CORRECCIÓN FINAL DE FILAS VENCIDAS (SIN FRANJA NI LÍNEA)
   ========================================================= */
.styled-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Fila vencida */
tr.remesa-vencida {
  background-color: #ffe8e8 !important;
  border-bottom: 1px solid #ddd !important;
  height: 44px !important;
}
tr.remesa-vencida td {
  background-color: inherit !important;
  border: none !important;
  padding: 8px 12px !important;
  height: 44px !important;
  vertical-align: middle !important;
}

/* Hover */
tr.remesa-vencida:hover,
tr.remesa-vencida:hover td {
  background-color: #ffdcdc !important;
  transition: background-color 0.25s ease-in-out;
}

/* Acciones corregidas (sin línea inferior ni subrayado) */
tr.remesa-vencida td.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: inherit !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  height: 44px !important;
  line-height: 1 !important;
  position: relative !important;
  box-shadow: inset 0 -1px 0 rgba(255,232,232,1) !important;
  z-index: 1 !important;
}
tr.remesa-vencida td.actions a {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
tr.remesa-vencida td.actions a:focus,
tr.remesa-vencida td.actions a:hover,
tr.remesa-vencida td.actions a:active {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
tr.remesa-vencida td.actions a i {
  color: #003366 !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  line-height: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Normaliza filas */
.styled-table tr { height: 44px !important; margin: 0 !important; padding: 0 !important; }

/* ==== MODO OSCURO ==== */
html body.dark tr.remesa-vencida {
  background-color: #4a1f1f !important;
  border-bottom: 1px solid #663737 !important;
}
html body.dark tr.remesa-vencida td { background-color: #4a1f1f !important; color: #fecaca !important; }
html body.dark tr.remesa-vencida:hover,
html body.dark tr.remesa-vencida:hover td {
  background-color: #592626 !important;
  transition: background-color 0.25s ease-in-out;
}
html body.dark tr.remesa-vencida td.actions {
  box-shadow: inset 0 -1px 0 rgba(74,31,31,1) !important;
}
html body.dark tr.remesa-vencida td.actions a i { color: #b7dcff !important; }


/* ================================
   MODO OSCURO — Tablas, Forms, Cards
   ================================ */
/* Tablas */
body.dark .styled-table th{background-color:#33384d !important;color:#e5e7eb !important;border-bottom-color:#4b5563 !important;}
body.dark .styled-table td{border-bottom-color:#374151 !important;color:#d1d5db;}
body.dark .styled-table tr:hover{background-color:#33384d !important;}
body.dark .styled-table tr:hover td{background-color:inherit !important;}

/* Inputs / selects / textareas */
body.dark input[type="text"],
body.dark input[type="number"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="date"],
body.dark input[type="search"],
body.dark select,
body.dark textarea{background-color:#2a2a3c !important;color:#f1f1f1 !important;border-color:#4b5563 !important;}

/* Cards genericas (dashboard, tablas de contenido) */
body.dark .card-block,
body.dark .deuda-card-main,
body.dark .card-wrapper,
body.dark .dash-card{background-color:#2a2a3c !important;color:#e5e7eb !important;}

/* Textos de colores fijos comunes */
body.dark .deuda-header-title{color:#60a5fa !important;}
body.dark .deuda-total-amount,
body.dark .dash-table th{color:#e5e7eb !important;}
body.dark .deuda-header-subtitle,
body.dark .deuda-note,
body.dark .small-muted,
body.dark .pending-result{color:#9ca3af !important;}
body.dark .dash-table th{background-color:#33384d !important;}
body.dark .dash-table td{border-bottom-color:#374151 !important;color:#d1d5db;}
body.dark .tasas-btn.gray{background:#374151 !important;color:#e5e7eb !important;}

/* Alerts en dark */
body.dark .alert-danger{background:#3b1515 !important;border-color:#7f1d1d !important;color:#fca5a5 !important;}
body.dark .alert-success{background:#1a4731 !important;border-color:#166534 !important;color:#86efac !important;}
body.dark .alert-warning{background:#4a2e0a !important;border-color:#713f12 !important;color:#fdba74 !important;}
body.dark .alert-info{background:#1e3a4a !important;border-color:#1e40af !important;color:#7dd3fc !important;}

/* ================================
   MODO OSCURO — Expansión completa
   ================================ */

/* Variables adicionales dark */
body.dark,
html[data-theme="dark"] body{--card-bg:#2a2a3c;--border:#4b5563;--border-light:#374151;--text-secondary:#9ca3af;--text-muted:#6b7280;--bg-light:#33384d;--bg-section:#33384d;--color-primary:#60a5fa;}

/* Cards genéricas — ambos selectores para evitar timing issues */
body.dark .card,html[data-theme="dark"] .card,
body.dark .card-header,html[data-theme="dark"] .card-header,
body.dark .photo-card,html[data-theme="dark"] .photo-card,
body.dark .remesa-summary-card,html[data-theme="dark"] .remesa-summary-card,
body.dark .deuda-dashboard-card,html[data-theme="dark"] .deuda-dashboard-card,
body.dark .tasas-card,html[data-theme="dark"] .tasas-card{background-color:#2a2a3c !important;border-color:#4b5563 !important;color:#e5e7eb !important;}

/* Contenedor de tabla con scroll (remesas y otros módulos) */
body.dark .table-scroll-xy{background:#1e1e2f !important;border-color:#4b5563 !important;}
body.dark #remesasTable thead th,
body.dark #remesasTable thead tr.filters-row th{background:#2a2a3c !important;color:#e5e7eb !important;border-color:#374151 !important;}
body.dark #remesasTable td,
body.dark #remesasTable th{border-color:#374151 !important;color:#d1d5db !important;}
body.dark #remesasTable tbody tr:hover td{background:#33384d !important;}

/* Badges de estado — usados en múltiples módulos */
body.dark .badge-success,
body.dark .badge-ok{background:#1a4731 !important;color:#86efac !important;}
body.dark .badge-error,
body.dark .badge-bad{background:#4a1c1c !important;color:#fca5a5 !important;}
body.dark .badge-warn,
body.dark .badge-warning{background:#4a2e0a !important;color:#fdba74 !important;}
body.dark .badge-neutral{background:#374151 !important;color:#d1d5db !important;}
body.dark .badge-info{background:#1e3a4a !important;color:#7dd3fc !important;}

/* Tasas alerts */
body.dark .tasas-alert.ok{background:#1a4731 !important;color:#86efac !important;border-color:#166534 !important;}
body.dark .tasas-alert.err{background:#4a1c1c !important;color:#fca5a5 !important;border-color:#7f1d1d !important;}

/* Botones grises / secundarios */
body.dark .btn.gray{background:#374151 !important;color:#e5e7eb !important;}
body.dark .btn.link{background:transparent !important;border-color:#4b5563 !important;color:#d1d5db !important;}

/* Fila de filtros en tablas + inputs dentro */
body.dark .filters-row th{background:#33384d !important;border-color:#4b5563 !important;}
body.dark .col-filter,
body.dark .filters-row input,
body.dark .filters-row select{background:#1e2433 !important;border-color:#4b5563 !important;color:#f1f1f1 !important;}
body.dark .col-filter:focus,
body.dark .filters-row input:focus{border-color:#3b82f6 !important;box-shadow:0 0 0 2px rgba(59,130,246,.25) !important;}

/* Badge pendiente (alias de warn) */
body.dark .badge-pending{background:#4a2e0a !important;color:#fdba74 !important;}

/* Select de estado en tablas (electrodomésticos y otros) */
body.dark .status-select{background:#1e2433 !important;border-color:#4b5563 !important;color:#f1f1f1 !important;}

/* Conciliación — tarjeta resumen de deuda */
body.dark .debt-summary-card{background:#252d42 !important;border-color:#374151 !important;}
body.dark .debt-segment-amount{color:#f1f1f1 !important;}
body.dark .debt-segment-name,
body.dark .debt-summary-total{color:#9ca3af !important;}

/* Gen-picker (buscador de selects) */
body.dark .gen-picker-results{background:#2a2a3c !important;border-color:#4b5563 !important;box-shadow:0 4px 16px rgba(0,0,0,.4) !important;}
body.dark .gen-picker-item{color:#f1f1f1 !important;}
body.dark .gen-picker-item:hover{background:#33384d !important;}
body.dark .gen-picker-item.selected{background:#3a3f55 !important;}
body.dark .gen-picker-empty{color:#6b7280 !important;}
body.dark .gen-picker-search{background:#2a2a3c !important;color:#f1f1f1 !important;border-color:#4b5563 !important;}

/* Searchable box (búsqueda con lista) */
body.dark .searchable-box{background:#2a2a3c !important;border-color:#4b5563 !important;}
body.dark .searchable-item{color:#f1f1f1 !important;}
body.dark .searchable-item:hover{background:#33384d !important;}
body.dark .searchable-item.selected{background:#3a3f55 !important;}

/* Métrica / pills / barra de deuda */
body.dark .metric-pill{background:#374151 !important;color:#d1d5db !important;}
body.dark .deuda-bar-container{background:#374151 !important;}

/* Conciliación — componentes rs-* */
body.dark .rs-block{background:#33384d !important;border-color:#4b5563 !important;}
body.dark .rs-row span{color:#d1d5db !important;}
body.dark .rs-note{color:#9ca3af !important;}

/* Logo preview en configuración */
body.dark .logo-preview img{background:#33384d !important;}

/* Modales */
body.dark .modal-backdrop{background:rgba(0,0,0,.7) !important;}
body.dark .modal-content,
body.dark [id$="Modal"] > div:first-child{background:#2a2a3c !important;color:#f1f1f1 !important;border-color:#4b5563 !important;}

/* Inputs de tipo file y checkboxes */
body.dark input[type="file"]{color:#f1f1f1 !important;}
body.dark input[type="checkbox"],
body.dark input[type="radio"]{accent-color:var(--active-text);}

/* Tablas inline (sin clase styled-table) */
body.dark table th{background-color:#33384d !important;color:#e5e7eb !important;border-color:#4b5563 !important;}
body.dark table td{border-color:#374151 !important;color:#d1d5db !important;}
body.dark table tr:hover td{background-color:#33384d !important;}

/* Títulos h1/h2/h3 en main-content */
body.dark .main-content h1,
body.dark .main-content h2,
body.dark .main-content h3{color:var(--text) !important;}

/* Hrefs internos (links) */
body.dark .main-content a:not(.btn-action):not(.icon-btn):not(.app-title){color:#60a5fa;}

/* Separadores */
body.dark hr{border-color:#4b5563 !important;}

/* eo-ss (searchable select — remesas/form, estimados/form, facturas/form) */
body.dark .eo-ss-input{background:#1e2433 !important;border-color:#4b5563 !important;color:#f1f1f1 !important;}
body.dark .eo-ss-input::placeholder{color:#9ca3af !important;}
body.dark .eo-ss-list{background:#252d42 !important;border-color:#4b5563 !important;box-shadow:0 8px 24px rgba(0,0,0,.4) !important;}
body.dark .eo-ss-item{color:#f1f1f1 !important;}
body.dark .eo-ss-item:hover{background:#33384d !important;}
body.dark .eo-ss-empty{color:#9ca3af !important;}

/* Drawer lateral (estimados/form) */
body.dark .drawer{background:#1e2433 !important;color:#f1f1f1 !important;}
body.dark .drawer header{border-color:#374151 !important;color:#f1f1f1 !important;}
body.dark .drawer-overlay{background:rgba(0,0,0,.6) !important;}

/* Info/resumen boxes con fondo claro en formularios */
body.dark #infoCliente,
body.dark #envioResumen,
body.dark .info-box-light{background:#252d42 !important;border-color:#374151 !important;color:#d1d5db !important;}

/* Caja verde claro (detalle combo, etc.) */
body.dark .combo-detalle-box{background:#1a3a2a !important;border-color:#166534 !important;color:#d1fae5 !important;}

/* ================================
   FIX: Sidebar con scroll interno
   (para móvil/tablet y también desktop si hace falta)
   ================================ */

.sidebar {
  height: calc(100vh - 60px);
  overflow: hidden;
}
.sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}