/* ============================================================
   BookedUp · Dashboard — Componentes
   ============================================================ */

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: background var(--transicion), opacity var(--transicion);
}
.btn:hover { background: var(--superficie-tenue); }

.btn--primario,
.btn--acento {
  background: var(--marca-degradado);
  color: #fff;
  border: none;
}
.btn--primario:hover,
.btn--acento:hover { opacity: 0.9; }

.btn--outline { /* alias del botón base */ }

.btn--exito   { background: var(--exito);   color: #fff; border: none; }
.btn--peligro { background: var(--peligro); color: #fff; border: none; }
.btn--aviso   { background: var(--aviso);   color: #fff; border: none; }
.btn--exito:hover, .btn--peligro:hover, .btn--aviso:hover { opacity: 0.9; }

.btn--ghost { border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-suave); }

.btn--mini { padding: 5px 11px; font-size: var(--txt-sm); }

/* Botón de icono (acciones compactas en filas de tabla) */
.btn--icono { padding: 0; width: 28px; height: 28px; justify-content: center; }
.btn--icono .ico { width: 15px; height: 15px; }
.btn--icono.is-exito  { color: var(--exito-texto);   border-color: #9ae6c4; }
.btn--icono.is-peligro { color: var(--peligro-texto); border-color: #feb2b2; }
.btn--icono.is-editar { color: var(--marca-primario); }

/* Grupo de acciones en una fila (incluye formularios POST inline) */
.fila-acciones { display: inline-flex; align-items: center; gap: 6px; }
.fila-acciones form { display: inline-flex; margin: 0; }
.col-acc { text-align: right; }

/* Enlace de cabecera de panel */
.enlace-mas {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--marca-primario);
}
.enlace-mas:hover { opacity: 0.75; }

/* ---------------- KPI card ---------------- */
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}

.kpi__label {
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.kpi__valor {
  margin-top: 6px;
  font-size: var(--txt-2xl);
  font-weight: var(--peso-semi);
  line-height: 1;
  color: var(--texto-fuerte);
}

.kpi__valor--exito   { color: var(--exito); }
.kpi__valor--peligro { color: var(--peligro); }
.kpi__valor--tenue   { color: var(--texto-tenue); }

.kpi__sub { margin-top: 5px; font-size: var(--txt-sm); color: var(--texto-tenue); }
.kpi__sub--exito { color: var(--exito-texto); }
.kpi__sub--aviso { color: var(--aviso-texto); }
.kpi__sub--peligro { color: var(--peligro-texto); }

/* ---------------- Panel ---------------- */
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.panel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--borde);
}

.panel__titulo { font-size: var(--txt-md); font-weight: var(--peso-semi); color: var(--texto-fuerte); }

.panel__cuerpo { padding: 4px 16px 8px; }
.panel__cuerpo--plano { padding: 0; }

/* ---------------- Banner ---------------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 11px 16px;
  border-radius: var(--radio);
  margin-bottom: var(--esp-6);
  box-shadow: var(--sombra);
  font-size: var(--txt-base);
}

.banner__txt { flex: 1; line-height: 1.45; }
.banner__txt strong { font-weight: var(--peso-semi); }

.banner--acento { background: var(--morado-claro); border: 1px solid var(--morado-medio); }
.banner--acento .banner__txt { color: var(--morado-oscuro); }
.banner--acento .banner__dot { background: var(--marca-primario); }

.banner--aviso { background: var(--aviso-suave); border: 1px solid #f6d860; }
.banner--aviso .banner__txt { color: var(--aviso-texto); }
.banner--aviso .banner__dot { background: var(--aviso); }

.banner--exito { background: var(--exito-suave); border: 1px solid #9ae6c4; }
.banner--exito .banner__txt { color: var(--exito-texto); }
.banner--exito .banner__dot { background: var(--exito); }

.banner--peligro { background: var(--peligro-suave); border: 1px solid #feb2b2; }
.banner--peligro .banner__txt { color: var(--peligro-texto); }
.banner--peligro .banner__dot { background: var(--peligro); }

.banner__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------------- Pills de estado ---------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radio-full);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}

.pill__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pill--exito   { background: var(--exito-suave);   color: var(--exito-texto); }
.pill--aviso   { background: var(--aviso-suave);   color: var(--aviso-texto); }
.pill--peligro { background: var(--peligro-suave); color: var(--peligro-texto); }
.pill--info    { background: var(--info-suave);    color: var(--info-texto); }
.pill--neutro  { background: var(--superficie-tenue); color: var(--texto-suave); border: 1px solid var(--borde); }

/* Pill "en vivo" con punto pulsante */
.pill--live { background: var(--exito-suave); color: var(--exito-texto); }
.pill--live .pill__dot { background: var(--exito); animation: latido 1.5s infinite; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Tags de dirección de llamada */
.tag {
  font-size: 10px;
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
}
.tag--in  { background: var(--exito-suave);  color: var(--exito-texto); }
.tag--out { background: var(--morado-claro); color: var(--morado-oscuro); }

/* Reproductor de la grabación de llamada (transcripción + audio real) */
.audio-llamada { width: 100%; margin: 2px 0 10px; }

/* ---------------- Listas ---------------- */
.lista { display: flex; flex-direction: column; }

.lista-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.lista-item:last-child { border-bottom: none; }
.lista-item--libre { background: var(--aviso-suave); margin: 0 -16px; padding: 10px 16px; }

.lista-item__cuerpo { flex: 1; min-width: 0; }
.lista-item__titulo { font-size: var(--txt-base); font-weight: var(--peso-medio); color: var(--texto-fuerte); }
.lista-item__meta { margin-top: 1px; font-size: var(--txt-sm); color: var(--texto-tenue); }
.lista-item__hora {
  font-family: var(--mono);
  font-size: var(--txt-sm);
  color: var(--texto-tenue);
  width: 42px;
  flex-shrink: 0;
}
.lista-item__der { display: flex; align-items: center; gap: var(--esp-3); flex-shrink: 0; }

/* Avatar de iniciales (morado de marca) */
.ini, .ini--acento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--morado-claro);
  color: var(--morado-oscuro);
  font-size: var(--txt-xs);
  font-weight: var(--peso-bold);
  flex-shrink: 0;
}
.ini--neutro { background: var(--superficie-tenue); color: var(--texto-suave); }

/* Punto de estado de agente */
.estado-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.estado-dot--ok    { background: var(--exito); }
.estado-dot--pausa { background: var(--peligro); }
.estado-dot--medio { background: var(--info); }

/* ---------------- Tabla ---------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--txt-base); }
.tabla th {
  text-align: left;
  padding: 8px 14px;
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  border-bottom: 2px solid var(--borde);
}
.tabla td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-fuerte);
  vertical-align: middle;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--superficie-tenue); }
.tabla__fuerte { font-weight: var(--peso-medio); color: var(--texto-fuerte); }
.tabla__tenue { color: var(--texto-tenue); }
.num { font-variant-numeric: tabular-nums; }
.col-der { text-align: right; }
.tabla th.col-der { text-align: right; }

/* ---------------- Fila clave → valor ---------------- */
.fila-dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  font-size: var(--txt-base);
}
.fila-dato:last-child { border-bottom: none; }
.fila-dato__k { color: var(--texto-suave); }
.fila-dato__v { font-weight: var(--peso-semi); color: var(--texto-fuerte); }

/* ---------------- Barra de progreso ---------------- */
.progreso { display: flex; align-items: center; gap: var(--esp-3); }
.progreso__pista { flex: 1; height: 5px; border-radius: var(--radio-full); background: var(--superficie-tenue); overflow: hidden; }
.progreso__barra { height: 100%; border-radius: var(--radio-full); background: var(--exito); }
.progreso__barra--exito   { background: var(--exito); }
.progreso__barra--aviso   { background: var(--aviso); }
.progreso__barra--peligro { background: var(--peligro); }
.progreso__pct {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-fuerte);
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Caja de acción (roja) ---------------- */
.accion-caja {
  background: var(--peligro-suave);
  border: 1px solid #feb2b2;
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  margin-top: var(--esp-3);
}
.accion-caja__titulo { font-size: var(--txt-base); font-weight: var(--peso-semi); color: var(--peligro-texto); }
.accion-caja__sub { font-size: var(--txt-sm); color: var(--peligro-texto); margin: 2px 0 8px; }
.accion-caja__botones { display: flex; gap: 6px; }

/* ---------------- Switch decorativo ---------------- */
.switch { width: 36px; height: 20px; border-radius: var(--radio-full); background: var(--borde-fuerte); position: relative; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-sm); transition: left var(--transicion); }
.switch.is-on { background: var(--marca-primario); }
.switch.is-on::after { left: 19px; }

/* ---------------- Texto de color ---------------- */
.t-exito { color: var(--exito-texto); }
.t-peligro { color: var(--peligro-texto); }
.t-suave { color: var(--texto-suave); }

/* ---------------- KPIs compactos dentro de un panel ---------------- */
.grid-kpis--mini { margin-bottom: 0; }
.grid-kpis--mini .kpi { border: none; box-shadow: none; padding: 0; background: transparent; }
.grid-kpis--mini .kpi__valor { font-size: var(--txt-xl); }

/* ---------------- Bloque "Mi mes" ---------------- */
.mi-mes { margin-bottom: var(--esp-3); }
.mi-mes__obj { font-size: var(--txt-sm); color: var(--texto-suave); margin-bottom: 6px; }
.mi-mes__nota { margin-top: 6px; font-size: var(--txt-sm); color: var(--texto-tenue); }

/* ---------------- Utilidades de ancho (progreso, sin inline) ---------------- */
.w-15  { width: 15%; }
.w-33  { width: 33%; }
.w-40  { width: 40%; }
.w-50  { width: 50%; }
.w-67  { width: 67%; }
.w-80  { width: 80%; }
.w-90  { width: 90%; }
.w-100 { width: 100%; }