/* =====================================================================
   ESTILOS BASE — usan variables CSS para que TODO sea parametrizable
   desde el panel de administración (colores, fondos, textos, botones).
   Los valores reales de las variables los inyecta includes/theme_vars.php
   con lo que el administrador configure; aquí solo van los fallback.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --color-primario: #0b3d62;
  --color-secundario: #00a99d;
  --color-acento: #f5a623;

  --color-fondo-kiosco: #0b1f2e;
  --color-fondo-pantalla: #05131f;
  --color-fondo-admin: #f2f5f8;
  --color-fondo-asesor: #f2f5f8;

  --color-barra-menu: #0b3d62;

  --color-texto-titulo: #13202c;
  --color-texto-normal: #3d4c5a;

  --color-boton-positivo: #0b3d62;
  --color-boton-negativo: #d64545;
  --color-boton-retorno: #5a6b7c;

  --bg: var(--color-fondo-admin);
  --texto: var(--color-texto-normal);
  --card-bg: #ffffff;
  --sombra: 0 8px 24px rgba(15,35,55,0.08);
  --sombra-hover: 0 14px 32px rgba(15,35,55,0.13);
  --radio: 16px;
  --borde: #e6ebf1;
}

*{ box-sizing: border-box; }

html{ -webkit-font-smoothing: antialiased; }

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

body.admin-shell{ background: var(--color-fondo-admin); }
body.asesor-shell{ background: var(--color-fondo-asesor); }

h1, h2, h3, h4, h5{
  color: var(--color-texto-titulo);
  font-weight:800;
  letter-spacing:-.01em;
  margin: 0 0 8px;
}

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

::selection{ background: var(--color-secundario); color:#fff; }

/* ---------- Barra de menú superior ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 32px;
  background: var(--color-barra-menu);
  color: var(--color-texto-sobre-barra);
  box-shadow: var(--sombra);
  border-bottom: 3px solid var(--color-acento);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .marca{
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar .marca img{
  height:44px;
  border-radius:8px;
  background:#fff;
  padding:4px;
}
.topbar .marca h1{
  font-size:1.2rem;
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  color: var(--color-texto-sobre-barra);
}
.topbar .marca span{
  display:block;
  font-size:.8rem;
  opacity:.8;
  font-weight:500;
}
.topbar nav{ display:flex; align-items:center; flex-wrap:wrap; }
.topbar nav a{
  color: var(--color-texto-sobre-barra);
  opacity:.78;
  margin-left:8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight:600;
  font-size:.88rem;
  transition: background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.topbar nav a:hover{ opacity:1; background: color-mix(in srgb, var(--color-texto-sobre-barra) 12%, transparent); }

.contenedor{
  max-width:1240px;
  margin: 0 auto;
  padding: 30px 24px 64px;
}

/* ---------- Tarjetas ---------- */
.card{
  background: var(--card-bg);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  padding: 24px;
  transition: box-shadow .18s ease;
}

/* ---------- Botones semánticos ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight:700;
  font-size: .93rem;
  font-family: inherit;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active{ transform: scale(.97); }
.btn:hover{ box-shadow:0 8px 18px rgba(0,0,0,.16); filter: brightness(1.05); }
.btn:focus-visible{ outline: 3px solid var(--color-acento); outline-offset:2px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; filter:none; }

/* Positiva: aceptar, guardar, crear, confirmar */
.btn-primario{ background: var(--color-boton-positivo); color:#fff; }
/* Alterna positiva (marca secundaria): activar, disponible */
.btn-secundario{ background: var(--color-secundario); color:#fff; }
.btn-acento{ background: var(--color-acento); color:#20200a; }
/* Retorno / neutral: volver, cancelar, editar, ver */
.btn-outline{ background:transparent; border:2px solid var(--color-boton-retorno); color: var(--color-boton-retorno); }
.btn-outline:hover{ background: var(--color-boton-retorno); color:#fff; }
.btn-gris{ background:#eef1f4; color: var(--color-boton-retorno); }
/* Negativa: eliminar, rechazar, cancelar turno */
.btn-peligro{ background: var(--color-boton-negativo); color:#fff; }

.btn-sm{ padding:7px 13px; font-size:.8rem; border-radius:8px; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Insignias de estado ---------- */
.badge{
  display:inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight:800;
  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; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; }
table th, table td{ padding:13px 14px; border-bottom:1px solid var(--borde); text-align:left; font-size:.9rem; }
table th{ background:#f7f9fb; font-weight:800; color:#405366; text-transform:uppercase; font-size:.72rem; letter-spacing:.5px; }
table tr:last-child td{ border-bottom:none; }
table tr:hover td{ background:#f8fafc; }

/* ---------- Formularios ---------- */
.form-grupo{ margin-bottom:18px; }
.form-grupo label{ display:block; font-weight:700; font-size:.87rem; margin-bottom:6px; color: var(--color-texto-titulo); }
.form-grupo input[type=text], .form-grupo input[type=password], .form-grupo input[type=number],
.form-grupo input[type=date], .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;
  color: var(--color-texto-normal);
  transition: border-color .15s ease;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus{
  outline:none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secundario) 18%, transparent);
}
.form-grupo input[type=color]{ padding:4px; height:44px; cursor:pointer; }
.form-fila{ display:flex; gap:16px; flex-wrap:wrap; }
.form-fila > *{ flex:1; min-width:200px; }

/* Selector de color con muestra + etiqueta hex, usado en Configuración */
.color-picker-fila{ display:flex; align-items:center; gap:12px; }
.color-picker-fila input[type=color]{ width:56px; height:44px; flex-shrink:0; padding:3px; }
.color-picker-fila .color-hex{ font-family: monospace; font-size:.82rem; color:#8a97a6; }

/* ---------- Alertas ---------- */
.alerta{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:.9rem; 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)); }

/* ---------- Tarjetas de estadística ---------- */
.stat{
  background:#fff; border-radius:14px; padding:20px; box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--color-secundario);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover{ transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.stat .valor{ font-size:2.1rem; font-weight:900; color: var(--color-texto-titulo); letter-spacing:-.02em; }
.stat .etiqueta{ font-size:.83rem; color:#66768a; font-weight:700; margin-top:2px; }

.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:26px; color:#94a2b0; font-size:.8rem; }

@media (max-width: 720px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:12px; position:static; }
  .topbar nav{ margin-left:-8px; }
}