:root {
  --bg-color: #121212;
  --bg-secondary: #1e1e1e;
  --text-color: #e0e0e0;
  /* Amarillo oscuro para OAK Beta */
  --accent-color: #BB9B66;
  --accent-hover: #FF8F00;
  --accent-rgb: 187,155,102;
  --success-green: #4caf50;
  --error-color: #cf6679;
  --border-color: #333333;
}

/* Proveedores (cambia solo variables, el diseño se mantiene) */
body.provider-oak{
  --accent-color:#BB9B66;
  --accent-hover:#FF8F00;
  --accent-rgb:187,155,102;
}
body.provider-topying{
  --accent-color:#3949ab;
  --accent-hover:#303f9f;
  --accent-rgb:57,73,171;
}
body.provider-eim{
  --accent-color:#C62828;
  --accent-hover:#B71C1C;
  --accent-rgb:198,40,40;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Animación de shake (temblor) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}
.shake { animation: shake 0.4s ease; }

/* Animación de fade-out */
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; transform: scale(0.95); }
}
.fade-out { animation: fadeOut 0.5s forwards; }

/* Superficies */
.oak-surface{
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
}

/* Inputs */
.oak-input{
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}
.oak-input::placeholder{ color: rgba(224,224,224,.65); }
.oak-input:focus{
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25) !important;
}

.oak-addon{
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* Botones */
.btn-oak{
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
.btn-oak:hover,
.btn-oak:active{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}

/* Velocidad */
.speed-btn.active{
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

/* Contador de líneas */
.line-count{
  text-align: center;
  font-weight: 700;
}

/* Badge para "SMS enviados HOY" */
.daily-info-container { margin-bottom: 10px; }
.daily-info{
  font-size: 0.9em;
  font-weight: 700;
  background-color: var(--accent-color);
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  text-align: center;
}

/* Progreso */
.oak-progress{
  height: 14px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}
.oak-progress .progress-bar{
  background-color: var(--accent-color);
}

/* Contadores */
.oak-counter{
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
  text-align: center;
  background-color: var(--bg-color);
}
.oak-counter-success{ background-color: var(--success-green); color: #fff; border-color: transparent; }
.oak-counter-fail{ background-color: var(--error-color); color: #fff; border-color: transparent; }
.oak-counter-bill{ background-color: #5a5cb1; color: #fff; border-color: transparent; }

/* Bloques oscuros */
.oak-dark-block{ background-color: var(--bg-secondary); border: 1px solid var(--border-color); }
.oak-dark-block-header{ background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); font-weight: 800; }

/* Log */
.log-container{
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  background-color: var(--bg-color);
}

.log-entry{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.92em;
}
.log-entry:last-child{ border-bottom: none; }
.log-entry .entry-text{ flex:1; }

.log-entry button{
  padding: 6px 8px;
  font-size: 0.85em;
  border-radius: 6px;
  background-color: var(--accent-color);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.log-entry button:hover{ background-color: var(--accent-hover); }

/* Live sent */
.live-sent-list{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.live-sent-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.85rem;
}

@keyframes popIn{
  from{ opacity:0; transform: translateY(6px) scale(0.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.live-sent-pill.live-sent-new{ animation: popIn .22s ease both; }

/* Ajustes móviles */
@media (max-width: 768px) {
  .oak-token{ width: 100%; }
}


/* Estados del botón Enviar */
.btn-enviar-sending{
  background-color: #5c6bc0 !important;
  border-color: #5c6bc0 !important;
  color: #fff !important;
}
.btn-enviar-paused{
  background-color: #757575 !important;
  border-color: #757575 !important;
  color: #fff !important;
}

/* =====================================================
   Bootstrap defaults fix (legibilidad en tema oscuro)
   - Evita textos negros en navbar/cards/labels
   - Mantiene tu paleta original (sin degradados)
   ===================================================== */

body{
  /* Variables Bootstrap */
  --bs-body-bg: var(--bg-color);
  --bs-body-color: var(--text-color);
  --bs-emphasis-color: var(--text-color);
  --bs-secondary-color: rgba(224,224,224,.78);
  --bs-tertiary-color: rgba(224,224,224,.65);
  --bs-border-color: var(--border-color);
  --bs-card-color: var(--text-color);

  /* Navbar */
  --bs-navbar-color: var(--text-color);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-brand-color: var(--text-color);
  --bs-navbar-brand-hover-color: #ffffff;
}

/* Texto principal */
.navbar-brand,
.navbar .nav-link,
.navbar-text,
.card,
.oak-surface,
.modal-content,
.list-group-item,
.form-label,
.modal-title,
.card-title,
.card-header{
  color: var(--text-color) !important;
}

/* Muted en dark (Bootstrap por defecto queda muy oscuro) */
.text-muted,
.form-text,
.small,
small{
  color: rgba(224,224,224,.78) !important;
}

/* Asegura contraste en badges/headers dentro de cards */
.card-header,
.modal-header{
  border-color: var(--border-color) !important;
}

/* =====================================================
   Velocidad (nuevo look)
   - Segmented control moderno
   - Mantiene .speed-btn y .active para tu JS
   ===================================================== */

.oak-speed-control{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-color);
}

.oak-speed-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text-color);
}

.oak-speed-title i{
  color: var(--accent-color);
}

.oak-speed-hint{
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(224,224,224,.72);
}

.oak-speed-group.btn-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Bootstrap btn-group colapsa bordes con margin-left:-1px; lo anulamos */
.oak-speed-group.btn-group > .btn{
  border-radius: 999px !important;
  margin-left: 0 !important;
}

.oak-speed-group.btn-group > .btn + .btn{
  margin-left: 0 !important;
}

.oak-speed-group .speed-btn{
  border: 1px solid var(--border-color) !important;
  background-color: transparent !important;
  color: rgba(224,224,224,.86) !important;
  padding: 7px 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.oak-speed-group .speed-btn:hover{
  border-color: rgba(var(--accent-rgb), .6) !important;
  background-color: rgba(var(--accent-rgb), .10) !important;
}

.oak-speed-group .speed-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .22) !important;
}

.oak-speed-group .speed-btn.active{
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

@media (max-width: 576px){
  .oak-speed-control{ align-items: flex-start; }
  .oak-speed-title{ width: 100%; justify-content: space-between; }
}


/* Selector de proveedor (login) */
.oak-provider-group{
  border-radius: 999px;
  overflow: hidden;
}
.oak-provider-group .provider-btn{
  border-color: var(--border-color) !important;
  background: transparent !important;
  color: rgba(224,224,224,.85) !important;
  font-weight: 700;
}
.oak-provider-group .provider-btn:hover{
  background: rgba(255,255,255,.05) !important;
}
.oak-provider-group .provider-btn.is-active{
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .22) inset;
}

/* Toasts */
.oak-toast{
  background: var(--bg-secondary);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.oak-toast-header{
  background: rgba(0,0,0,.15);
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}