/* ============================================================
   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);
  /* Secundario: relleno propio + leve elevación → se lee SIEMPRE como botón,
     también sobre barras/paneles del mismo color (antes "Salir"/"Pausar" se
     confundían con el fondo). */
  background: var(--btn-sec);
  color: var(--texto);
  box-shadow: var(--sombra-sm);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion), filter var(--transicion);
}
.btn:hover { background: var(--btn-sec-hover); }

/* Primario SOBRIO: índigo de marca desaturado (sin el morado chillón). */
.btn--primario,
.btn--acento {
  background: var(--btn-primario);
  color: #fff;
  border: none;
}
.btn--primario:hover,
.btn--acento:hover { background: var(--btn-primario-hover); opacity: 1; }

/* En tablas/filas (acción repetida, p. ej. "Abrir ficha"): primario SUAVE en
   tinte de marca, para no llenar la pantalla de botones llamativos. */
.btn--mini.btn--primario,
.btn--mini.btn--acento {
  background: var(--acento-suave);
  color: var(--acento-texto);
  border: 1px solid transparent;
}
.btn--mini.btn--primario:hover,
.btn--mini.btn--acento:hover { filter: none; border-color: var(--acento-texto); }

.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--mini { padding: 5px 11px; font-size: var(--txt-sm); }
/* Área táctil digna en móvil (los ←/→ de paginación, «Ver ficha», tabs…
   quedaban por debajo de los ~40px recomendados para el dedo). */
@media (max-width: 860px) {
  .btn--mini { padding: 9px 14px; }
  .btn--icono { width: 38px; height: 38px; }
  .btn--icono .ico { width: 17px; height: 17px; }
}

/* 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: var(--exito); }
.btn--icono.is-peligro { color: var(--peligro-texto); border-color: var(--peligro); }
.btn--icono.is-editar { color: var(--acento-texto); }

/* 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 (también como <button> en mini-form POST) */
.enlace-mas {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--acento-texto);
}
.enlace-mas:hover { opacity: 0.75; }
button.enlace-mas { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* ---------------- 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(--acento-texto); }

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

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

.banner--peligro { background: var(--peligro-suave); border: 1px solid var(--peligro); }
.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--acento  { background: var(--acento-suave); color: var(--acento-texto); }


/* 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) */
/* ── Onda estéreo de la llamada (L=paciente en verde, R=Marta en violeta) ── */
.onda { margin: 2px 0 12px; padding: 10px 12px; background: var(--fondo-2, rgba(255,255,255,.03)); border: 1px solid var(--borde, rgba(255,255,255,.08)); border-radius: 10px; }
.onda__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.onda__leyenda { display: flex; gap: 10px; font-size: 12px; }
.onda__chip--pac { color: #3ecf8e; }
.onda__chip--marta { color: #8b5cf6; }
.onda__lienzo { display: block; width: 100%; height: 110px; cursor: pointer; }
.onda__eje { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-suave, #8a8a96); margin-top: 2px; }
.onda__pie { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.onda__crono { min-width: 44px; }
.onda__hint { font-size: 11px; color: var(--texto-suave, #8a8a96); }
.onda__audio { display: none; }

/* ---------------- 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; }
/* Item de lista como <button> (p. ej. selector de clínica del superadmin). */
button.lista-item { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--borde); text-align: left; font-family: inherit; font-size: inherit; cursor: pointer; }
button.lista-item:last-child { border-bottom: none; }
.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); overflow-wrap: anywhere; }
.lista-item__meta { margin-top: 1px; font-size: var(--txt-sm); color: var(--texto-tenue); overflow-wrap: anywhere; }
.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); }
.estado-dot--off   { background: var(--borde-fuerte, #4a4a55); } /* canal apagado en «Estado de agentes IA» */

/* ---------------- 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; }
/* Cabecera ordenable: conmuta el orden (flecha = orden activo). */
.tabla th a.th-orden { color: inherit; text-decoration: none; }
.tabla th a.th-orden:hover { color: var(--acento-texto); }
/* …y como <button> en un mini-form (estado en sesión, sin query strings). */
.tabla th form { display: inline; }
.tabla th button.th-orden { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.tabla th button.th-orden:hover { color: var(--acento-texto); }

/* ---------------- 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); }

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

/* Los panels del partial de Seguridad (contraseña / 2FA) iban PEGADOS: el partial
   compartido de nucleo no hereda el espaciado de las secciones del portal. */
.ajuste-seccion { display: grid; gap: var(--esp-4, 16px); }
.ajuste-seccion .panel { margin: 0; }
/* Item de notificación clicable (el drawer llevaba <li> sin enlace: clic muerto). */
.lista-item__enlace { display: flex; align-items: center; gap: 10px; width: 100%;
  text-decoration: none; color: inherit; }
.lista-item__enlace:hover .lista-item__titulo { color: var(--acento-texto); }