/* === PATCH: Fondo global + métricas legibles (como tu 2ª imagen) === */

/* 0) Asegúrate de tener la imagen en: assets/img/bg-gears.jpg */

/* 1) Fondo global a pantalla completa (blur + oscurecido) */
html, body { height: 100%; min-height: 100%; }
body {
  background: #0f1628;           /* fallback */
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../img/bg-gears.jpg') center / cover no-repeat fixed;
  filter: blur(7px) brightness(0.55);
  transform: scale(1.06);        /* evita bordes tras el blur */
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* ligero gradiente para contraste (ajústalo si quieres) */
  background: radial-gradient(ellipse at 60% 25%, rgba(0,0,0,.12), rgba(0,0,0,.45));
  z-index: -1;
}

/* 2) HERO: que se vea el fondo global detrás + tarjeta translúcida */
.hero{
  margin: 1rem auto 1.2rem;
  min-height: 280px;
  border-radius: 1rem;
  /* sin imagen propia: dejamos ver el fondo global */
  background: transparent !important;
  display: grid;
  place-items: center;
  padding: 1rem;
  box-shadow: none;
}
.hero-card{
  width: min(720px, 94vw);
  background: rgba(255,255,255,.06);
  border: 1px solid #2a3446;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #e5e7eb;
}
.hero-card a{ color:#c7d2fe; text-decoration:none; }
.hero-card a:hover{ text-decoration:underline; }

/* 3) Tarjetas de métricas claras (como antes) */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
@media (max-width: 920px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .stats-grid{ grid-template-columns: 1fr; } }

/* tarjetas claras con texto oscuro para máxima legibilidad */
.stat-card{
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  color: #111827;            /* texto oscuro */
}
.stat-card .icon{ font-size: 1.6rem; margin-bottom: .3rem; }
.stat-title{ color: #6b7280; margin-bottom: .2rem; }
.stat-value{ font-size: 2rem; font-weight: 800; color:#111827; }

/* 4) Inputs/controles abajo con buen contraste */
.account input,
.assign input,
.assign select,
.assign button{
  color:#e5e7eb;
  background: rgba(15,23,42,.85);
  border: 1px solid #2a3446;
}
.account .btn,
.assign .btn{
  background: var(--rp-primary);
  border:1px solid var(--rp-primary);
  color:#fff;
}
.account .btn:hover,
.assign .btn:hover{ filter:brightness(1.08); }

/* === Admin Dashboard style (hero + stats) === */
.hero{
  margin: 1rem auto 1.2rem;
  min-height: 280px;
  border-radius: 1rem;
  background:
    linear-gradient(0deg, rgba(15,23,42,.7), rgba(15,23,42,.7)),
    url('../img/bg-gears.jpg') center/cover no-repeat;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.hero-card{
  width: min(720px, 94vw);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-card h2{ margin: .2rem 0 .3rem; font-size: 1.8rem; }
.hero-actions{
  margin-top: .6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
@media (max-width: 720px){
  .hero-actions{ grid-template-columns: 1fr; }
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
@media (max-width: 920px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns: 1fr; }
}
.stat-card{
  background: rgba(255,255,255,.06);
  border: 1px solid #2a3446;
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.stat-card .icon{ font-size: 1.6rem; margin-bottom: .3rem; }
.stat-title{ color: var(--muted, #9aa4b2); margin-bottom: .2rem; }
.stat-value{ font-size: 2rem; font-weight: 800; }

/* ============================
   REPUX • Design Tokens + utilidades
   ============================ */
:root{
  --rp-bg: #0f1115;
  --rp-panel: #151821;
  --rp-panel-2: #0e1220;
  --rp-text: #e6e9ee;
  --rp-text-dim: #a7b0bf;
  --rp-border: #273248;

  /* NUEVA PALETA AZUL (coherente con el logo) */
  --rp-primary: #0ea5ff;   /* Sky 500 */
  --rp-primary-2: #60a5fa; /* Blue 400 */
  --rp-accent: #3b82f6;    /* Blue 500 */

  --rp-success: #22c55e;
  --rp-warning: #f59e0b;
  --rp-danger:  #ef4444;

  --rp-radius: 14px;
  --rp-shadow: 0 18px 40px rgba(0,0,0,.35);
  --rp-shadow-sm: 0 8px 18px rgba(0,0,0,.25);
}

/* Base segura */
.rp-page{
  min-height: 100dvh;
  background: var(--rp-bg);
  color: var(--rp-text);
}

/* Fondo a pantalla completa difuminado */
.rp-bg-cover{
  position: fixed; inset: 0;
  background:
    linear-gradient(0deg, rgba(15,23,42,.60), rgba(15,23,42,.60)),
    url('../img/bg-gears.jpg') center/cover no-repeat;
  filter: blur(0.4px);
  z-index: -1;
}

/* Centro vertical */
.rp-center{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* Card */
.rp-card{
  width: min(760px, 94vw);
  background: rgba(21,24,33,.88);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Títulos */
.rp-title{ font-size: clamp(24px, 4vw, 36px); font-weight: 800; margin: 4px 0 8px; }
.rp-sub  { color: var(--rp-text-dim); margin-bottom: 14px; }

/* Formulario */
.rp-form{ display: grid; gap: 12px; }
.rp-label{ font-weight: 700; color: #ffffff; }
.rp-input{
  width: 70%;
  padding: 12px 14px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e3e9f7;
  border-radius: var(--rp-radius);
  outline: none;
  transition: box-shadow .2s, border-color .2s, transform .02s;
}
.rp-input::placeholder{ color:#94a3b8; }
.rp-input:focus{
  border-color: var(--rp-primary);
  /* halo azul (antes morado) */
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);
}

/* Botones */
.rp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding: 12px 16px; border-radius: var(--rp-radius);
  border:0; cursor:pointer; font-weight:800; color:#fff;
}
.rp-btn:active{ transform: translateY(1px); }
.rp-btn-primary{
  /* gradiente 100% azul */
  background: linear-gradient(90deg, var(--rp-primary) 0%, var(--rp-primary-2) 50%, var(--rp-accent) 100%);
  box-shadow: 0 16px 30px rgba(14,165,233,.35), 0 10px 20px rgba(59,130,246,.22);
}
.rp-btn-ghost{ background: transparent; color: var(--rp-text); border:1px solid var(--rp-border); }
.rp-btn-danger{ background: var(--rp-danger); }

/* Grids utilitarias */
.rp-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px){ .rp-grid-3{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .rp-grid-3{ grid-template-columns: 1fr;} }

/* Stats nuevas (por si quieres migrar) */
.rp-stat{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 16px; text-align:center; box-shadow: var(--rp-shadow-sm);
}
.rp-stat .rp-k{ font-size: 28px; font-weight: 800; }
.rp-stat .rp-t{ color: var(--rp-text-dim); }

/* Tabla */
.rp-table{ width: 100%; border-collapse: collapse; margin-top: 10px; border: 1px solid var(--rp-border); }
.rp-table th, .rp-table td{ padding: 10px 12px; border-bottom: 1px solid var(--rp-border); }
.rp-table th{ text-align:left; color: var(--rp-text-dim); font-weight: 700; }

/* Alerts */
.rp-alert{ padding:12px 14px; border-radius: var(--rp-radius); margin: 8px 0; }
.rp-alert.ok     { background: rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.35); }
.rp-alert.warn   { background: rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.35); }
.rp-alert.danger { background: rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.35); }

/* Adjuntos dentro de burbujas */
.bubble .att a {
  text-decoration: none;
  font-weight: 700;
  opacity: .95;
}
.bubble .att a:hover { text-decoration: underline; }
.bubble .att img {
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.cl-logo{
  width:100%;
  text-align:center;
  margin-bottom:22px;
}
.cl-logo img{
  max-width:460px;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.45));
}

@keyframes fadeIn {
  from { opacity:0; transform:scale(0.8); }
  to   { opacity:1; transform:scale(1); }
}

.cl-msgs{ color: var(--rp-text); }            /* asegura legibilidad */
.bubble{ white-space: pre-wrap; word-break: break-word; }
.msg-bubble{                                   /* alias por compatibilidad */
  max-width:75%; padding:10px 12px; margin:6px 0; border-radius:14px;
  border:1px solid var(--rp-border); background:rgba(255,255,255,.10);
  line-height:1.33; color:var(--rp-text); white-space:pre-wrap; word-break:break-word;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
/* burbuja del operador/“me” ahora con gradiente azul */
.msg-bubble.me{
  margin-left:auto;
  background: linear-gradient(90deg, var(--rp-primary) 0%, var(--rp-accent) 100%);
  color:#fff; border-color:transparent;
}

/* === Forzar AZUL en el botón "Comenzar" del cliente === */
#startBtn,
#clientStartBtn,
.cl-form button[type="submit"],
.client-start .rp-btn,
button.rp-btn.rp-btn-primary,
.rp-btn-primary {
  background: linear-gradient(90deg, #0ea5ff 0%, #60a5fa 50%, #3b82f6 100%) !important;
  border-color: #0ea5ff !important;
  box-shadow: 0 16px 30px rgba(14,165,233,.35), 0 10px 20px rgba(59,130,246,.22) !important;
  color:#fff !important;
}

/* === Burbuja azul para mensajes propios (cliente y operador) === */
.msg-bubble.me,
.cl-msgs .bubble.me,
.op-msgs .bubble.me,
.chat-box .bubble.me,
.message.me {
  background: linear-gradient(135deg, #0ea5ff 0%, #60a5fa 50%, #3b82f6 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(14,165,233,.30), 0 6px 14px rgba(59,130,246,.20) !important;
}

/* Texto secundario dentro de la burbuja (hora, enlaces) */
.msg-bubble.me .msg-time,
.bubble.me time,
.bubble.me a { color: rgba(255,255,255,.85) !important; }
.bubble.me a:hover { text-decoration: underline; }
.att-img{ max-width:280px; max-height:220px; }