/* =========================
   Cobranzas Pro — Tema Dark (Optimizado)
   ========================= */

/* -------- Variables del tema -------- */
:root{
  --bg: #0a0f1d;
  --bg-2: #0c1428;

  --glass: rgba(18, 22, 37, .55);
  --glass-2: rgba(20, 25, 44, .72);
  --glass-border: rgba(255,255,255,.08);

  --text: #eef3ff;
  --muted: #a9b8d7;

  --accent: #7ea3ff;       /* azul/morado brillante */
  --accent-2: #7a86ff;
  --ok: #19d18f;
  --warn: #ffd166;
  --bad: #ff6b6b;

  --line: #223055;

  /* Tarjetas KPI */
  --kpi-bg: rgba(36, 46, 72, .55);
  --kpi-ring: linear-gradient(135deg, rgba(126,163,255,.65), rgba(122,134,255,.35), transparent 65%);
}

/* -------- Reset básico -------- */
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(60rem 35rem at -25% 0%, rgba(116,88,255,.17), transparent 60%),
    radial-gradient(60rem 35rem at 120% 10%, rgba(0,194,143,.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* -------- Glass base -------- */
.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* -------- Topbar -------- */
.topbar{
  position: sticky; top: 0; z-index: 1040;
  height: 62px;
  background: linear-gradient(90deg, rgba(126,163,255,.14), rgba(122,134,255,.12));
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
}
.brand-title{ font-weight: 800; letter-spacing:.25px; }
.brand-title span{ color: var(--accent); }
.btn-icon{
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 10px; padding:.4rem .65rem;
}
.btn-icon:hover{ background: rgba(255,255,255,.10); }

/* -------- Layout -------- */
.layout{
  min-height: calc(100vh - 62px);
  display: grid; grid-template-columns: 280px 1fr; gap: 18px;
  padding: 18px;
}
@media (max-width: 991.98px){
  .layout{ grid-template-columns: 1fr; padding: 12px; gap: 12px; }
}

/* -------- Sidebar + off-canvas móvil -------- */
.sidebar{
  display:flex; flex-direction:column;
  padding: 12px 0; border-radius: 16px;
}
.sidebar .list-group-item{
  background: transparent; color: var(--text); border:0;
  margin: 3px 10px; border-radius: 12px;
  display:flex; align-items:center; gap:.65rem; padding:.72rem .9rem;
}
.sidebar .list-group-item:hover{ background: rgba(255,255,255,.06); }
.sidebar .list-group-item.active{
  background: linear-gradient(90deg, rgba(126,163,255,.22), rgba(122,134,255,.12));
  border-left: 3px solid var(--accent);
}
.btn-ghost{
  border:1px solid var(--glass-border); color: var(--text);
  background: rgba(255,255,255,.05);
}
.btn-ghost:hover{ background: rgba(255,255,255,.09); }

/* Offcanvas móvil */
@media (max-width: 991.98px){
  .sidebar{ position: fixed; left: -300px; top: 74px; width: 280px; height: calc(100vh - 86px); z-index: 1045; }
  body.sidebar-open .sidebar{ left: 14px; transition:left .25s ease; }
  .sidebar-backdrop{ position: fixed; inset: 62px 0 0 0; background: rgba(0,0,0,.45); opacity:0; pointer-events:none; }
  body.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; transition:opacity .2s; }
}

/* Handle de sidebar (desktop) */
.sidebar-handle{
  position: fixed;
  left: 280px; top: 50%;
  transform: translateY(-50%);
  z-index: 1042;
  width: 28px; height: 44px;
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  cursor: pointer;
}
.sidebar-handle:hover{ background: rgba(255,255,255,.12); }
@media (max-width: 991.98px){ .sidebar-handle{ display:none; } }
@media (min-width: 992px){
  body.sidebar-collapsed .layout{ grid-template-columns: 88px 1fr; }
  body.sidebar-collapsed .sidebar-handle{ left: 88px; }
  body.sidebar-collapsed .sidebar{ padding-left: 6px; padding-right: 6px; }
  body.sidebar-collapsed .sidebar .list-group-item span:last-child{ display:none; }
  body.sidebar-collapsed .sidebar .px-3.py-3{ display:none; }
}

/* -------- Contenido y tarjetas -------- */
.content{ min-width:0; }
.card{
  border-radius:16px;
  border:1px solid var(--glass-border);
  background: var(--glass-2);
}
.card h5, .section-title{ color: var(--text); }

/* KPIs: más ligeras, número en acento */
.stat{
  position: relative;
  display:flex; align-items:center; gap:.9rem;
  background: var(--kpi-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  padding:1px; background: var(--kpi-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.stat:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.stat .icon{ font-size: 1.35rem; filter: drop-shadow(0 2px 6px rgba(126,163,255,.28)); }
.stat .num{ font-size: 1.85rem; font-weight: 800; letter-spacing:.3px; color: var(--accent); }

/* Reduce “glow” si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .stat, .stat:hover{ transform:none; box-shadow:none; }
}

/* -------- Botones -------- */
.btn{ border-radius: 10px; }
.btn-primary{
  background: linear-gradient(180deg, var(--accent), #587cff);
  border: 0; color: #fff;
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-outline-light{ border-color: var(--glass-border); color: var(--text); }
.btn-outline-light:hover{ background: rgba(255,255,255,.10); }
.btn-warning{ color:#1f1700; }
.btn-success{ color:#06160f; }

/* -------- Tablas (contraste alto) -------- */
.table,
.table thead,
.table tbody,
.table tr,
.table td,
.table th{ background: transparent !important; }
.table > :not(caption) > * > *{
  color: var(--text) !important;
  background-color: transparent !important;
  border-color: var(--line) !important;
}
.table thead{
  background: rgba(255,255,255,.06) !important;
}
.table thead th{ border:0; color: var(--text) !important; }
.table td, .table th{ border-bottom: 1px solid var(--line); vertical-align: middle; }
.badge{ font-weight:700; border-radius:.6rem; }
.badge.bg-secondary{ background:#2d3a5c!important; }

/* Hover sutil en “Por vencer” */
#soon tr{ transition: background-color .15s ease; }
#soon tr:hover{ background-color: rgba(126,163,255,.08); }

/* -------- Modo “tabla → cards” en móvil -------- */
@media (max-width: 767.98px){
  .table-responsive{ border:0; }
  table.table{ display:block; }
  table.table thead{ display:none; }
  table.table tbody{ display:block; }
  table.table tr{
    display:block; border:1px solid var(--glass-border);
    border-radius:12px; margin-bottom:.9rem; background: var(--glass-2);
  }
  table.table td{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; padding:.7rem .95rem; border:0 !important;
    border-bottom:1px solid var(--glass-border) !important;
  }
  table.table td:last-child{ border-bottom:0 !important; }
  table.table td::before{ content: attr(data-label); color: var(--muted); font-size:.9rem; }
  .table .text-end{ justify-content:flex-end; }

  /* Rótulos por tabla */
  #tblSub td:nth-child(1)::before{ content:"Cliente"; }
  #tblSub td:nth-child(2)::before{ content:"Producto"; }
  #tblSub td:nth-child(3)::before{ content:"Vence"; }
  #tblSub td:nth-child(4)::before{ content:"Monto"; }
  #tblSub td:nth-child(5)::before{ content:"Estado"; }
  #tblSub td:nth-child(6)::before{ content:"Acciones"; }

  #tblClientes td:nth-child(1)::before{ content:"Nombre"; }
  #tblClientes td:nth-child(2)::before{ content:"WhatsApp"; }
  #tblClientes td:nth-child(3)::before{ content:"Email"; }
  #tblClientes td:nth-child(4)::before{ content:"Empresa"; }
  #tblClientes td:nth-child(5)::before{ content:"País"; }
  #tblClientes td:nth-child(6)::before{ content:"Acciones"; }

  #tblProd td:nth-child(1)::before{ content:"Título"; }
  #tblProd td:nth-child(2)::before{ content:"Precio"; }
  #tblProd td:nth-child(3)::before{ content:"Descripción"; }
  #tblProd td:nth-child(4)::before{ content:"Acciones"; }
}

/* -------- Formularios oscuros -------- */
.form-control, .form-select, .input-group-text{
  background: rgba(8,12,24,.70) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass-border) !important;
}
.form-control::placeholder{ color: #b7c5e6 !important; opacity:.95; }
.form-control:focus, .form-select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 .18rem rgba(126,163,255,.14);
}
.input-group-text{ color: var(--muted); }

/* -------- Login -------- */
.login-bg{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-wrap{ width:100%; max-width: 560px; padding: 20px; }
.login-card{ padding: 28px; text-align:left; }
.login-card .logo-circle{
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(126,163,255,.35), rgba(122,134,255,.25));
  border: 1px solid var(--glass-border);
}
.login-card h2 span{ color: var(--accent); }
.eye{
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
}

/* -------- Modals (100% dark) -------- */
.modal-content{
  background: rgba(18,23,40,.92) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-header, .modal-footer{
  border-color: var(--glass-border) !important;
  background: transparent !important;
  color: var(--text) !important;
}
.modal-title{ color: var(--text) !important; font-weight: 800; }
.modal-content .form-label{ color: var(--text) !important; }
.modal-backdrop.show{ background: rgba(0,0,0,.6); }
.btn-close{ filter: invert(1) grayscale(1) contrast(200%) !important; opacity:.8 !important; }

/* Cajas internas del modal: legibles */
.modal-content .card,
.modal-content .border,
.modal-content .rounded{
  background: rgba(32,43,70,.45) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}
.modal-content .text-secondary,
.modal-content .text-muted,
.modal-content small{ color: #d7e2ff !important; }

/* -------- Utilidades -------- */
.list-group-item{ color: var(--text) !important; }
/* Reducimos blur en tarjetas grandes; mantenemos glass solo donde aporta */
.card{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Sombra más suave para menos repaints */
.card, .stat{ box-shadow: 0 8px 20px rgba(0,0,0,.28); }

/* Hint de composición GPU para transform/hover */
.sidebar, .card, .stat { will-change: transform; }

/* Si el usuario prefiere menos movimiento, quita transiciones */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}
/* Picker visible en inputs de fecha en tema oscuro */
input[type="date"]{
  color-scheme: dark; /* forcita controles del navegador en dark si soporta */
}

/* Icono del calendario legible sobre fondo oscuro (Chromium/WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) contrast(120%);
  opacity: .9;
  cursor: pointer;
}
/* Forzar date-picker visible en tema oscuro */
.form-control[type="date"] {
  color-scheme: dark;          /* pide UI nativa oscura */
  color: #e9eef7;              /* texto claro */
}
.form-control[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: .9;
  cursor: pointer;
}
.form-control[type="date"]::-webkit-datetime-edit {
  color: #e9eef7;
}
.form-control[type="date"] { color-scheme: dark; color:#e9eef7; }
.form-control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); opacity:.9; cursor:pointer; }
.form-control[type="date"]::-webkit-datetime-edit { color:#e9eef7; }
/* ===== Login brand ===== */
.brand{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
}

.logo-circle{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.logo-circle img{
  width:34px; height:34px; object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.brand-txt .display-6 span{
  background: linear-gradient(135deg, #8bb5ff, #78ffe9 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-txt .text-secondary{ color: var(--muted-2); }

/* Pulido general del card para que no “cante” blanco */
.login-card.glass{
  background: rgba(18,22,30,.6);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  color: #eef2f7;
}
.login-card .form-control,
.login-card .form-select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.09);
  color: #eef2f7;
}
.login-card .form-control::placeholder{ color: #a7b3c7; }
.login-card .btn{ box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* Layout del sidebar */
.sidebar{
  display:flex;
  flex-direction:column;
  height: calc(100vh - 62px);   /* evita que la página haga scroll para ver “Cerrar” */
}

/* la zona scrolleable del menú */
.sidebar .list-wrap{
  flex:1 1 auto; overflow-y:auto; padding-bottom:12px;
}

/* fija el logout abajo y sin “saltos” */
.sidebar .logout-area{ margin-top:auto; padding:12px; }
.sidebar .logout-area .btn{ width:100%; transform:none !important; }
.sidebar .logout-area .btn:hover{ transform:none !important; }

/* En colapso solo se muestran los iconos; se ocultan textos */
body.sidebar-collapsed .sidebar .list-group-item .txt{ display:none; }
body.sidebar-collapsed .sidebar .logout-area .label{ display:none; }

/* Opcional: centra los iconos en colapso */
@media (min-width: 992px){
  body.sidebar-collapsed .sidebar .list-group-item{ justify-content:center; }
}
/* ==== Footer “Powered by” fijo ==== */
.app-footer{
  position: fixed;
  left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-size: .86rem;
  color: var(--muted);
  z-index: 1050;
  pointer-events: auto;
}
.app-footer a{
  color: var(--accent);
  text-decoration: none;
}
.app-footer a:hover{ text-decoration: underline; }
.app-footer .muted{ color: var(--muted); }

/* Logo opcional en el footer */
.footer-logo{
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Un poco más compacto en móviles */
@media (max-width: 575.98px){
  .app-footer{ font-size: .8rem; bottom: 8px; padding: 0 8px; }
}

/* Ocultar en impresión */
@media print{
  .app-footer{ display: none; }
}

/* =========================================================
   ====== Barra inferior (móvil) + Quick Menu (nuevo) ======
   ========================================================= */

/* Ocultar totalmente el sidebar en móvil; navegaremos por la barra inferior */
@media (max-width: 991.98px){
  .sidebar, .sidebar-backdrop, .sidebar-handle{ display:none !important; }
  .layout{ padding-bottom: 0; } /* compacta un poco el layout */
}

/* ======= Bottom Nav (móvil) ======= */
:root{
  --bn-h: 64px;
  --bn-bg: rgba(18, 22, 37, .86);
  --bn-border: rgba(255,255,255,.10);
}
@media (max-width: 991.98px){
  .content{ padding-bottom: calc(var(--bn-h) + 16px); }
  .app-footer{ bottom: calc(var(--bn-h) + 8px); }
}
.bottom-nav{
  position: fixed; left:0; right:0; bottom:0; z-index:1055;
  height: var(--bn-h);
  display:grid; grid-template-columns: repeat(3,1fr); align-items:center;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: var(--bn-bg);
  border-top: 1px solid var(--bn-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bottom-nav .tab{
  display:grid; place-content:center; gap:4px;
  border:0; background:transparent; color:var(--text);
  font-size:12px; line-height:1; text-decoration:none; border-radius:12px;
}
.bottom-nav .tab .ico{ font-size:18px; display:block; text-align:center; }
.bottom-nav .tab:active{ background: rgba(255,255,255,.08); }
.bottom-nav .tab.active{ box-shadow: inset 0 0 0 1px var(--bn-border); }
.bottom-nav .tab.active .lbl{ color: var(--accent); font-weight:700; }

/* ======= Quick Menu (bottom sheet) ======= */
.quickmenu{ position: fixed; inset:0; z-index:1056; display:none; }
.quickmenu.open{ display:block; }
.qm-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.qm-sheet{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  animation: qm-in .18s ease forwards;
  background: var(--glass-2) !important;
}
@keyframes qm-in{ to{ transform: translateY(0); } }

.qm-handle{
  width: 42px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.25); margin: 4px auto 10px;
}

.qm-sheet .grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:10px;
}
.qm-item{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,.05);
  color: var(--text); padding:10px 12px; border-radius:12px;
}
.qm-item span{ font-weight:600; }
.qm-item:active{ background: rgba(255,255,255,.10); }

/* Tarjeta de WhatsApp */
.whatsapp-card {
  background: #1e1e2f;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.whatsapp-card h3 {
  margin-bottom: 10px;
  color: #25d366; /* Verde WhatsApp */
}

.whatsapp-card p {
  margin: 5px 0;
}

.whatsapp-card span {
  font-weight: bold;
}

/* ===== Módulo: Mensajes Masivos (forzar texto blanco) ===== */
/* Se activa cuando la vista tiene el textarea #b_msg */
#app:has(#m_msg) { color: #fff !important; }

#app:has(#m_msg) .card,
#app:has(#m_msg) .form-label,
#app:has(#m_msg) .form-text,
#app:has(#m_msg) .text-secondary,
#app:has(#m_msg) .text-muted,
#app:has(#m_msg) small,
#app:has(#m_msg) .btn,
#app:has(#m_msg) .progress,
#app:has(#m_msg) .progress-bar,
#app:has(#m_msg) select,
#app:has(#m_msg) textarea,
#app:has(#m_msg) input {
  color: #fff !important;
}

/* Por si alguna lib aplica opacidades grises */
#app:has(#m_msg) .text-secondary,
#app:has(#m_msg) .text-muted,
#app:has(#m_msg) .form-text { opacity: 1 !important; }