/* =====================================================================
   ESTILOS BASE — usan variables CSS para que TODO sea parametrizable
   desde el panel de administración (colores, nombre, etc.)
   ===================================================================== */

:root{
  --color-primario: #0b3d62;
  --color-secundario: #00a99d;
  --color-acento: #f5a623;
  --bg: #f2f5f8;
  --texto: #1c2b36;
  --card-bg: #ffffff;
  --sombra: 0 10px 30px rgba(11,61,98,0.10);
  --radio: 16px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

a{ color: inherit; text-decoration:none; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--color-primario), #08283f);
  color:#fff;
  box-shadow: var(--sombra);
}
.topbar .marca{
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar .marca img{
  height:46px;
  border-radius:8px;
  background:#fff;
  padding:4px;
}
.topbar .marca h1{
  font-size:1.25rem;
  margin:0;
  font-weight:700;
  letter-spacing:.3px;
}
.topbar .marca span{
  display:block;
  font-size:.8rem;
  opacity:.85;
  font-weight:400;
}
.topbar nav a{
  color:#fff;
  opacity:.85;
  margin-left:22px;
  font-weight:600;
  font-size:.92rem;
}
.topbar nav a:hover{ opacity:1; text-decoration:underline; }

.contenedor{
  max-width:1200px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.card{
  background: var(--card-bg);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight:600;
  font-size: .95rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:active{ transform: scale(.97); }
.btn-primario{ background: var(--color-primario); color:#fff; }
.btn-secundario{ background: var(--color-secundario); color:#fff; }
.btn-acento{ background: var(--color-acento); color:#20200a; }
.btn-outline{ background:transparent; border:2px solid var(--color-primario); color:var(--color-primario); }
.btn-peligro{ background:#d64545; color:#fff; }
.btn-gris{ background:#e5eaf0; color:#33475b; }
.btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.15); opacity:.95; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:7px 12px; font-size:.82rem; border-radius:8px; }
.btn-block{ width:100%; justify-content:center; }

.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.badge-disponible{ background:#e3f8ef; color:#0a8f5b; }
.badge-ocupado{ background:#fdeee3; color:#c96a10; }
.badge-pausa{ background:#f0e9fc; color:#7c3aed; }
.badge-desconectado{ background:#f1f2f4; color:#6b7684; }
.badge-esperando{ background:#eef3f8; color:#0b3d62; }
.badge-llamado{ background:#fff4e0; color:#c96a10; }
.badge-atendiendo{ background:#e3f8ef; color:#0a8f5b; }
.badge-finalizado{ background:#eef1f4; color:#6b7684; }
.badge-no_presentado{ background:#fdecec; color:#c62828; }
.badge-cancelado{ background:#f1f2f4; color:#6b7684; }

table{ width:100%; border-collapse:collapse; }
table th, table td{ padding:12px 14px; border-bottom:1px solid #eaeff4; text-align:left; font-size:.92rem; }
table th{ background:#f7f9fb; font-weight:700; color:#405366; text-transform:uppercase; font-size:.75rem; letter-spacing:.4px; }
table tr:hover td{ background:#fbfcfe; }

.form-grupo{ margin-bottom:18px; }
.form-grupo label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:#33475b; }
.form-grupo input[type=text], .form-grupo input[type=password], .form-grupo input[type=number],
.form-grupo input[type=color], .form-grupo input[type=file], .form-grupo select, .form-grupo textarea{
  width:100%;
  padding:11px 13px;
  border:1.5px solid #dce3ea;
  border-radius:10px;
  font-size:.95rem;
  background:#fff;
  font-family: inherit;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus{
  outline:none;
  border-color: var(--color-secundario);
}
.form-fila{ display:flex; gap:16px; flex-wrap:wrap; }
.form-fila > *{ flex:1; min-width:200px; }

.alerta{ padding:14px 18px; border-radius:10px; margin-bottom:18px; font-size:.92rem; font-weight:600; }
.alerta-ok{ background:#e3f8ef; color:#0a8f5b; }
.alerta-error{ background:#fdecec; color:#c62828; }
.alerta-info{ background:#eaf3fb; color:#0b3d62; }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid-4{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }

.stat{
  background:#fff; border-radius:14px; padding:20px; box-shadow: var(--sombra);
  border-left: 6px solid var(--color-secundario);
}
.stat .valor{ font-size:2rem; font-weight:800; color:var(--color-primario); }
.stat .etiqueta{ font-size:.85rem; color:#66768a; font-weight:600; }

.icon-circle{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; flex-shrink:0;
}

.footer-admin{ text-align:center; padding:24px; color:#8a97a6; font-size:.82rem; }

@media (max-width: 720px){
  .topbar{ flex-direction:column; gap:12px; align-items:flex-start; }
  .topbar nav a{ margin-left:0; margin-right:16px; }
}