/* =========================================================================
   Trunk System - Tema oscuro "tactical" (panel Recargas + panelPagos)
   -------------------------------------------------------------------------
   Capa de skin sobre Bootstrap 5.3. NO cambia markup ni JS: se carga con
   <link> despues del CSS de Bootstrap y con <html data-bs-theme="dark">.
   Basado en el tema de referencia (dark #111317 + acento lima #a3e635,
   Plus Jakarta Sans + JetBrains Mono para numeros).

   Origen: AI/stitch-mockups/ + AI/Stitch - integracion diseno frontend.md
   ========================================================================= */

/* ---- Fuentes ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---- Tokens de color (paleta Trunk / Vortex) ------------------------- */
:root,
[data-bs-theme="dark"] {
  --ts-bg:            #111317;
  --ts-surface-0:     #0c0e12;   /* nav, barras, superficie mas baja      */
  --ts-surface-1:     #1a1c20;   /* cards                                  */
  --ts-surface-2:     #1e2024;   /* card anidada, inputs, hover de fila    */
  --ts-surface-3:     #282a2e;   /* hover / overlay                        */
  --ts-border:        #2b3030;
  --ts-border-soft:   rgba(255,255,255,.07);

  --ts-lime:          #a3e635;
  --ts-lime-bright:   #ccff80;
  --ts-lime-ink:      #16250a;   /* texto sobre fondo lima                 */
  --ts-cyan:          #4cd7f6;
  --ts-amber:         #f59e0b;
  --ts-red:           #ff6b66;

  --ts-text:          #e4e6ea;
  --ts-text-muted:    #b7beb0;
  --ts-text-faint:    #8c947c;

  --ts-glow-lime:     0 0 16px rgba(163,230,53,.28);

  /* --- Remapeo de variables de Bootstrap 5.3 --- */
  --bs-body-bg:            var(--ts-bg);
  --bs-body-color:         var(--ts-text);
  --bs-emphasis-color:     #ffffff;
  --bs-secondary-color:    var(--ts-text-muted);
  --bs-tertiary-color:     var(--ts-text-faint);
  --bs-tertiary-bg:        var(--ts-surface-2);
  --bs-border-color:       var(--ts-border);
  --bs-border-color-translucent: var(--ts-border-soft);
  --bs-border-radius:      .6rem;
  --bs-border-radius-sm:   .4rem;
  --bs-border-radius-lg:   .9rem;

  --bs-primary:           var(--ts-lime);
  --bs-primary-rgb:       163,230,53;
  --bs-link-color:        var(--ts-lime-bright);
  --bs-link-color-rgb:    204,255,128;
  --bs-link-hover-color:  #e5ffb0;

  --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bs-card-bg:           var(--ts-surface-1);
  --bs-card-border-color: var(--ts-border);
  --bs-card-cap-bg:       var(--ts-surface-0);

  --bs-tertiary-bg-rgb:   30,32,36;
  --bs-secondary-bg:      var(--ts-surface-2);

  --bs-dropdown-bg:            var(--ts-surface-2);
  --bs-dropdown-border-color:  var(--ts-border);
  --bs-dropdown-link-color:    var(--ts-text);
  --bs-dropdown-link-hover-bg: var(--ts-surface-3);
  --bs-dropdown-link-active-bg: var(--ts-lime);
  --bs-dropdown-link-active-color: var(--ts-lime-ink);

  --bs-modal-bg:          var(--ts-surface-1);
  --bs-modal-border-color: var(--ts-border);

  --bs-table-bg:          transparent;
  --bs-table-color:       var(--ts-text);
  --bs-table-border-color: var(--ts-border);
  --bs-table-striped-bg:  rgba(255,255,255,.02);
  --bs-table-hover-bg:    var(--ts-surface-2);
}

/* ---- Base ----------------------------------------------------------- */
/* !important: casi todas las vistas traen un <style> inline con
   `body{background:#f8f9fa}` que se carga DESPUES de este archivo. */
html { background-color: var(--ts-bg) !important; }
body {
  background-color: var(--ts-bg) !important;
  color: var(--ts-text);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.fw-bold,.fw-semibold { letter-spacing: -.01em; }

/* Numeros / codigos / montos: monoespaciado como el tema de referencia.
   Se aplica a celdas de tabla, <code>, y a lo que se marque .ts-num */
table.table td, .ts-num, code, kbd, .font-monospace,
.badge-activa, .badge-inactiva {
  font-variant-numeric: tabular-nums;
}
.ts-num, code, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background-color: var(--ts-surface-1);
  border: 1px solid var(--ts-border);
  border-radius: .9rem;
}
.card.shadow-sm, .shadow-sm { box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 2px 12px rgba(0,0,0,.35) !important; }
.card-header { background-color: var(--ts-surface-0); border-bottom-color: var(--ts-border); }

/* ---- Botones ---------------------------------------------------------- */
.btn { border-radius: .5rem; font-weight: 600; }

.btn-primary, .btn-warning, .btn-success {
  --bs-btn-bg: var(--ts-lime);
  --bs-btn-border-color: var(--ts-lime);
  --bs-btn-color: var(--ts-lime-ink);
  --bs-btn-hover-bg: var(--ts-lime-bright);
  --bs-btn-hover-border-color: var(--ts-lime-bright);
  --bs-btn-hover-color: var(--ts-lime-ink);
  --bs-btn-active-bg: var(--ts-lime-bright);
  --bs-btn-active-border-color: var(--ts-lime-bright);
  --bs-btn-active-color: var(--ts-lime-ink);
  --bs-btn-disabled-bg: var(--ts-lime);
  --bs-btn-disabled-border-color: var(--ts-lime);
  --bs-btn-disabled-color: var(--ts-lime-ink);
}
.btn-primary:hover, .btn-warning:hover, .btn-success:hover { box-shadow: var(--ts-glow-lime); }

.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
  --bs-btn-color: var(--ts-text);
  --bs-btn-border-color: var(--ts-border);
  --bs-btn-bg: var(--ts-surface-2);
  --bs-btn-hover-bg: var(--ts-surface-3);
  --bs-btn-hover-border-color: var(--ts-text-faint);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ts-surface-3);
  --bs-btn-active-color: #fff;
}
.btn-danger, .btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--ts-red);
  --bs-btn-border-color: rgba(255,107,102,.4);
  --bs-btn-hover-bg: rgba(255,107,102,.12);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--ts-red);
}
.btn-secondary {
  --bs-btn-bg: var(--ts-surface-2);
  --bs-btn-border-color: var(--ts-border);
  --bs-btn-color: var(--ts-text);
  --bs-btn-hover-bg: var(--ts-surface-3);
  --bs-btn-hover-color: #fff;
}
.btn-link { color: var(--ts-lime-bright); }

/* ---- Formularios ---------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--ts-surface-0);
  border-color: var(--ts-border);
  color: var(--ts-text);
}
.form-control::placeholder { color: var(--ts-text-faint); }
.form-control:focus, .form-select:focus {
  background-color: var(--ts-surface-0);
  border-color: var(--ts-lime);
  color: var(--ts-text);
  box-shadow: 0 0 0 .18rem rgba(163,230,53,.22);
}
.form-check-input { background-color: var(--ts-surface-2); border-color: var(--ts-border); }
.form-check-input:checked { background-color: var(--ts-lime); border-color: var(--ts-lime); }
.form-check-input:focus { border-color: var(--ts-lime); box-shadow: 0 0 0 .18rem rgba(163,230,53,.22); }
.input-group-text { background-color: var(--ts-surface-2); border-color: var(--ts-border); color: var(--ts-text-muted); }
.form-label { color: var(--ts-text-muted); font-weight: 600; }

/* ---- Tablas -------------------------------------------------------- */
.table { --bs-table-color: var(--ts-text); border-color: var(--ts-border); }
.table > :not(caption) > * > * { border-color: var(--ts-border); }
.table thead th, .table > thead, thead.table-dark th, .table-dark th {
  background-color: var(--ts-surface-0) !important;
  color: var(--ts-text-faint) !important;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  border-color: var(--ts-border) !important;
}
.table-dark, .table .table-dark, thead.table-dark {
  --bs-table-bg: var(--ts-surface-0);
  --bs-table-color: var(--ts-text-faint);
  --bs-table-border-color: var(--ts-border);
}
.table-hover > tbody > tr:hover > * { background-color: var(--ts-surface-2); color: #fff; }
.table-bordered > :not(caption) > * { border-color: var(--ts-border); }

/* ---- Badges ------------------------------------------------------- */
.badge { font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: .35em .7em; }
.badge.bg-success, .badge-activa { background-color: rgba(163,230,53,.14) !important; color: var(--ts-lime) !important; border: 1px solid rgba(163,230,53,.28); }
.badge.bg-secondary, .badge-inactiva { background-color: var(--ts-surface-3) !important; color: var(--ts-text-muted) !important; border: 1px solid var(--ts-border); }
.badge.bg-warning { background-color: rgba(245,158,11,.15) !important; color: var(--ts-amber) !important; border: 1px solid rgba(245,158,11,.3); }
.badge.bg-danger  { background-color: rgba(255,107,102,.14) !important; color: var(--ts-red) !important; border: 1px solid rgba(255,107,102,.3); }
.badge.bg-primary { background-color: rgba(163,230,53,.14) !important; color: var(--ts-lime) !important; border: 1px solid rgba(163,230,53,.28); }
.badge.bg-info    { background-color: rgba(76,215,246,.14) !important; color: var(--ts-cyan) !important; border: 1px solid rgba(76,215,246,.3); }

/* ---- Alerts ------------------------------------------------------ */
.alert { border-radius: .6rem; border-width: 1px; }
.alert-success { background-color: rgba(163,230,53,.10); border-color: rgba(163,230,53,.3); color: var(--ts-lime-bright); }
.alert-danger  { background-color: rgba(255,107,102,.10); border-color: rgba(255,107,102,.3); color: #ffc9c6; }
.alert-warning { background-color: rgba(245,158,11,.10); border-color: rgba(245,158,11,.3); color: #ffd79a; }
.alert-info    { background-color: rgba(76,215,246,.10); border-color: rgba(76,215,246,.3); color: #b8ecfa; }

/* ---- Navbar (includes/nav.php) --------------------------------------- */
.navbar.cp-nav, .cp-nav {
  background-color: var(--ts-surface-0) !important;
  border-bottom: 1px solid var(--ts-border);
}
.cp-nav .navbar-brand { color: var(--ts-text) !important; font-weight: 800; letter-spacing: .2px; }
.cp-nav .navbar-brand .text-warning { color: var(--ts-lime) !important; }
.cp-nav .nav-link { color: var(--ts-text-muted) !important; border-radius: 999px; padding: .5rem .9rem; }
.cp-nav .nav-link:hover { color: #fff !important; background: var(--ts-surface-2); }
.cp-nav .nav-link.active {
  color: var(--ts-lime-ink) !important;
  background: var(--ts-lime) !important;
  font-weight: 700;
  box-shadow: var(--ts-glow-lime);
}
.cp-nav .dropdown-menu {
  background-color: var(--ts-surface-2);
  border: 1px solid var(--ts-border);
  box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.55);
}
.cp-nav .dropdown-item { color: var(--ts-text); }
.cp-nav .dropdown-item:hover { background: var(--ts-surface-3); color: #fff; }
.cp-nav .dropdown-item.active, .cp-nav .dropdown-item:active { background: var(--ts-lime); color: var(--ts-lime-ink); }
.cp-nav .dropdown-divider { border-color: var(--ts-border); }

/* ---- Login (recargas_new/login.php) --------------------------------- */
body .brand, .brand {
  color: var(--ts-lime) !important;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---- Paginacion / tabs / list-group --------------------------------- */
.page-link { background: var(--ts-surface-2); border-color: var(--ts-border); color: var(--ts-text-muted); }
.page-item.active .page-link { background: var(--ts-lime); border-color: var(--ts-lime); color: var(--ts-lime-ink); }
.nav-tabs { border-bottom-color: var(--ts-border); }
.nav-tabs .nav-link { color: var(--ts-text-muted); }
.nav-tabs .nav-link.active { background: var(--ts-surface-1); border-color: var(--ts-border) var(--ts-border) var(--ts-surface-1); color: var(--ts-lime-bright); }
.list-group-item { background: var(--ts-surface-1); border-color: var(--ts-border); color: var(--ts-text); }

/* ---- Utilidades de texto de Bootstrap que quedan ilegibles ---------- */
.text-muted { color: var(--ts-text-faint) !important; }
.text-dark  { color: var(--ts-text) !important; }
.text-warning { color: var(--ts-amber) !important; }
.text-success { color: var(--ts-lime) !important; }
.bg-light   { background-color: var(--ts-surface-2) !important; color: var(--ts-text) !important; }
.bg-white   { background-color: var(--ts-surface-1) !important; }
.border     { border-color: var(--ts-border) !important; }
hr { border-color: var(--ts-border); opacity: 1; }

/* ---- Overrides puntuales de estilos inline claros de las vistas ----- */
/* Muchas vistas traen su propio <style> (carga DESPUES de este archivo)
   con thead.table-light, bg-white, dropdowns #fff, hovers #eef4fb, etc. */
.table-light, .table > thead.table-light, tr.table-light,
.table-light > th, .table-light > td,
thead.table-light th, tr.table-light th, tr.table-light td {
  background-color: var(--ts-surface-0) !important;
  color: var(--ts-text-faint) !important;
  border-color: var(--ts-border) !important;
}
.bg-white, .card-footer.bg-white, .card-header.bg-white {
  background-color: var(--ts-surface-1) !important;
  color: var(--ts-text) !important;
}
.bg-white.border-bottom, .border-bottom.bg-white { border-color: var(--ts-border) !important; }

tr.row-link { cursor: pointer; }
tr.row-link:hover, tr.row-link:hover > * { background-color: var(--ts-surface-2) !important; color: #fff; }

/* Autocomplete / combo dropdowns (yeastar_checkout, yeastar_clientes) */
.yc-combo-list, .combo-list, .autocomplete-list, .dropdown-list {
  background: var(--ts-surface-2) !important;
  border-color: var(--ts-border) !important;
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.5) !important;
  color: var(--ts-text) !important;
}
.yc-combo-list > *:hover, .combo-list > *:hover { background: var(--ts-surface-3) !important; }

/* did_costos.php: filas de breakdown */
.breakdown-row { background: var(--ts-surface-1) !important; border-bottom-color: var(--ts-border) !important; color: var(--ts-text) !important; }
.breakdown-row.activo { background: rgba(163,230,53,.10) !important; color: var(--ts-lime-bright) !important; }
.breakdown-toggle, .breakdown-cell { background: var(--ts-surface-1) !important; }

/* reportes.php: lista de usuarios + inputs propios */
.user-list { background: var(--ts-surface-0) !important; border-color: var(--ts-border) !important; }
.user-list .list-group-item, .user-list label { background: transparent !important; color: var(--ts-text) !important; }

/* contactos_notificacion_admin.php: fila sin contacto (aviso suave) */
/* 15-sep: el wash de fondo ambar-10% sobre superficie oscura se veia
   "cafe"/sucio (hallazgo real del cliente, contactos_notificacion_admin.php)
   - reemplazado por un acento de borde izquierdo, mismo lenguaje visual
   que los kpi-card con border-left de troncales.php/panelPagos. Mucho mas
   legible en dark theme, no ensucia el fondo de la fila. */
.fila-sin-contacto { border-left: 3px solid var(--ts-amber) !important; background: transparent !important; }
.fila-sin-contacto > * { background: transparent !important; }

/* did_costos.php mobile card view */
.breakdown-card, .mobile-card { background: var(--ts-surface-1) !important; border-color: var(--ts-border) !important; color: var(--ts-text) !important; }

/* panelPagos: chip de usuario (era pill blanca con texto gris invisible) */
.user-chip { background: var(--ts-surface-2) !important; border-color: var(--ts-border) !important; }
.user-chip .btn, .user-chip .dropdown-toggle, .user-chip .btn:hover, .user-chip .btn:focus {
  color: var(--ts-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* panelPagos: etiquetas de las tablas apiladas en mobile (td::before gris) */
#tablaHistorial td::before, #tablaItems td::before { color: var(--ts-text-faint) !important; }

/* ---- Turnstile (captcha) responsive ------------------------------- */
/* El widget flexible tiene un min de ~300px. En cards de login con
   padding, en pantallas < 360-380px se desborda. */
.cf-turnstile { width: 100%; max-width: 100%; }
.cf-turnstile iframe { max-width: 100% !important; width: 100% !important; }
/* red de seguridad: que un par de px de más nunca empujen la página */
.card-login, .card-clave, form.card-body, .card > form { overflow-x: clip; }

@media (max-width: 400px) {
  /* menos padding lateral para darle los 300px al widget */
  form.card-body,
  .card-login > .card-body,
  .card-clave > .card-body { padding-left: .55rem !important; padding-right: .55rem !important; }
  .container.px-3 { padding-left: .45rem !important; padding-right: .45rem !important; }
  /* deja que el widget sangre ~8px a cada lado del contenido con padding */
  .cf-turnstile { margin-left: -.4rem; margin-right: -.4rem; }
}
@media (max-width: 330px) {
  /* último recurso en teléfonos muy angostos: escalar el widget */
  .cf-turnstile { transform: scale(.9); transform-origin: top left; height: 60px; overflow: hidden; }
}

/* ---- Scrollbar ---------------------------------------------------- */
* { scrollbar-color: var(--ts-surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ts-surface-3); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }