/* ============================================================
   CuentasFT — Variables de tema + overrides Bootstrap 5
   Identidad: ROJO · NEGRO · BLANCO
   ============================================================ */

/* ------------------------------------------------------------
   VELOCIDAD DE INTERACCIÓN
   - Elimina el delay táctil de 300ms en todos los elementos
   - Transiciones suaves entre páginas (Chrome 111+)
   ------------------------------------------------------------ */
*, *::before, *::after { touch-action: manipulation; }

/* Transición de entrada entre páginas (View Transitions API) */
@view-transition { navigation: auto; }

@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
::view-transition-new(root) {
  animation: vt-fade-in 180ms ease both;
}
::view-transition-old(root) {
  animation: vt-fade-in 180ms ease both reverse;
}

/* ------------------------------------------------------------
   VARIABLES — TEMA OSCURO (default)
   ------------------------------------------------------------ */
:root {
  --bg0:    #111111;
  --bg1:    #1a1a1a;
  --bg2:    #242424;
  --bg3:    #2e2e2e;
  --border: #333333;
  --text1:  #ffffff;
  --text2:  #aaaaaa;
  --text3:  #555555;
  --red:    #e53e3e;
  --green:  #16a34a;
  --amber:  #d97706;

  /* Bootstrap custom properties */
  --bs-body-bg:           var(--bg0);
  --bs-body-color:        var(--text1);
  --bs-border-color:      var(--border);
  --bs-card-bg:           var(--bg1);
  --bs-secondary-bg:      var(--bg2);
  --bs-tertiary-bg:       var(--bg3);
  --bs-emphasis-color:    var(--text1);
  --bs-secondary-color:   var(--text2);
  --bs-link-color:        var(--red);
  --bs-link-hover-color:  #ff6b6b;
}

/* ------------------------------------------------------------
   VARIABLES — TEMA CLARO
   ------------------------------------------------------------ */
body.light-mode {
  --bg0:    #f5f5f5;
  --bg1:    #ffffff;
  --bg2:    #f0f0f0;
  --bg3:    #e4e4e4;
  --border: #dddddd;
  --text1:  #111111;
  --text2:  #555555;
  --text3:  #999999;
  --red:    #dc2626;
  --green:  #15803d;
  --amber:  #b45309;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg0);
  color:            var(--text1);
  font-family:      'Inter', system-ui, -apple-system, sans-serif;
  transition:       background-color .2s ease, color .2s ease;
  min-height:       100vh;
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.card {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    12px;
}

.card-header {
  background-color: var(--bg2);
  border-bottom:    1px solid var(--border);
  color:            var(--text1);
}

.card-footer {
  background-color: var(--bg2);
  border-top:       1px solid var(--border);
}

/* ------------------------------------------------------------
   INPUTS Y FORMULARIOS
   ------------------------------------------------------------ */
.form-control,
.form-select {
  background-color: var(--bg2);
  border:           1px solid var(--border);
  color:            var(--text1);
  border-radius:    8px;
  transition:       border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg2);
  border-color:     var(--red);
  color:            var(--text1);
  box-shadow:       0 0 0 3px rgba(229, 62, 62, .2);
}

.form-control::placeholder { color: var(--text3); }

.form-label {
  color:       var(--text2);
  font-size:   .875rem;
  font-weight: 500;
  margin-bottom: .35rem;
}

.input-group-text {
  background-color: var(--bg3);
  border:           1px solid var(--border);
  color:            var(--text2);
}

/* Campo de monto — prefijo "$" destacado */
.input-group .currency-prefix {
  background-color: var(--bg3);
  border:           1px solid var(--border);
  border-right:     none;
  color:            var(--text1);
  font-weight:      600;
  padding:          0 14px;
  display:          flex;
  align-items:      center;
  border-radius:    8px 0 0 8px;
  font-size:        1rem;
}

.input-group .currency-prefix + .form-control {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */
.btn {
  border-radius: 8px;
  font-weight:   600;
  font-size:     .9rem;
  transition:    background-color .15s ease, transform .1s ease, box-shadow .15s ease;
  min-height:    52px;
  padding:       0 20px;
}

.btn:active { transform: scale(.97); }

/* Primario — ROJO (acción principal: cargar deuda) */
.btn-primary,
.btn-danger {
  background-color: var(--red);
  border-color:     var(--red);
  color:            #fff;
}
.btn-primary:hover,
.btn-danger:hover {
  background-color: #c53030;
  border-color:     #c53030;
  color:            #fff;
}

/* Éxito — VERDE (asentar pago) */
.btn-success {
  background-color: var(--green);
  border-color:     var(--green);
  color:            #fff;
}
.btn-success:hover {
  background-color: #15803d;
  border-color:     #15803d;
  color:            #fff;
}

/* Secundario / neutral */
.btn-secondary {
  background-color: var(--bg3);
  border-color:     var(--border);
  color:            var(--text2);
}
.btn-secondary:hover {
  background-color: var(--border);
  border-color:     var(--border);
  color:            var(--text1);
}

/* Outline rojo */
.btn-outline-danger {
  border-color: var(--red);
  color:        var(--red);
}
.btn-outline-danger:hover {
  background-color: var(--red);
  color:            #fff;
}

/* Botón grande (para acciones principales en móvil) */
.btn-xl {
  min-height: 60px;
  font-size:  1rem;
  padding:    0 28px;
}

/* ------------------------------------------------------------
   TABLAS
   ------------------------------------------------------------ */
.table {
  color:         var(--text1);
  border-color:  var(--border);
}

.table > thead > tr > th {
  background-color: var(--bg2);
  color:            var(--text2);
  font-size:        .78rem;
  text-transform:   uppercase;
  letter-spacing:   .05em;
  border-bottom:    2px solid var(--border);
  font-weight:      600;
}

.table > tbody > tr > td {
  border-color:     var(--border);
  vertical-align:   middle;
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--bg3);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(255,255,255,.02);
}

body.light-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(0,0,0,.02);
}

/* ------------------------------------------------------------
   BADGES DE ESTADO DE CUENTA
   ------------------------------------------------------------ */
.badge-estado {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 10px;
  border-radius: 20px;
  font-size:     .78rem;
  font-weight:   600;
  line-height:   1;
}

.badge-al-dia {
  background-color: rgba(22, 163, 74, .15);
  color:            var(--green);
  border:           1px solid rgba(22, 163, 74, .3);
}

.badge-alerta {
  background-color: rgba(217, 119, 6, .15);
  color:            var(--amber);
  border:           1px solid rgba(217, 119, 6, .3);
}

.badge-vencida {
  background-color: rgba(229, 62, 62, .15);
  color:            var(--red);
  border:           1px solid rgba(229, 62, 62, .3);
}

/* ------------------------------------------------------------
   NAVEGACIÓN / HEADER
   ------------------------------------------------------------ */
.navbar {
  background-color: var(--bg1);
  border-bottom:    1px solid var(--border);
  padding:          .6rem 1rem;
}

.navbar-brand {
  color:       var(--text1) !important;
  font-weight: 700;
  font-size:   1.15rem;
}

.navbar-brand span {
  color: var(--red);
}

.nav-link {
  color:       var(--text2) !important;
  font-weight: 500;
  border-radius: 6px;
  padding:     .4rem .75rem !important;
  transition:  background-color .15s ease, color .15s ease;
}

.nav-link:hover,
.nav-link.active {
  background-color: var(--bg3);
  color:            var(--text1) !important;
}

.nav-link.active {
  color: var(--red) !important;
}

/* Botón toggle tema */
#themeToggle {
  background:    none;
  border:        1px solid var(--border);
  color:         var(--text2);
  border-radius: 8px;
  padding:       6px 12px;
  font-size:     .85rem;
  display:       flex;
  align-items:   center;
  gap:           6px;
  cursor:        pointer;
  transition:    border-color .15s ease, color .15s ease;
}

#themeToggle:hover {
  border-color: var(--text2);
  color:        var(--text1);
}

/* Badge de notificaciones */
#notifBadge {
  background-color: var(--red);
  color:            #fff;
  border-radius:    10px;
  font-size:        .7rem;
  font-weight:      700;
  padding:          2px 6px;
  min-width:        18px;
  text-align:       center;
  display:          none;
}

/* Botón silenciar notificaciones */
#muteNotifBtn {
  background:    none;
  border:        1px solid var(--border);
  color:         var(--text2);
  border-radius: 8px;
  padding:       6px 12px;
  font-size:     .85rem;
  display:       flex;
  align-items:   center;
  gap:           6px;
  cursor:        pointer;
  transition:    color .15s ease, border-color .15s ease;
}

#muteNotifBtn:hover {
  border-color: var(--text2);
  color:        var(--text1);
}

/* Banner "notificaciones silenciadas" */
.notif-mute-banner {
  background-color: rgba(229, 62, 62, .1);
  border:           1px solid rgba(229, 62, 62, .25);
  border-radius:    8px;
  color:            var(--red);
  font-size:        .82rem;
  padding:          6px 14px;
  text-align:       center;
  display:          none;
}

.notif-mute-banner.visible { display: block; }

/* ------------------------------------------------------------
   SIDEBAR (panel admin)
   ------------------------------------------------------------ */
.sidebar {
  background-color: var(--bg1);
  border-right:     1px solid var(--border);
  min-height:       calc(100vh - 56px);
  padding:          1rem .75rem;
  width:            220px;
  flex-shrink:      0;
}

.sidebar .nav-link {
  margin-bottom: 2px;
}

.sidebar-section {
  color:         var(--text3);
  font-size:     .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight:   600;
  padding:       .6rem .75rem .25rem;
}

/* ------------------------------------------------------------
   TARJETAS MÉTRICAS (dashboard admin)
   ------------------------------------------------------------ */
.metric-card {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    12px;
  padding:          1.25rem;
}

.metric-card .metric-value {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--text1);
  line-height: 1.1;
}

.metric-card .metric-label {
  font-size:   .8rem;
  color:       var(--text2);
  margin-top:  .25rem;
}

.metric-card .metric-icon {
  font-size:      1.5rem;
  width:          44px;
  height:         44px;
  border-radius:  10px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

.metric-icon-red   { background-color: rgba(229, 62, 62, .15); color: var(--red);   }
.metric-icon-green { background-color: rgba(22, 163, 74, .15); color: var(--green); }
.metric-icon-amber { background-color: rgba(217, 119, 6, .15); color: var(--amber); }

/* ------------------------------------------------------------
   BLOQUE CUENTA CLIENTE (vendedor)
   ------------------------------------------------------------ */
.cuenta-header {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    12px;
  padding:          1.25rem;
}

.cuenta-saldo {
  font-size:   2rem;
  font-weight: 700;
  color:       var(--red);
}

.cuenta-saldo.saldo-cero { color: var(--green); }

/* Bloqueo visual cuenta vencida */
.cuenta-bloqueada {
  border-color: var(--red) !important;
  box-shadow:   0 0 0 2px rgba(229, 62, 62, .25);
}

/* ------------------------------------------------------------
   RESULTADOS DE BÚSQUEDA (vendedor)
   ------------------------------------------------------------ */
.search-results {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    10px;
  overflow:         hidden;
  margin-top:       .5rem;
}

.search-result-item {
  padding:          .75rem 1rem;
  border-bottom:    1px solid var(--border);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  transition:       background-color .12s ease;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover { background-color: var(--bg3); }

.search-result-nombre {
  font-weight: 600;
  color:       var(--text1);
  font-size:   .95rem;
}

.search-result-tel {
  font-size: .8rem;
  color:     var(--text2);
  margin-top: 2px;
}

/* ------------------------------------------------------------
   MODALES (Bootstrap override)
   ------------------------------------------------------------ */
.modal-content {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    14px;
}

.modal-header {
  border-bottom: 1px solid var(--border);
}

.modal-footer {
  border-top: 1px solid var(--border);
}

.modal-title { color: var(--text1); }

.btn-close {
  filter: var(--text1) === '#ffffff' ? invert(1) : none;
}

body:not(.light-mode) .btn-close { filter: invert(1) brightness(.8); }

/* ------------------------------------------------------------
   DROPDOWN (Bootstrap override)
   ------------------------------------------------------------ */
.dropdown-menu {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    10px;
  padding:          .4rem;
}

.dropdown-item {
  color:        var(--text2);
  border-radius: 6px;
  font-size:    .9rem;
  padding:      .45rem .85rem;
}

.dropdown-item:hover {
  background-color: var(--bg3);
  color:            var(--text1);
}

.dropdown-divider { border-color: var(--border); }

/* ------------------------------------------------------------
   PAGINACIÓN
   ------------------------------------------------------------ */
.page-link {
  background-color: var(--bg2);
  border-color:     var(--border);
  color:            var(--text2);
}

.page-link:hover {
  background-color: var(--bg3);
  border-color:     var(--border);
  color:            var(--text1);
}

.page-item.active .page-link {
  background-color: var(--red);
  border-color:     var(--red);
  color:            #fff;
}

.page-item.disabled .page-link {
  background-color: var(--bg1);
  border-color:     var(--border);
  color:            var(--text3);
}

/* ------------------------------------------------------------
   ALERTAS (Bootstrap override)
   ------------------------------------------------------------ */
.alert-danger {
  background-color: rgba(229, 62, 62, .12);
  border-color:     rgba(229, 62, 62, .3);
  color:            var(--red);
}

.alert-success {
  background-color: rgba(22, 163, 74, .12);
  border-color:     rgba(22, 163, 74, .3);
  color:            var(--green);
}

.alert-warning {
  background-color: rgba(217, 119, 6, .12);
  border-color:     rgba(217, 119, 6, .3);
  color:            var(--amber);
}

/* ------------------------------------------------------------
   UTILIDADES RÁPIDAS
   ------------------------------------------------------------ */
.text-red   { color: var(--red)   !important; }
.text-green { color: var(--green) !important; }
.text-amber { color: var(--amber) !important; }
.text-muted { color: var(--text2) !important; }
.text-dim   { color: var(--text3) !important; }

.bg-card   { background-color: var(--bg1) !important; }
.bg-input  { background-color: var(--bg2) !important; }
.bg-hover  { background-color: var(--bg3) !important; }

.border-theme { border-color: var(--border) !important; }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

/* ------------------------------------------------------------
   RESPONSIVE — ajustes para el vendedor en móvil
   ------------------------------------------------------------ */
@media (max-width: 576px) {
  .btn { min-height: 56px; }
  .btn-xl { min-height: 64px; }

  .metric-card .metric-value { font-size: 1.4rem; }

  .sidebar {
    width:    100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}