/*
 * Portal del cliente de SAO Vox. Sin recursos externos (CSP: style-src 'self', font-src 'self').
 * Colores, tipografía, espaciado y movimiento salen de marca/tokens.css (tema claro y oscuro);
 * botones, campos, tablas, insignias, tarjetas y avisos son los de marca/componentes.css.
 * Aquí va lo propio del portal: la entrada, la barra lateral con la empresa, la cabecera con la persona,
 * las insignias de rol, el acomodo de las pantallas, los diálogos y el teléfono.
 *
 * Fondos en tres planos: la lateral en surface-1, el lienzo en bg y las tarjetas con borde.
 * El turquesa (signal) queda para lo que es voz en vivo; la marca del portal es el índigo.
 * Todo lo que se mueve va dentro de prefers-reduced-motion: no-preference.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.sv-cuerpo { background: var(--sv-bg); min-height: 100vh; min-height: 100dvh; }

h1, h2, h3 { font-family: var(--sv-font-display); letter-spacing: var(--sv-tracking-tight); color: var(--sv-text-1); text-wrap: balance; }
h1 { font-size: var(--sv-text-2xl); line-height: var(--sv-leading-tight); margin: 0 0 var(--sv-space-3); }
h2 { font-size: var(--sv-text-lg); line-height: var(--sv-leading-snug); margin: 0 0 var(--sv-space-2); }
h3 { font-size: var(--sv-text-base); line-height: var(--sv-leading-snug); margin: var(--sv-space-5) 0 var(--sv-space-2); }
p { margin: 0 0 var(--sv-space-3); }
a:not([class]) { color: var(--sv-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:not([class]):hover { color: var(--sv-link-hover); }
code { font-family: var(--sv-font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.tenue { color: var(--sv-text-2); }
.ancho { width: 100%; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--sv-focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

/* Solo para lectores de pantalla */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: fixed;
  top: var(--sv-space-2);
  left: var(--sv-space-2);
  z-index: var(--sv-z-toast);
  padding: var(--sv-space-2) var(--sv-space-4);
  border-radius: var(--sv-radius-md);
  background: var(--sv-primary);
  color: var(--sv-on-primary);
  font-weight: var(--sv-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* Íconos: trazo propio a 24 px, heredan el color del texto */
.icono { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[data-icono] { display: inline-flex; flex: none; }
[data-icono]:empty { display: none; }

/* Logo: dos imágenes, se ve la que corresponde al tema (el del sistema o el que eligió la persona) */
.logo { display: block; height: 1.75rem; width: auto; }
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-oscuro { display: block; }
}
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: block; }

.boton-icono {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius-md);
  background: transparent;
  color: var(--sv-text-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard);
}
.boton-icono:hover { background: var(--sv-surface-2); }
.boton-icono .icono { width: 1.25rem; height: 1.25rem; }

/* ---------- Entrada (ingreso, activación y alta obligatoria del segundo paso) ---------- */

.entrada { min-height: 100vh; min-height: 100dvh; display: grid; }
.entrada-marca { display: none; }
.entrada-caja { display: grid; place-items: center; padding: var(--sv-space-10) var(--sv-space-4); }
.entrada-form { width: min(24rem, 100%); }
.entrada-form.amplia { width: min(38rem, 100%); }
.entrada-logo { height: 2.25rem; margin: 0 0 var(--sv-space-8); }
.entrada h1 { font-size: var(--sv-text-2xl); margin-bottom: var(--sv-space-1); }
.entrada-form > .tenue { margin-bottom: var(--sv-space-6); }
.entrada-pie { display: flex; justify-content: center; margin: var(--sv-space-4) 0 0; }
/* La empresa del host (<slug>.sao-vox.com): su nombre y la salida al portal general, pegados al texto de la entrada */
.entrada-form > .tenue:has(+ .entrada-empresa:not([hidden])) { margin-bottom: var(--sv-space-2); }
.entrada-empresa { margin: 0 0 var(--sv-space-6); font-size: var(--sv-text-sm); color: var(--sv-text-2); }
.entrada-empresa b { color: var(--sv-text-1); }
.entrada .sv-campo { margin-bottom: var(--sv-space-5); }
/* Las empresas entre las que elegir cuando el mismo correo está en varias */
.empresas-elegir { display: grid; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-5); }
.empresas-elegir .sv-btn { flex-direction: column; gap: 0; padding-block: var(--sv-space-2); }
.empresas-elegir small { display: block; color: var(--sv-text-3); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-regular); }
.codigo-totp { font-family: var(--sv-font-mono); font-size: var(--sv-text-lg); letter-spacing: 0.12em; }

/* Datos de la persona que activa su enlace (empresa y correo) */
.quien { display: grid; gap: 2px; margin: 0 0 var(--sv-space-5); padding: var(--sv-space-3) var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg); background: var(--sv-surface-1); font-size: var(--sv-text-sm); }
.quien b { font-family: var(--sv-font-display); font-size: var(--sv-text-base); }
.quien span { color: var(--sv-text-2); overflow-wrap: anywhere; }

@media (min-width: 60rem) {
  .entrada { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .entrada-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sv-space-10);
    padding: var(--sv-space-12) clamp(var(--sv-space-8), 5vw, var(--sv-space-16));
    overflow: hidden;
    background: var(--sv-tinta);
    color: var(--sv-text-1);
  }
  .entrada-marca-logo { display: block; height: 2rem; width: auto; }
  .entrada-marca-cuerpo { max-width: 26rem; }
  .entrada-marca-titulo {
    margin: 0 0 var(--sv-space-8);
    font-family: var(--sv-font-display);
    font-size: var(--sv-text-3xl);
    font-weight: var(--sv-weight-bold);
    line-height: var(--sv-leading-tight);
    letter-spacing: var(--sv-tracking-display);
    text-wrap: balance;
  }
  .entrada-marca-lista { list-style: none; margin: 0; padding: 0; color: var(--sv-text-2); font-size: var(--sv-text-sm); }
  .entrada-marca-lista li { display: flex; align-items: center; gap: var(--sv-space-3); padding: var(--sv-space-3) 0; border-top: 1px solid var(--sv-border); }
  .entrada-marca-lista li:last-child { border-bottom: 1px solid var(--sv-border); }
  .entrada-marca-lista li::before { content: ""; flex: none; width: 0.875rem; height: 1px; background: var(--sv-text-3); }
  .entrada-marca-pie { margin: 0; color: var(--sv-text-3); font-size: var(--sv-text-xs); }
  .entrada-caja .entrada-logo { display: none !important; }
  .entrada-caja { padding: var(--sv-space-12) var(--sv-space-10); }
}

/* Medidor de la entrada: la geometría del logo (barras desfasadas, la central es la voz) */
.entrada-medidor { display: flex; align-items: flex-end; gap: 0.4rem; height: 3.5rem; margin: 0 0 var(--sv-space-8); }
.entrada-medidor span { width: 0.4rem; height: 100%; border-radius: var(--sv-radius-full); background: var(--sv-text-3); transform-origin: 50% 100%; }
.entrada-medidor span:nth-child(1) { transform: scaleY(0.35); }
.entrada-medidor span:nth-child(2) { transform: scaleY(0.62); }
.entrada-medidor span:nth-child(3) { transform: scaleY(1); background: var(--sv-signal); }
.entrada-medidor span:nth-child(4) { transform: scaleY(0.74); }
.entrada-medidor span:nth-child(5) { transform: scaleY(0.46); }
@media (prefers-reduced-motion: no-preference) {
  .entrada-medidor span { animation: medidor 2.6s var(--sv-ease-in-out) infinite alternate; }
  .entrada-medidor span:nth-child(2) { animation-delay: -0.45s; }
  .entrada-medidor span:nth-child(3) { animation-delay: -1.25s; animation-duration: 1.9s; }
  .entrada-medidor span:nth-child(4) { animation-delay: -1.95s; }
  .entrada-medidor span:nth-child(5) { animation-delay: -0.8s; animation-duration: 3.1s; }
  .entrada-form { animation: subir var(--sv-dur-slower) var(--sv-ease-out) both; }
}
@keyframes medidor { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes subir { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Aplicación: lateral fija en pantallas anchas, cajón en las angostas ---------- */

.principal { min-width: 0; }

.marca { display: flex; align-items: center; gap: var(--sv-space-3); min-width: 0; color: var(--sv-text-1); text-decoration: none; }
.marca--movil { flex: 1; justify-content: center; }
.marca--movil .logo { height: 1.5rem; }

.fondo-menu { position: fixed; inset: 0; z-index: calc(var(--sv-z-drawer) - 1); background: var(--sv-overlay); }

.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--sv-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(18rem, 86vw);
  background: var(--sv-surface-1);
  border-right: 1px solid var(--sv-border);
  transform: translateX(-100%);
  visibility: hidden;
}
.lateral.abierta { transform: none; visibility: visible; box-shadow: var(--sv-shadow-pop); }
@media (prefers-reduced-motion: no-preference) {
  .lateral { transition: transform var(--sv-dur-slow) var(--sv-ease-out), visibility 0s linear var(--sv-dur-slow); }
  .lateral.abierta { transition: transform var(--sv-dur-slow) var(--sv-ease-out), visibility 0s; }
  .fondo-menu { animation: aparecer var(--sv-dur-base) var(--sv-ease-standard); }
}

.lateral-cabecera { display: flex; align-items: center; gap: var(--sv-space-3); min-height: 4rem; padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-5); }
.lateral-cabecera .marca { flex: none; }
.lateral-cerrar { margin-left: auto; }

/* La empresa a la que pertenece la persona: bajo el logo, siempre a la vista */
.empresa {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin: 0 var(--sv-space-3) var(--sv-space-2);
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface-raised);
}
.empresa-icono { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--sv-radius-md); background: var(--sv-primary-soft); color: var(--sv-text-brand); }
.empresa-icono .icono { width: 1.25rem; height: 1.25rem; }
.empresa-texto { display: grid; min-width: 0; line-height: 1.3; }
.empresa-rotulo { color: var(--sv-text-3); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); overflow-wrap: anywhere; }
.empresa-nombre { overflow: hidden; color: var(--sv-text-1); font-family: var(--sv-font-display); font-weight: var(--sv-weight-bold); text-overflow: ellipsis; white-space: nowrap; }

.menu { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sv-space-3) var(--sv-space-4); }
.menu-grupo { margin: var(--sv-space-5) var(--sv-space-3) var(--sv-space-1); color: var(--sv-text-3); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-semibold); }
.menu-grupo:first-child { margin-top: var(--sv-space-2); }
.menu ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a,
.cuenta {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  min-height: 2.25rem;
  padding: 0 var(--sv-space-3);
  border-radius: var(--sv-radius-md);
  color: var(--sv-text-2);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  text-decoration: none;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), color var(--sv-dur-fast) var(--sv-ease-standard);
}
.menu a .icono { color: var(--sv-text-3); transition: color var(--sv-dur-fast) var(--sv-ease-standard); }
.menu a:hover { background: var(--sv-surface-2); color: var(--sv-text-1); }
.menu a:hover .icono { color: var(--sv-text-2); }
.menu a[aria-current="page"] { background: var(--sv-surface-raised); color: var(--sv-text-1); box-shadow: var(--sv-shadow-xs), 0 0 0 1px var(--sv-border); }
.menu a[aria-current="page"] .icono { color: var(--sv-primary); }
@media (pointer: coarse) { .menu a { min-height: 2.75rem; } }

.lateral-pie { display: grid; gap: var(--sv-space-2); padding: var(--sv-space-3); padding-bottom: max(var(--sv-space-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--sv-border); }
.lateral-pie .sv-btn { justify-self: start; color: var(--sv-text-2); }
.lateral-pie .sv-btn:hover { background: var(--sv-surface-2); color: var(--sv-text-1); }
.cuenta { min-height: 3rem; padding: var(--sv-space-2); }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sv-radius-full);
  background: var(--sv-primary-soft);
  color: var(--sv-text-brand);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-bold);
  letter-spacing: 0.02em;
}
.cuenta-texto { display: grid; min-width: 0; line-height: 1.3; }
.cuenta-nombre { overflow: hidden; color: var(--sv-text-1); font-weight: var(--sv-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.cuenta-rol { overflow: hidden; color: var(--sv-text-3); font-size: var(--sv-text-xs); text-overflow: ellipsis; white-space: nowrap; }

/* Cabecera: el menú y el logo en el teléfono; la persona, su rol y «Cerrar sesión» siempre */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--sv-z-header);
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 3.5rem;
  padding: 0 var(--sv-space-2);
  padding-left: max(var(--sv-space-2), env(safe-area-inset-left));
  padding-right: max(var(--sv-space-2), env(safe-area-inset-right));
  background: var(--sv-bg);
  border-bottom: 1px solid var(--sv-border);
}
.cabecera-persona { display: flex; align-items: center; gap: var(--sv-space-3); min-width: 0; margin-left: auto; padding-right: var(--sv-space-1); }
.cabecera-persona .cuenta-texto { display: none; }
.cabecera-persona .rol { display: none; }
.cabecera-salir { display: none; }

/* Insignias de rol: un color por rol, y el texto siempre acompaña al color */
.rol {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem 0.125rem 0.4375rem;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface-2);
  color: var(--sv-text-2);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.rol::before { content: ""; flex: none; width: 0.375rem; height: 0.375rem; border-radius: var(--sv-radius-full); background: currentColor; }
.rol--owner { background: var(--sv-primary-soft); color: var(--sv-text-brand); border-color: color-mix(in srgb, var(--sv-primary) 35%, transparent); }
.rol--admin { background: var(--sv-info-bg); color: var(--sv-info); border-color: var(--sv-info-border); }
.rol--supervisor { background: var(--sv-warning-bg); color: var(--sv-warning); border-color: var(--sv-warning-border); }
.rol--agent { background: var(--sv-call-bg); color: var(--sv-call); border-color: var(--sv-call-border); }
.rol--propio { background: var(--sv-surface-1); color: var(--sv-text-1); border-color: var(--sv-border-strong); }

.vista {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sv-space-6) var(--sv-space-4) var(--sv-space-16);
  padding-left: max(var(--sv-space-4), env(safe-area-inset-left));
  padding-right: max(var(--sv-space-4), env(safe-area-inset-right));
}
@media (prefers-reduced-motion: no-preference) {
  .vista > * { animation: aparecer var(--sv-dur-base) var(--sv-ease-standard) both; }
}

@media (min-width: 40rem) {
  .cabecera-persona .rol { display: inline-flex; }
  .cabecera-salir { display: inline-flex; }
  .lateral-pie .sv-btn { display: none; }
}
@media (min-width: 48rem) {
  .vista { padding: var(--sv-space-8) var(--sv-space-8) var(--sv-space-16); }
  .cabecera { padding-inline: var(--sv-space-4); }
}
@media (min-width: 64rem) {
  .app { display: grid; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; min-height: 100vh; min-height: 100dvh; }
  .cabecera-menu, .lateral-cerrar, .fondo-menu, .marca--movil, .lateral-pie { display: none !important; }
  .cabecera { padding-inline: var(--sv-space-10); }
  .cabecera-persona .cuenta-texto { display: grid; }
  .lateral { position: sticky; top: 0; z-index: auto; width: auto; height: 100vh; height: 100dvh; transform: none; visibility: visible; box-shadow: none; transition: none; }
  .lateral.abierta { box-shadow: none; }
  .vista { padding: var(--sv-space-10) var(--sv-space-10) var(--sv-space-20); }
}

/* ---------- Cabecera de cada pantalla ---------- */

.cabecera-vista { margin: 0 0 var(--sv-space-6); }
.cabecera-vista h1 { margin: 0; }
.cabecera-vista p { max-width: 62ch; margin: var(--sv-space-2) 0 0; }

/* Barra de herramientas sobre las tablas: buscador a la izquierda, acción principal a la derecha */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-3); margin: 0 0 var(--sv-space-4); }
.herramientas .sv-campo { flex: 1; min-width: min(100%, 14rem); max-width: 24rem; margin: 0; }
.herramientas .empuje { margin-left: auto; }
.cuenta-filas { margin: 0 0 var(--sv-space-3); color: var(--sv-text-2); font-size: var(--sv-text-sm); }

/* ---------- Bloques ---------- */

.bloque { --pad: var(--sv-space-5); min-width: 0; margin: 0 0 var(--sv-space-5); }
.bloque.sv-tarjeta { padding: var(--pad); }
.bloque > h2 { margin-bottom: var(--sv-space-4); }
.bloque > h2:has(+ p.tenue) { margin-bottom: var(--sv-space-1); }
.bloque > h2:last-child { margin-bottom: 0; }
.bloque > h2 + p.tenue { max-width: 68ch; margin-bottom: var(--sv-space-5); font-size: var(--sv-text-sm); }
.bloque > h3:first-child { margin-top: 0; }
@media (min-width: 48rem) {
  .bloque { --pad: var(--sv-space-6); }
}

/* ---------- Inicio ---------- */

.saludo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2) var(--sv-space-3); margin: 0 0 var(--sv-space-1); }
.saludo h1 { margin: 0; overflow-wrap: anywhere; }
.rejilla-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--sv-space-4); align-items: start; margin-top: var(--sv-space-6); }
.rejilla-inicio .bloque { margin: 0; height: 100%; }

.ext-numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sv-space-2) var(--sv-space-3); margin: 0 0 var(--sv-space-1); }
.ext-numero b { font-family: var(--sv-font-mono); font-size: var(--sv-text-4xl); font-weight: var(--sv-weight-bold); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ext-nombre { margin: 0 0 var(--sv-space-4); color: var(--sv-text-2); }

.accesos { display: grid; gap: var(--sv-space-2); margin: 0; padding: 0; list-style: none; }
.accesos a {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface-raised);
  color: var(--sv-text-1);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  text-decoration: none;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), border-color var(--sv-dur-fast) var(--sv-ease-standard);
}
.accesos a:hover { background: var(--sv-surface-1); border-color: var(--sv-border-strong); }
.accesos .icono { color: var(--sv-primary); }
.accesos small { display: block; color: var(--sv-text-2); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-regular); }

/* Aviso de «confirma tu correo» sobre las tarjetas del inicio: el texto y el botón en una fila, y debajo cómo salió el reenvío */
.aviso-correo-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); }
.aviso-correo-fila p { flex: 1 1 18rem; }
.aviso-correo .aviso-correo-linea { margin-top: var(--sv-space-2); }
.aviso-correo .aviso-correo-linea:empty { margin-top: 0; }

/* ---------- Asistente de la primera llamada ---------- */

/* Una lista vertical, no tarjetas: la marca (número o palomita), el título con su estado escrito y el cuerpo */
.pasos { max-width: 44rem; margin: 0; padding: 0; list-style: none; }
.paso { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sv-space-4); padding: var(--sv-space-5) 0; border-top: 1px solid var(--sv-border); }
.paso:last-child { border-bottom: 1px solid var(--sv-border); }
.paso-marca { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--sv-border-strong); border-radius: var(--sv-radius-full); color: var(--sv-text-2); font-size: var(--sv-text-sm); font-variant-numeric: tabular-nums; }
.paso-marca .icono { width: 1rem; height: 1rem; }
.paso[data-estado="en-curso"] .paso-marca { border-color: var(--sv-primary); background: var(--sv-primary); color: var(--sv-on-primary); }
.paso[data-estado="hecho"] .paso-marca { border-color: var(--sv-success-border); background: var(--sv-success-bg); color: var(--sv-success); }
.paso-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-3); min-height: 2rem; margin: 0 0 var(--sv-space-2); }
.paso-cabecera h2 { margin: 0; font-size: var(--sv-text-lg); }
.paso[data-estado="pendiente"] .paso-cabecera h2 { color: var(--sv-text-2); }
.paso-estado { color: var(--sv-text-2); font-size: var(--sv-text-sm); }
.paso[data-estado="hecho"] .paso-estado { color: var(--sv-success); }
.paso-cuerpo { max-width: 40rem; }
.paso-cuerpo > * { margin: 0 0 var(--sv-space-3); }
.paso-cuerpo > :empty, .paso-cuerpo > :last-child { margin-bottom: 0; }
.paso-enlaces { padding-left: var(--sv-space-5); list-style: disc; }
.paso-enlaces li + li { margin-top: var(--sv-space-1); }
.paso-cuerpo .telefono-hueco { justify-items: start; margin-top: var(--sv-space-4); }

/* ---------- Formularios ---------- */

form { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--sv-space-4); }
.sv-campo { margin: 0 0 var(--sv-space-4); min-width: 0; }
.ayuda { color: var(--sv-text-2); font-size: var(--sv-text-sm); }
small.ayuda { display: block; }
.sv-campo__ayuda.ayuda { font-size: var(--sv-text-xs); }
textarea.sv-campo__control { min-height: 6rem; padding: var(--sv-space-2) var(--sv-space-3); font-family: var(--sv-font-mono); line-height: var(--sv-leading-normal); resize: vertical; }
input[readonly].sv-campo__control { background: var(--sv-surface-1); font-family: var(--sv-font-mono); }
input.mono.sv-campo__control { font-family: var(--sv-font-mono); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0 var(--sv-space-2) 0 0; accent-color: var(--sv-primary); vertical-align: -0.2em; }
.sv-campo__control[aria-invalid="true"] { border-color: var(--sv-danger); box-shadow: 0 0 0 3px var(--sv-danger-bg); }
.sv-campo__control:disabled { background: var(--sv-surface-2); color: var(--sv-text-3); cursor: not-allowed; }

/* Contraseñas con ojo para verlas: la caja envuelve el campo y el botón queda adentro, a la derecha */
.clave-caja { position: relative; display: block; min-width: 0; }
.clave-caja > .sv-campo__control { padding-right: 2.75rem; }
.ojo {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius-sm);
  background: transparent;
  color: var(--sv-text-2);
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), color var(--sv-dur-fast) var(--sv-ease-standard);
}
.ojo:hover { background: var(--sv-surface-2); color: var(--sv-text-1); }
.ojo[aria-pressed="true"] { color: var(--sv-text-brand); }
.ojo .icono { width: 1.125rem; height: 1.125rem; }
.bloq-mayus:empty { display: none; }
.bloq-mayus { display: flex; align-items: center; gap: var(--sv-space-1); margin: 0; color: var(--sv-warning); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); }
.bloq-mayus .icono { width: 0.95rem; height: 0.95rem; }

/* Opciones (los roles, el usuario de una extensión): fila con borde que se marca entera al elegirla */
.opcion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sv-space-3);
  margin: 0 0 var(--sv-space-2);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface-raised);
  cursor: pointer;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), border-color var(--sv-dur-fast) var(--sv-ease-standard);
}
.opcion:hover { border-color: var(--sv-border-strong); }
.opcion > input { grid-row: span 2; margin: 0.15rem 0 0; }
.opcion b { font-weight: var(--sv-weight-semibold); font-size: var(--sv-text-sm); }
.opcion .ayuda { grid-column: 2; display: block; margin: 0.125rem 0 0; font-size: var(--sv-text-xs); }
.opcion:has(:checked) { background: var(--sv-primary-soft); border-color: color-mix(in srgb, var(--sv-primary) 40%, var(--sv-border)); }
.opcion:has(:disabled) { cursor: not-allowed; opacity: 0.7; }
.opcion:has(:focus-visible) { outline: 2px solid var(--sv-focus); outline-offset: 2px; }
.opcion input:focus-visible { outline: none; }

/* Roles: la matriz de permisos, un grupo por módulo y una casilla por permiso */
.permisos { margin: var(--sv-space-2) 0 0; }
.permisos fieldset { margin: 0 0 var(--sv-space-4); }
.permisos legend { color: var(--sv-text-2); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.opcion.permiso { margin-bottom: var(--sv-space-1); padding: var(--sv-space-2) var(--sv-space-3); }
.opcion.permiso .razon { color: var(--sv-warning); font-weight: var(--sv-weight-medium); }

fieldset { min-width: 0; margin: 0 0 var(--sv-space-4); padding: 0; border: 0; }
legend { padding: 0; margin: 0 0 var(--sv-space-2); font-size: var(--sv-text-sm); font-weight: var(--sv-weight-medium); }

/* Interruptor (la política de la empresa) */
.interruptor { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sv-space-1) var(--sv-space-4); }
.interruptor input {
  appearance: none;
  position: relative;
  grid-row: span 2;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  border: 1px solid var(--sv-border-strong);
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface-3);
  cursor: pointer;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), border-color var(--sv-dur-fast) var(--sv-ease-standard);
}
.interruptor input::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface-raised);
  box-shadow: var(--sv-shadow-xs);
  transition: transform var(--sv-dur-fast) var(--sv-ease-standard);
}
.interruptor input:checked { background: var(--sv-primary); border-color: var(--sv-primary); }
.interruptor input:checked::after { transform: translateX(1.25rem); }
.interruptor input:focus-visible { outline: 2px solid var(--sv-focus); outline-offset: 2px; }
.interruptor input:disabled { opacity: 0.6; cursor: progress; }
.interruptor label { font-weight: var(--sv-weight-semibold); cursor: pointer; }
.interruptor .ayuda { grid-column: 2; margin: 0; }
/* En un formulario, el interruptor deja el mismo aire que un campo antes del siguiente. */
dialog form .interruptor,
dialog form .sigueme-numeros { margin-bottom: var(--sv-space-4); }
/* La nota de un campo sin opciones queda a la altura del control vecino. */
.nota-campo .ayuda { display: flex; align-items: center; min-height: 2.25rem; margin: 0; }

/* ---------- Botones ---------- */

.sv-btn.es-peligro { color: var(--sv-danger); border-color: var(--sv-danger-border); }
.sv-btn.es-peligro:hover { background: var(--sv-danger-bg); }
.sv-btn[aria-busy="true"] { cursor: progress; }
.sv-btn .icono { width: 1.05em; height: 1.05em; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin-top: var(--sv-space-2); }

/* ---------- Avisos y estados ---------- */

/* El contenedor existe siempre (lo leen los lectores de pantalla) y se pliega vacío */
.aviso-vivo { margin: 0; }
.aviso-vivo:empty { min-height: 0; padding: 0; border: 0; }
.aviso-vivo.sv-aviso { margin: 0 0 var(--sv-space-4); overflow-wrap: anywhere; }
.sv-aviso + .sv-aviso { margin-top: var(--sv-space-3); }
.vista > .sv-aviso, .bloque > .sv-aviso { margin-bottom: var(--sv-space-4); }
@media (prefers-reduced-motion: no-preference) {
  .aviso-vivo.sv-aviso:not(:empty) { animation: subir var(--sv-dur-base) var(--sv-ease-out); }
}

.cargando { display: flex; align-items: center; gap: var(--sv-space-3); padding: var(--sv-space-6) 0; color: var(--sv-text-2); font-size: var(--sv-text-sm); }
.cargando::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--sv-border-strong);
  border-top-color: var(--sv-primary);
  border-radius: var(--sv-radius-full);
}
@media (prefers-reduced-motion: no-preference) {
  .cargando::before { animation: giro 0.8s linear infinite; }
}
@keyframes giro { to { transform: rotate(360deg); } }

/* Estado vacío: un ícono, qué pasa y, si hay, qué hacer */
.vacio {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-2);
  margin: 0 0 var(--sv-space-4);
  padding: var(--sv-space-10) var(--sv-space-4);
  border: 1px dashed var(--sv-border-strong);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface-1);
  color: var(--sv-text-2);
  font-size: var(--sv-text-sm);
  text-align: center;
  text-wrap: balance;
}
.vacio h2 { margin: 0; font-size: var(--sv-text-md); }
.vacio p { max-width: 44ch; margin: 0; }
.vacio .vacio-icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--sv-radius-full); background: var(--sv-surface-2); color: var(--sv-text-3); }
.vacio .vacio-icono .icono { width: 1.5rem; height: 1.5rem; }
.vacio .acciones { justify-content: center; margin-top: var(--sv-space-3); }

/* ---------- Tablas ---------- */

.sv-tabla-caja { margin: 0 0 var(--sv-space-4); }
.sv-tabla-caja:focus-visible { outline: 2px solid var(--sv-focus); outline-offset: 2px; }
.sv-tabla td { vertical-align: middle; overflow-wrap: anywhere; }
.sv-tabla th { text-align: left; }
.sv-tabla td.principal-celda { font-weight: var(--sv-weight-semibold); }
.sv-tabla .secundaria { display: block; color: var(--sv-text-2); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-regular); }
.sv-tabla .mono { font-family: var(--sv-font-mono); font-variant-numeric: tabular-nums; }
.sv-tabla .tenue-celda { color: var(--sv-text-3); }
.sv-tabla tr.fila-inactiva td { color: var(--sv-text-2); }
td.acciones-celda { min-width: 11rem; }
td.acciones-celda .sv-btn { margin: 0 var(--sv-space-1) var(--sv-space-1) 0; }
.sv-tabla td .acciones { margin-top: 0; }

/* En pantallas angostas cada fila pasa a ser una ficha: la primera celda es el título
   y las demás llevan su rótulo (data-label). La bitácora se queda como tabla con desplazamiento. */
@media (max-width: 47.99rem) {
  .sv-tabla-caja:not(.desplazar) { overflow: visible; border: 0; background: none; }
  .sv-tabla-caja:not(.desplazar) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .sv-tabla-caja:not(.desplazar) :is(table, tbody, tr) { display: block; }
  .sv-tabla-caja:not(.desplazar) tr {
    margin: 0 0 var(--sv-space-3);
    padding: var(--sv-space-3) var(--sv-space-4);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    background: var(--sv-surface-raised);
  }
  .sv-tabla-caja:not(.desplazar) tbody tr:hover td { background: none; }
  .sv-tabla-caja:not(.desplazar) .sv-tabla td {
    display: grid;
    grid-template-columns: minmax(6rem, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 0 var(--sv-space-3);
    padding: var(--sv-space-1) 0;
    border: 0;
    text-align: left;
  }
  .sv-tabla-caja:not(.desplazar) td[data-label]::before { content: attr(data-label); grid-row: span 9; align-self: start; padding-top: 0.1rem; color: var(--sv-text-2); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); }
  .sv-tabla-caja:not(.desplazar) .sv-tabla td:first-child { display: block; padding: 0 0 var(--sv-space-2); font-size: var(--sv-text-base); font-weight: var(--sv-weight-semibold); }
  .sv-tabla-caja:not(.desplazar) td:first-child::before { display: none; }
  .sv-tabla-caja:not(.desplazar) .sv-tabla td:is(:not([data-label]), [data-label=""]) { display: block; }
  .sv-tabla-caja:not(.desplazar) td[data-label=""]::before { display: none; }
  .sv-tabla-caja:not(.desplazar) .sv-tabla td.acciones-celda { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); min-width: 0; margin-top: var(--sv-space-2); padding-top: var(--sv-space-3); border-top: 1px solid var(--sv-border); }
  .sv-tabla-caja:not(.desplazar) td.acciones-celda::before { display: none; }
  .sv-tabla-caja:not(.desplazar) td.acciones-celda .sv-btn { margin: 0; }
}

/* ---------- Datos, copiar y claves ---------- */

dl.datos { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); margin: 0 0 var(--sv-space-4); font-size: var(--sv-text-sm); }
dl.datos dt, dl.datos dd { padding: var(--sv-space-2) 0; border-bottom: 1px solid var(--sv-border); }
dl.datos dt { padding-right: var(--sv-space-6); color: var(--sv-text-2); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }
dl.datos > :nth-last-child(-n + 2) { border-bottom: 0; }
/* Calidad de audio en el detalle de una llamada (F35): los subtítulos por debajo del h3, los hallazgos al tamaño de los datos y las
   listas alineadas entre sí */
.calidad-audio h4 { margin: var(--sv-space-4) 0 var(--sv-space-1); font-size: var(--sv-text-sm); font-weight: var(--sv-weight-semibold); color: var(--sv-text-2); }
.calidad-audio ul { margin: 0 0 var(--sv-space-2); padding-left: var(--sv-space-5); font-size: var(--sv-text-sm); }
.calidad-audio li + li { margin-top: var(--sv-space-1); }
@media (min-width: 40.01rem) {
  .calidad-audio dl.datos { grid-template-columns: 12rem minmax(0, 1fr); }
}

.copiable { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.copiable > .sv-campo__control, .copiable > .clave-caja { flex: 1; width: auto; min-width: min(100%, 12rem); }
.copiable > .clave-caja > .sv-campo__control { width: 100%; }
.copiable > .bloq-mayus { flex-basis: 100%; }

.clave-nueva { margin: 0 0 var(--sv-space-4); padding: var(--sv-space-4); border: 1px solid var(--sv-warning-border); border-radius: var(--sv-radius-lg); background: var(--sv-warning-bg); }
.clave-nueva h3 { margin-top: 0; color: var(--sv-warning); }
.clave-nueva .copiable { margin: 0 0 var(--sv-space-3); }
@media (prefers-reduced-motion: no-preference) {
  .clave-nueva { animation: subir var(--sv-dur-slow) var(--sv-ease-out); }
}

/* Alta de la verificación en dos pasos: el código QR al lado de los pasos */
.alta-totp { display: grid; gap: var(--sv-space-5); margin: 0 0 var(--sv-space-5); }
.alta-totp ol { margin: 0; padding-left: 1.25rem; }
.alta-totp li { margin: 0 0 var(--sv-space-2); }
.qr-caja { display: grid; justify-items: center; align-content: start; gap: var(--sv-space-2); }
canvas.qr { display: block; width: 11rem; height: 11rem; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: #ffffff; image-rendering: pixelated; }
.qr-caja .ayuda { margin: 0; text-align: center; }
@media (min-width: 40rem) {
  .alta-totp { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

/* ---------- Diálogos propios (confirmaciones y formularios) ---------- */

dialog {
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--sv-space-6);
  border: 0;
  border-radius: var(--sv-radius-xl);
  background: var(--sv-surface-raised);
  color: var(--sv-text-1);
  box-shadow: var(--sv-shadow-pop);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.amplio { width: min(34rem, calc(100% - 2rem)); }
dialog::backdrop { background: var(--sv-overlay); }
dialog h2 { margin: 0 0 var(--sv-space-2); font-size: var(--sv-text-lg); }
dialog > p, dialog form > p:not(.aviso-vivo) { color: var(--sv-text-2); font-size: var(--sv-text-sm); }
dialog .acciones { justify-content: flex-end; margin-top: var(--sv-space-6); }
.dialogo-icono { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0 0 var(--sv-space-4); border-radius: var(--sv-radius-full); background: var(--sv-danger-bg); color: var(--sv-danger); }
.dialogo-icono.es-info { background: var(--sv-primary-soft); color: var(--sv-text-brand); }
.dialogo-icono .icono { width: 1.25rem; height: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: dialogo var(--sv-dur-slow) var(--sv-ease-out); }
  dialog[open]::backdrop { animation: aparecer var(--sv-dur-base) var(--sv-ease-standard); }
}
@keyframes dialogo { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Mi teléfono ---------- */

.telefono-hueco { display: grid; justify-items: center; }
/* Flotante (en cualquier pantalla menos «Mi teléfono»): anclado abajo a la derecha; en pantallas angostas ocupa el ancho con 16 px a cada lado.
   El teléfono es el componente <sao-vox-phone> del SDK (trae sus propios estilos); aquí solo el marco y la cabecera. */
.softphone {
  position: fixed;
  right: var(--sv-space-4);
  bottom: var(--sv-space-4);
  z-index: var(--sv-z-overlay);
  display: grid;
  gap: var(--sv-space-3);
  width: min(24rem, calc(100% - 2 * var(--sv-space-4)));
  max-height: calc(100vh - 2 * var(--sv-space-4));
  max-height: calc(100dvh - 2 * var(--sv-space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sv-space-3);
  border: 0;
  border-radius: var(--sv-radius-xl);
  background: var(--sv-surface-raised);
  color: var(--sv-text-1);
  box-shadow: var(--sv-shadow-pop);
}
.softphone.en-vista { position: static; width: min(26rem, 100%); max-height: none; overflow: visible; border: 1px solid var(--sv-border); box-shadow: var(--sv-shadow-sm); }
.softphone-cabecera { display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-1); }
.softphone-quien { display: grid; flex: 1; min-width: 0; line-height: var(--sv-leading-snug); }
.softphone-quien strong { font-family: var(--sv-font-display); }
.softphone-quien .tenue { font-size: var(--sv-text-sm); overflow-wrap: anywhere; }
.softphone .aviso-vivo.sv-aviso { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .softphone { animation: subir var(--sv-dur-slow) var(--sv-ease-out); }
}

/* ---------- Reuniones y chat ---------- */

/* Mías / Todas: dos opciones juntas, una marcada */
.segmento { display: inline-flex; padding: 2px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-1); }
.segmento-opcion {
  min-height: 2rem;
  padding: 0 var(--sv-space-4);
  border: 0;
  border-radius: var(--sv-radius-sm);
  background: transparent;
  color: var(--sv-text-2);
  font: inherit;
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  cursor: pointer;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-standard), color var(--sv-dur-fast) var(--sv-ease-standard);
}
.segmento-opcion:hover { color: var(--sv-text-1); }
.segmento-opcion[aria-pressed="true"] { background: var(--sv-surface-raised); color: var(--sv-text-1); box-shadow: var(--sv-shadow-xs), 0 0 0 1px var(--sv-border); }
@media (pointer: coarse) { .segmento-opcion { min-height: 2.5rem; } }

/* La sala y el chat ocupan el área de contenido, de la cabecera al borde de abajo (también en el teléfono).
   Los componentes <sao-vox-meeting> y <sao-vox-chat> traen height: 100% y un alto mínimo; aquí se estiran con la rejilla. */
.vista.vista--llena {
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: calc(100vh - 3.5rem - 1px);
  min-height: calc(100dvh - 3.5rem - 1px);
  padding: var(--sv-space-3);
  padding-left: max(var(--sv-space-3), env(safe-area-inset-left));
  padding-right: max(var(--sv-space-3), env(safe-area-inset-right));
  padding-bottom: max(var(--sv-space-3), env(safe-area-inset-bottom));
}
@media (min-width: 48rem) {
  .vista.vista--llena { padding: var(--sv-space-4) var(--sv-space-6) var(--sv-space-6); }
}
@media (min-width: 64rem) {
  .vista.vista--llena { padding: var(--sv-space-5) var(--sv-space-8) var(--sv-space-8); }
}
.sala { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sv-space-3); min-width: 0; }
.sala-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); }
.sala-titulo { display: flex; flex: 1 1 16rem; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-3); min-width: 0; }
.sala-titulo h1 { margin: 0; font-size: var(--sv-text-xl); overflow-wrap: anywhere; }
.sala-acciones { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.sala .aviso-vivo.sv-aviso { margin: 0; }
.escenario { display: grid; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 28rem; }
.escenario > :is(sao-vox-meeting, sao-vox-chat) { height: auto; min-width: 0; border-radius: var(--sv-radius-lg); overflow: hidden; }
.escenario > .vacio { align-self: start; margin: 0; }

@media (max-width: 40rem) {
  dl.datos { grid-template-columns: minmax(0, 1fr); }
  dl.datos dt { padding-bottom: 0; border-bottom: 0; }
  dl.datos dd { padding-top: 0.125rem; }
  dialog { padding: var(--sv-space-5); }
  dialog .acciones { flex-direction: column-reverse; align-items: stretch; }
  dialog .acciones .sv-btn { width: 100%; }
}

/* ---------- Llamadas y reportes ---------- */

/* Las secciones de Llamadas: enlaces de navegación con la actual subrayada */
.pestanas { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); margin: 0 0 var(--sv-space-5); border-bottom: 1px solid var(--sv-border); }
.pestanas a {
  margin-bottom: -1px;
  padding: var(--sv-space-2) var(--sv-space-4);
  border-bottom: 2px solid transparent;
  color: var(--sv-text-2);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  text-decoration: none;
}
.pestanas a:hover { color: var(--sv-text-1); }
.pestanas a[aria-current="page"] { border-bottom-color: var(--sv-primary); color: var(--sv-text-1); }
.pestanas a:focus-visible { outline: 2px solid var(--sv-focus); outline-offset: -2px; border-radius: var(--sv-radius-sm); }
@media (pointer: coarse) { .pestanas a { padding-block: var(--sv-space-3); } }

/* Filtros sobre las listas: campos en rejilla y los botones debajo */
.filtros { margin: 0 0 var(--sv-space-5); }
.filtros .rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.filtros .acciones { margin-top: 0; }
.filtros .acciones .empuje { margin-left: auto; }

.sv-tabla tr.fila-clicable { cursor: pointer; }
.sv-tabla tr.fila-total td { background: var(--sv-surface-1); font-weight: var(--sv-weight-semibold); }

/* Colas en vivo: una tarjeta por cola con tres cifras */
.rejilla-colas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sv-space-3); margin: 0 0 var(--sv-space-5); }
.cola-viva { min-width: 0; padding: var(--sv-space-4); }
.cola-viva h3 { margin: 0; font-size: var(--sv-text-md); overflow-wrap: anywhere; }
.cola-viva p { margin: 0 0 var(--sv-space-3); font-size: var(--sv-text-sm); }
.cola-viva p:last-child { margin: var(--sv-space-3) 0 0; }
.cola-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--sv-space-2); margin: 0; }
.selector-colas { max-height: 14rem; overflow-y: auto; }
.cola-cifras dt { color: var(--sv-text-2); font-size: var(--sv-text-xs); }
.cola-cifras dd { margin: 0; font-family: var(--sv-font-mono); font-size: var(--sv-text-xl); font-weight: var(--sv-weight-bold); font-variant-numeric: tabular-nums; }

/* Panel en vivo (F28): con una alerta de SLA encendida la tarjeta de la cola pasa a los tokens de peligro; en pantalla completa todo crece para leerse desde lejos */
.panel-vivo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-3); margin: 0 0 var(--sv-space-4); font-size: var(--sv-text-sm); }
.panel-vivo__acciones { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin-left: auto; }
.cola-viva--alerta { background: var(--sv-danger-bg); border-color: var(--sv-danger-border); }
.cola-viva--alerta h3 { color: var(--sv-danger); }
.cola-alertas { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-3); padding: 0; list-style: none; }
.panel-vivo--completo { padding: var(--sv-space-6); overflow: auto; background: var(--sv-bg); }
.panel-vivo--completo .panel-vivo__barra { font-size: var(--sv-text-md); }
.panel-vivo--completo .rejilla-colas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.panel-vivo--completo .cola-viva h3 { font-size: var(--sv-text-xl); }
.panel-vivo--completo .cola-viva p { font-size: var(--sv-text-md); }
.panel-vivo--completo .cola-cifras dt { font-size: var(--sv-text-sm); }
.panel-vivo--completo .cola-cifras dd { font-size: var(--sv-text-3xl); }
.panel-vivo--completo .sv-tabla { font-size: var(--sv-text-lg); }

/* Mi enlace (F31): la página pública /l/ en pequeño, en el diálogo de compartir */
.enlace-previa { margin: 0 0 var(--sv-space-4); }
.enlace-previa__tarjeta { max-width: 20rem; margin: 0 auto var(--sv-space-2); padding: var(--sv-space-5) var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg); background: var(--sv-surface-1); text-align: center; }
.enlace-previa__tarjeta p { margin: 0; }
.enlace-previa__marca { margin-bottom: var(--sv-space-3) !important; color: var(--sv-text-3); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.enlace-previa__titulo { margin-bottom: var(--sv-space-2) !important; font-family: var(--sv-font-display); font-size: var(--sv-text-lg); font-weight: var(--sv-weight-bold); overflow-wrap: anywhere; }
.enlace-previa__ayuda { margin-bottom: var(--sv-space-4) !important; color: var(--sv-text-2); font-size: var(--sv-text-sm); }
.enlace-previa__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sv-space-2); }
.enlace-previa__boton { flex: 1 1 6rem; padding: var(--sv-space-2) var(--sv-space-4); border: 1px solid var(--sv-primary); border-radius: var(--sv-radius-md); background: var(--sv-primary); color: var(--sv-on-primary); font-size: var(--sv-text-sm); font-weight: var(--sv-weight-semibold); }
.enlace-previa__boton--sec { background: transparent; border-color: var(--sv-border-strong); color: var(--sv-text-1); }
.enlace-previa figcaption { margin: 0; text-align: center; }

/* Grabaciones y detalle de una llamada */
.reproductor { display: grid; gap: var(--sv-space-2); justify-items: start; min-width: 0; margin: 0 0 var(--sv-space-3); }
.reproductor audio { width: min(100%, 22rem); }
.reproductor .aviso-vivo.sv-aviso { margin: 0; }
td.acciones-celda .reproductor { margin: 0; }
.patas { margin: 0 0 var(--sv-space-3); font-size: var(--sv-text-sm); }
.patas summary { cursor: pointer; color: var(--sv-text-2); }
.patas ul { margin: var(--sv-space-2) 0 0; padding-left: 1.25rem; }
.patas li { margin: 0 0 var(--sv-space-1); overflow-wrap: anywhere; }

/* Reportes: la barra de cada fila, a escala del total más grande (--escala va de 0 a 100) */
.barra { display: block; min-width: 4rem; height: 0.375rem; margin-top: var(--sv-space-1); border-radius: var(--sv-radius-full); background: var(--sv-surface-2); overflow: hidden; }
.barra::after { content: ""; display: block; width: calc(var(--escala, 0) * 1%); height: 100%; border-radius: inherit; background: var(--sv-primary); }

/* Ruteo de entrada: tramos por día, feriados y miembros de un grupo (los formularios de Horarios y Grupos) */
.dia-horario { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sv-space-2) var(--sv-space-3); padding: var(--sv-space-3) 0; border-top: 1px solid var(--sv-border); }
.dia-horario:last-child { border-bottom: 1px solid var(--sv-border); }
.dia-nombre { padding-top: 0.5rem; font-size: var(--sv-text-sm); font-weight: var(--sv-weight-semibold); }
.tramos, .feriados { display: grid; gap: var(--sv-space-2); justify-items: start; min-width: 0; }
.feriados { justify-items: stretch; margin-bottom: var(--sv-space-3); }
.tramo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.tramo .sv-campo__control { width: auto; min-width: 0; }
.tramo input[type="text"].sv-campo__control { flex: 1 1 10rem; }
.miembros-lista { margin: 0 0 var(--sv-space-3); padding: 0; list-style: none; counter-reset: miembro; }
.miembro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-1); padding: var(--sv-space-2) var(--sv-space-3); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-raised); counter-increment: miembro; }
.miembro-nombre { min-width: 0; overflow-wrap: anywhere; }
.miembro-nombre::before { content: counter(miembro) ". "; color: var(--sv-text-2); font-variant-numeric: tabular-nums; }
.miembro-acciones { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); }
/* IVR: cada tecla con su destino, en una ficha */
.tecla { margin: 0 0 var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-raised); }
.tecla fieldset { margin: 0 0 var(--sv-space-2); }
@media (max-width: 30rem) {
  .dia-horario { grid-template-columns: minmax(0, 1fr); }
  .dia-nombre { padding-top: 0; }
}

/* Teléfonos de escritorio: volver a la lista, pasos de la URL, red de oficina y las teclas programables (una fila por tecla) */
.volver { margin: 0 0 var(--sv-space-3); }
dl.datos .secundaria { display: block; color: var(--sv-text-2); font-size: var(--sv-text-xs); }
ol.instrucciones { margin: 0 0 var(--sv-space-4); padding-left: var(--sv-space-5); font-size: var(--sv-text-sm); }
ol.instrucciones li { margin: 0 0 var(--sv-space-1); }
.form-red { margin: 0 0 var(--sv-space-5); }
.form-red-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sv-space-4); }
.teclas-editor { container-type: inline-size; }
.teclas-lista { margin: 0 0 var(--sv-space-3); padding: 0; list-style: none; counter-reset: tecla-tel; }
.tecla-tel, .tecla-tel-cabecera { display: grid; grid-template-columns: 2rem minmax(10rem, 13rem) minmax(0, 1fr) minmax(0, 1fr) 13rem; align-items: center; gap: var(--sv-space-2); }
.tecla-tel { margin: 0 0 var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-raised); counter-increment: tecla-tel; }
.tecla-tel::before { content: counter(tecla-tel); color: var(--sv-text-2); font-variant-numeric: tabular-nums; }
.tecla-tel .sv-campo__control { width: 100%; min-width: 0; }
.tecla-tel-nota { margin: 0; }
.tecla-tel-acciones { display: flex; gap: var(--sv-space-1); }
.tecla-tel-cabecera { margin: 0 0 var(--sv-space-1); padding: 0 var(--sv-space-3); border: 1px solid transparent; color: var(--sv-text-2); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); }
@container (max-width: 46rem) {
  .tecla-tel { grid-template-columns: 2rem minmax(0, 1fr); }
  .tecla-tel > * { grid-column: 2; }
  .tecla-tel::before { grid-column: 1; grid-row: 1; }
  .tecla-tel-cabecera { display: none; }
  .tecla-tel-acciones { flex-wrap: wrap; }
}

/* F26: modo emergencia y consulta al CRM */
.estado-ruteo { display: grid; gap: var(--sv-space-2); }
.estado-ruteo h2, .estado-ruteo p { margin: 0; }
.estado-ruteo.es-activa { border-color: var(--sv-danger-border); background: var(--sv-danger-bg); }
.resultado-prueba { margin: 0 0 var(--sv-space-5); }
.ejemplo-json { margin: var(--sv-space-2) 0 var(--sv-space-3); padding: var(--sv-space-3); overflow-x: auto; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-2); font-size: var(--sv-text-sm); }
details.bloque > summary { cursor: pointer; font-weight: 600; margin-bottom: var(--sv-space-3); }

/* F28: las columnas del formato del CDR, con sus flechas para ordenarlas. */
.lista-columnas { list-style: none; margin: 0 0 var(--sv-space-4); padding: 0; display: grid; gap: var(--sv-space-1); }
.lista-columnas li { display: flex; align-items: center; gap: var(--sv-space-2); }
.lista-columnas .opcion { flex: 1; margin: 0; }

/* F33: diseñador visual del IVR. El árbol va de izquierda a derecha en su propio lienzo, que se desplaza en horizontal sin ensanchar la página. */
.diseno-ivr { --dis-hueco: 1.75rem; min-width: 0; }
.dis-lienzo { max-width: 100%; overflow-x: auto; padding: var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-1); }
.dis-arbol, .dis-ramas { margin: 0; padding: 0; list-style: none; }
.dis-arbol { width: max-content; }
.dis-item { display: flex; align-items: center; }
.dis-fila { display: flex; flex: none; align-items: center; gap: var(--sv-space-2); }
.dis-ramas { position: relative; display: flex; flex-direction: column; margin-left: var(--dis-hueco); }
/* Los trazos: del nodo al tronco, y del tronco a cada rama (la raya vertical une a las hermanas). */
.dis-ramas::before, .dis-rama::before { content: ""; position: absolute; top: 50%; width: var(--dis-hueco); border-top: 1px solid var(--sv-border-strong); }
.dis-ramas::before { left: calc(var(--dis-hueco) * -1); }
.dis-rama { position: relative; padding: var(--sv-space-2) 0 var(--sv-space-2) var(--dis-hueco); }
.dis-rama::before { left: 0; }
.dis-rama::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid var(--sv-border-strong); }
.dis-rama:first-child::after { top: 50%; }
.dis-rama:last-child::after { bottom: 50%; }
.dis-rama:only-child::after { display: none; }
.dis-clave { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0 var(--sv-space-2); border: 1px solid var(--sv-border-strong); border-radius: var(--sv-radius-full); background: var(--sv-primary-soft); color: var(--sv-text-brand); font-family: var(--sv-font-mono); font-size: var(--sv-text-sm); font-weight: var(--sv-weight-semibold); white-space: nowrap; }
.dis-clave--texto { font-family: inherit; font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); }
.dis-columna { display: grid; flex: none; gap: var(--sv-space-2); justify-items: start; }
.dis-caja { display: grid; gap: var(--sv-space-1); width: 15rem; padding: var(--sv-space-3); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); background: var(--sv-surface-raised); }
.dis-caja--ivr { border-color: var(--sv-primary); }
.dis-caja--enlace { border-style: dashed; background: transparent; }
.dis-caja.tiene-error { border-color: var(--sv-danger-border); background: var(--sv-danger-bg); }
.dis-caja .sv-campo { margin: 0; }
.dis-tipo { color: var(--sv-text-brand); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-semibold); }
.dis-titulo { color: var(--sv-text-1); font-weight: var(--sv-weight-semibold); overflow-wrap: anywhere; }
.dis-detalle { color: var(--sv-text-2); font-size: var(--sv-text-xs); overflow-wrap: anywhere; }
.dis-acciones { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); width: 15rem; }
.dis-error { width: 15rem; margin: 0; color: var(--sv-danger); font-size: var(--sv-text-xs); overflow-wrap: anywhere; }
.dis-caja .dis-error { width: auto; }
.dis-vuelve { height: auto; justify-content: flex-start; text-align: left; white-space: normal; }
@media (max-width: 40rem) {
  .diseno-ivr { --dis-hueco: 1.25rem; }
  .dis-lienzo { padding: var(--sv-space-3); }
  .dis-caja, .dis-acciones, .dis-error { width: 12.5rem; }
}

/* Usuarios: la ficha de cada persona. En el teléfono las pestañas son una lista que se despliega. */
.migas { margin: 0 0 var(--sv-space-3); }
.ficha-lista { display: none; margin: 0 0 var(--sv-space-5); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); }
.ficha-lista summary { padding: var(--sv-space-3) var(--sv-space-4); color: var(--sv-text-1); font-weight: 600; cursor: pointer; }
.ficha-lista nav { display: flex; flex-direction: column; border-top: 1px solid var(--sv-border); }
.ficha-lista nav a { padding: var(--sv-space-3) var(--sv-space-4); color: var(--sv-text-2); text-decoration: none; }
.ficha-lista nav a[aria-current="page"] { color: var(--sv-text-1); font-weight: 600; }
.ficha-lista nav a:focus-visible { outline: 2px solid var(--sv-focus); outline-offset: -2px; }
@media (max-width: 40rem) {
  .ficha-pestanas { display: none; }
  .ficha-lista { display: block; }
}
/* La parte opcional del alta (buzón y desvíos), plegada. */
.plegable { margin: 0 0 var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); padding: var(--sv-space-3) var(--sv-space-4); }
.plegable summary { color: var(--sv-text-1); font-weight: 600; cursor: pointer; }