/* ═══════════════════════════════════════════════════════════════════════
   VIDRIO FLASH — rediseño del CRM, opción A (aprobada por el dueño,
   2026-10-27). Se carga DESPUÉS de styles.css y resumen.css: sólo cambia el
   aspecto; ninguna regla de acá agrega ni quita comportamiento.

   1. Fondo de losas pintado UNA vez en el <body>, que no se desplaza (lo
      que se desplaza es `.main`). Sin `backdrop-filter` en nada que se
      desplace: en el ERP bajó las tabletas a 15 fps. Sólo el fondo de los
      diálogos lo usa.
   2. Una ventana de vidrio (translúcida, SIN desenfoque) flota sobre las
      losas: barra lateral clara con barra lima en el ítem activo, barra
      superior sin franja y tarjetas de vidrio.
   3. UNA tarjeta destacada por fila, en el degradado violeta oscurecido
      para que el blanco dé 4.5:1 en su punto más claro (#6858FF, 4.7:1).
   4. Todo lo que flota (menús, hojas, diálogos, avisos) es OPACO.
   5. Teléfono: sin ventana, barra inferior al alcance del pulgar, tablas
      como tarjetas, bandeja lista → chat con «Volver».
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --vidrio-ventana: rgb(246 246 250 / 0.8);
  --vidrio-ventana-filo: rgb(255 255 255 / 0.8);
  --vidrio-tarjeta: rgb(255 255 255 / 0.72);
  --vidrio-tarjeta-filo: rgb(255 255 255 / 0.9);
  --vidrio-chat: rgb(255 255 255 / 0.42);
  --vidrio-hover: rgb(255 255 255 / 0.6);
  --vidrio-raya: rgb(17 18 24 / 0.06);
  --vidrio-surco: rgb(17 18 24 / 0.06);
  --segmento-activo: var(--surface);
  --destacada: linear-gradient(135deg, #6858ff 0%, #5b4bff 45%, #4b3be0 100%);
  --sombra-tarjeta: 0 1px 2px rgb(17 18 24 / 0.04);
  --sombra-elegida: 0 1px 2px rgb(17 18 24 / 0.08);
  --sombra-flotante: 0 1px 2px rgb(17 18 24 / 0.08), 0 24px 48px -12px rgb(17 18 24 / 0.36);
  --shadow-lg: var(--sombra-flotante);
  --shadow-md: var(--sombra-flotante);
  --fondo-overlay: rgb(17 18 24 / 0.56);

  /* Las series de los gráficos: violeta de marca y naranja (resumen.css). */
  --viz-1: #5b4bff;

  /* El chat usa el violeta de la marca para lo elegido y los enlaces. */
  --chat-acento: #5b4bff;
  --chat-enlace: #4838e6;
  --chat-cita: rgb(17 18 24 / 0.05);

  /* Losas: dos luces suaves y la retícula de 96px con su bisel. */
  --losas:
    radial-gradient(640px 420px at 8% 0%, rgb(123 108 255 / 0.3), transparent 70%),
    radial-gradient(520px 520px at 96% 100%, rgb(101 163 13 / 0.12), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.38) 0 1px, rgb(17 18 24 / 0.035) 1px 2px, transparent 2px 96px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.38) 0 1px, rgb(17 18 24 / 0.035) 1px 2px, transparent 2px 96px);
}

.dark {
  --vidrio-ventana: rgb(16 16 20 / 0.84);
  --vidrio-ventana-filo: rgb(255 255 255 / 0.06);
  --vidrio-tarjeta: rgb(24 24 30 / 0.78);
  --vidrio-tarjeta-filo: rgb(255 255 255 / 0.06);
  --vidrio-chat: rgb(255 255 255 / 0.02);
  --vidrio-hover: rgb(255 255 255 / 0.05);
  --vidrio-raya: rgb(255 255 255 / 0.06);
  --vidrio-surco: rgb(255 255 255 / 0.06);
  --segmento-activo: rgb(255 255 255 / 0.14);
  --sombra-tarjeta: none;
  --sombra-elegida: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-flotante: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --fondo-overlay: rgb(0 0 0 / 0.6);
  --viz-1: #8b80ff;
  --chat-acento: #8b80ff;
  --chat-enlace: #aaa2ff;
  --chat-cita: rgb(255 255 255 / 0.08);
  --losas:
    radial-gradient(640px 420px at 8% 0%, rgb(123 108 255 / 0.18), transparent 70%),
    radial-gradient(520px 520px at 96% 100%, rgb(101 163 13 / 0.06), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.035) 0 1px, rgb(0 0 0 / 0.3) 1px 2px, transparent 2px 96px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 1px, rgb(0 0 0 / 0.3) 1px 2px, transparent 2px 96px);
}

/* ── 1. Fondo ─────────────────────────────────────────────────────────── */
html {
  background-color: rgb(var(--color-app));
}

body {
  background-color: rgb(var(--color-app));
  background-image: var(--losas);
}

.login-pantalla {
  background: transparent;
}

/* Cifras en columnas: dígitos tabulares en toda la familia. */
.table,
.stat-value,
.resumen-cifra-valor,
.buzon-hora,
.nav-cuenta,
.nav-nuevas,
.badge {
  font-variant-numeric: tabular-nums;
}

/* ── 2. Ventana ───────────────────────────────────────────────────────── */
/* La ventana ocupa toda la pantalla, de borde a borde y sin tope de ancho
   (dueño, 2026-10-30: «usar toda la pantalla, dependiendo del monitor»).
   Sin margen ni esquinas: donde algo toca el borde de la pantalla no hay
   radio (guía §5). */
@media (min-width: 768px) {
  .app-shell {
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--vidrio-ventana);
    overflow: hidden;
  }
}

/* ── Barra lateral ──────────────────────────────────────────────────── */
.sidebar {
  background: transparent;
  color: var(--ink);
  border-right: 1px solid var(--vidrio-raya);
}

.sidebar :focus-visible {
  outline-color: rgb(var(--color-brand));
}

.sidebar-head {
  gap: 12px;
  padding: 20px 16px 12px;
  border-bottom: 0;
}

.brand-name {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-muted);
}

/* «« junto al logo: achica la barra a sólo íconos (y »» la vuelve a abrir). */
.sidebar-achicar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
}

.sidebar-achicar:hover {
  border-color: rgb(var(--color-ink-faint));
  color: var(--ink);
}

.sidebar-achicar svg {
  transition: transform var(--dur-drawer) var(--ease);
}

.sidebar-cerrar {
  color: var(--ink-muted);
}

.sidebar-cerrar:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.nav {
  padding: 0 12px 12px;
}

.nav:hover,
.nav:focus-within {
  scrollbar-color: rgb(var(--color-ink-faint) / 0.4) transparent;
}

.nav:hover::-webkit-scrollbar-thumb,
.nav:focus-within::-webkit-scrollbar-thumb {
  background: rgb(var(--color-ink-faint) / 0.4);
}

.nav-group {
  padding: 16px 12px 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.nav-btn {
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--ink-secondary);
  font-size: var(--text-base);
}

.nav-icon {
  width: 20px;
  height: 20px;
  color: var(--ink-muted);
  opacity: 1;
}

.nav-btn:hover {
  background: var(--vidrio-hover);
  color: var(--ink);
}

.nav-btn.active {
  background: var(--surface);
  box-shadow: var(--sombra-elegida);
  color: var(--ink);
  font-weight: 600;
}

.nav-btn.active .nav-icon {
  color: var(--ink);
}

.nav-btn.active::before {
  top: 10px;
  bottom: 10px;
  border-radius: 2px;
  background: rgb(var(--color-lime));
}

.nav-cuenta {
  font-family: var(--font-body);
  font-weight: 600;
}

.nav-nuevas {
  font-family: var(--font-body);
}

.sidebar-pie {
  border-top: 1px solid var(--vidrio-raya);
}

.session-chip {
  color: var(--ink-secondary);
}

.sidebar-salir {
  color: var(--ink-secondary);
}

.sidebar-salir:hover {
  background: var(--vidrio-hover);
  color: var(--ink);
}

/* El botón de menú de la barra superior ya no hace falta: en escritorio
   está «« junto al logo y en el teléfono, «Más» en la barra inferior. */
.menu-btn {
  display: none;
}

@media (min-width: 768px) {
  .menu-angosto .sidebar {
    width: 72px;
  }

  .menu-angosto .sidebar-head {
    flex-direction: column;
    padding: 20px 8px 12px;
  }

  .menu-angosto .sidebar-achicar {
    margin-left: 0;
  }

  .menu-angosto .sidebar-achicar svg {
    transform: scaleX(-1);
  }

  .menu-angosto .nav {
    padding: 0 12px 12px;
  }

  .menu-angosto .nav-group {
    margin: 8px 4px;
    background: var(--vidrio-raya);
  }

  .menu-angosto .nav-btn {
    min-height: 48px;
    padding: 0;
  }

  .menu-angosto .nav-btn.active::before {
    top: 12px;
    bottom: 12px;
  }

  .menu-angosto .nav-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 767.98px) {
  .sidebar-achicar {
    display: none;
  }

  /* El menú completo entra por encima: opaco. */
  .sidebar {
    background: var(--surface);
    border-right: 0;
    box-shadow: var(--sombra-flotante);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-achicar svg {
    transition: none;
  }
}

/* ── Barra superior ─────────────────────────────────────────────────── */
.topbar {
  min-height: 76px;
  padding: 20px 24px 8px;
  gap: 12px;
  background: transparent;
  border-bottom: 0;
}

.topbar-titulo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-color: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-secondary);
}

.icon-btn:hover {
  background: var(--surface);
  border-color: rgb(var(--color-ink-faint));
  color: var(--ink);
}

.icon-btn .nav-icon,
.avisos-btn .nav-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

/* «Activar avisos» va con filo violeta, no lleno: el botón lleno de cada
   pantalla es el de su tarea, no el de la barra. */
.btn.avisos-activar {
  min-height: 44px;
  border-color: rgb(var(--color-brand));
  background: var(--surface);
  color: var(--primary-strong);
}

.btn.avisos-activar:hover:not(:disabled) {
  background: rgb(var(--color-brand) / 0.08);
}

.modo-pill {
  min-height: 44px;
  padding: 0 16px;
  border-color: var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
}

/* Escritorio: la barra superior es un renglón bajo con el título (y la
   píldora de modo cuando hay algo que avisar). Avisos, ayuda y tema viven
   en el pie de la barra lateral (app.js). */
@media (min-width: 768px) {
  .topbar {
    min-height: 56px;
    padding: 8px 24px;
  }

  .topbar-titulo {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.2px;
  }

  .sidebar-acciones {
    flex: none;
    padding: 8px 16px;
    border-top: 1px solid var(--vidrio-raya);
  }

  .sidebar-acciones .topbar-right {
    flex-wrap: wrap;
  }

  .menu-angosto .sidebar-acciones .topbar-right {
    flex-direction: column;
  }

  /* «Activar avisos» está en el menú de la campana, que lleva un punto
     mientras falte activarlos (como en el teléfono). */
  .sidebar-acciones .btn.avisos-activar {
    display: none;
  }

  /* El menú de la campana sale a su derecha, alineado por abajo. */
  @supports (anchor-name: --a) {
    .buzon-flotante.avisos-menu {
      top: auto;
      right: auto;
      bottom: anchor(bottom);
      left: anchor(right);
      margin: 0 0 0 8px;
    }
  }
}

@media (max-width: 767.98px) {
  .sidebar-acciones {
    display: none;
  }
}

/* ── Contenido ──────────────────────────────────────────────────────── */
.main {
  padding: 8px 24px 24px;
}

@media (max-width: 767.98px) {
  /* El título nunca se recorta: si los botones no caben a su lado (con
     «Activar avisos»), bajan a un segundo renglón, a la derecha. */
  .topbar {
    flex-wrap: wrap;
    min-height: 64px;
    padding: max(16px, env(safe-area-inset-top)) 16px 8px;
  }

  .topbar-titulo {
    flex: 1 0 auto;
    overflow: visible;
  }

  .topbar-right {
    margin-left: auto;
  }

  .main {
    padding: 8px 16px 16px;
  }
}

/* Títulos dentro de las vistas: la familia y la tinta del rediseño. */
h1,
h2,
h3,
h4,
.fc-overlay-title {
  color: var(--ink);
}

h2 {
  font-size: var(--text-md);
  font-weight: 600;
}

/* ── 3. Tarjetas de vidrio ──────────────────────────────────────────── */
.card,
.table-wrap,
.stat-strip,
.lead-row,
.state-box,
.resumen-cifra,
.resumen-cifras-sec .resumen-cifra {
  background-color: var(--vidrio-tarjeta);
  border-color: var(--vidrio-tarjeta-filo);
  box-shadow: var(--sombra-tarjeta);
}

.dark .card,
.dark .table-wrap,
.dark .stat-strip,
.dark .lead-row,
.dark .state-box,
.dark .resumen-cifra {
  border-color: var(--vidrio-tarjeta-filo);
}

.card {
  padding: 20px;
  border-radius: var(--radius-lg);
}

.card .table-wrap,
.card .lead-row {
  background-color: transparent;
}

.card.card-hundida,
.lead-row[data-opted-out="true"],
.lead-row[data-avisado="true"] {
  background-color: rgb(var(--color-app) / 0.55);
}

.state-box {
  border-style: solid;
}

.state-box.state-error {
  background: rgb(var(--color-danger) / 0.06);
}

.state-box.state-noperm {
  background: var(--fc-warning-bg);
}

/* El editor de flujos es una mesa de trabajo: sigue opaco. */
.editor-canvas-wrap {
  background-color: var(--surface);
}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn {
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 600;
}

.btn-sm {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
  font-weight: 600;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: rgb(var(--color-ink-faint));
}

/* ── Campos ─────────────────────────────────────────────────────────── */
.input,
.select {
  min-height: 40px;
}

.input,
.textarea,
.select {
  border-color: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.textarea {
  padding: 10px 12px;
}

/* ── Insignias: píldoras ─────────────────────────────────────────────── */
.badge {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
}

/* ── Tablas ─────────────────────────────────────────────────────────── */
.table th {
  background: transparent;
  border-bottom-color: var(--hairline-soft);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-muted);
}

.table td {
  border-bottom-color: var(--hairline-soft);
}

.table tbody tr:hover td,
.row-clickable:hover td {
  background: var(--vidrio-hover);
}

/* Teléfono: cada fila es una tarjeta y cada celda dice de qué columna es
   (`data-col`, lo pone app.js). La tabla deja de pedir desplazamiento. */
@media (max-width: 640px) {
  .table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .main .table,
  .main .table tbody,
  .main .table tr,
  .main .table td,
  .main .table tbody th {
    display: block;
    width: 100%;
  }

  .main .table,
  #view-plantillas .table-wrap > table,
  #view-plantillas .table-wrap > table td:nth-child(2) {
    min-width: 0;
  }

  .main .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .main .table tbody tr {
    margin-bottom: 8px;
    padding: 8px 16px;
    border: 1px solid var(--vidrio-tarjeta-filo);
    border-radius: var(--radius-lg);
    background: var(--vidrio-tarjeta);
  }

  .main .table td,
  .main .table tbody th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .main .table tbody th {
    justify-content: flex-start;
    text-align: left;
    font-weight: 600;
  }

  .main .table td[data-col]::before {
    content: attr(data-col);
    flex: none;
    max-width: 45%;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
  }

  .main .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .main .table tbody tr:hover td {
    background: transparent;
  }
}

/* ── 4. Lo que flota: opaco ─────────────────────────────────────────── */
.fc-overlay-backdrop {
  background: var(--fondo-overlay);
  /* El único desenfoque del panel: el diálogo no se desplaza detrás. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fc-overlay-panel {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--sombra-flotante);
}

.fc-overlay-panel.fc-overlay-drawer {
  border-radius: var(--radius-modal) 0 0 var(--radius-modal);
}

.fc-toast {
  border: 0;
  border-radius: var(--radius-card-lg);
  background: var(--toast-fondo);
  color: var(--sobre-relleno);
  box-shadow: 0 16px 32px -12px rgb(var(--color-overlay) / 0.5);
}

.buzon-flotante,
.modo-detalle {
  border-color: var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--sombra-flotante);
}

/* ── 5. Resumen ─────────────────────────────────────────────────────── */
/* Período: un control segmentado. Agendamientos usa el mismo para los
   estados de los turnos. */
.resumen-periodos,
#view-agendamientos .toolbar[role="group"] {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border-radius: var(--radius-pill);
  background: var(--vidrio-surco);
  scrollbar-width: none;
}

.resumen-periodos .buzon-filtro,
#view-agendamientos .toolbar[role="group"] .btn {
  flex: none;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  box-shadow: none;
}

.resumen-periodos .buzon-filtro:hover,
#view-agendamientos .toolbar[role="group"] .btn:hover:not(:disabled) {
  background: var(--vidrio-hover);
  color: var(--ink);
}

.resumen-periodos .buzon-filtro[aria-pressed="true"],
#view-agendamientos .toolbar[role="group"] .btn[aria-pressed="true"] {
  background: var(--segmento-activo);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(var(--color-overlay) / 0.1);
}

@media (max-width: 560px) {
  .resumen-periodos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
  }

  .resumen-periodos .buzon-filtro {
    padding: 0 8px;
  }
}

.resumen-cabeza h2 {
  font-size: var(--text-lg);
}

/* Cifras principales: la primera es la destacada y ocupa dos columnas. */
.resumen-cifras:not(.resumen-cifras-sec) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resumen-cifras:not(.resumen-cifras-sec) > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 1100px) {
  .resumen-cifras:not(.resumen-cifras-sec) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .resumen-cifras:not(.resumen-cifras-sec) > :first-child {
    grid-column: span 2;
  }
}

.resumen-cifra {
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius-lg);
}

.resumen-cifra-etiqueta {
  font-size: var(--text-xs);
  font-weight: 500;
}

.resumen-cifra-valor {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.resumen-cifra-detalle {
  font-size: var(--text-xs);
  color: var(--ink-secondary);
}

.resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child {
  padding: 24px;
  border: 0;
  border-top: 1px solid rgb(var(--color-blanco) / 0.24);
  border-radius: var(--radius-card-lg);
  background: var(--destacada);
  box-shadow: 0 1px 2px rgb(var(--color-overlay) / 0.1), 0 16px 32px -12px rgb(var(--color-overlay) / 0.32);
  color: var(--sobre-relleno);
}

.resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child .resumen-cifra-etiqueta {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sobre-relleno);
}

.resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child .resumen-cifra-valor {
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--sobre-relleno);
}

.resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child .resumen-cifra-detalle {
  font-size: var(--text-base);
  color: var(--sobre-relleno);
}

.resumen-cifras-sec {
  gap: 12px;
}

.resumen-cifras-sec .resumen-cifra-valor {
  font-size: var(--text-lg);
  line-height: 24px;
}

.resumen-cifra-alerta,
.resumen-cifras-sec .resumen-cifra-alerta {
  border-color: rgb(var(--color-danger) / 0.4);
  background: var(--fc-danger-bg);
}

.resumen-graficos {
  gap: 16px;
}

.resumen-grafico {
  padding: 24px;
}

.resumen-grafico-titulo {
  font-size: var(--text-lg);
  line-height: 26px;
  text-wrap: balance;
}

.resumen-grafico-sub {
  text-wrap: pretty;
}

/* Un solo foco por gráfico: el último día en el acento, el resto en gris. */
.resumen-serie-gris {
  fill: var(--viz-gris);
}

.resumen-grafico-sub {
  font-size: var(--text-xs);
}

.resumen-pista {
  border-radius: var(--radius-pill);
  background: var(--hairline-soft);
}

.resumen-esqueleto-pieza {
  border-radius: var(--radius-lg);
  background: var(--vidrio-tarjeta);
  border-color: var(--vidrio-tarjeta-filo);
}

@media (max-width: 560px) {
  .resumen-cifras:not(.resumen-cifras-sec) {
    gap: 8px;
  }

  .resumen-cifra {
    padding: 12px;
  }

  .resumen-cifra-valor {
    font-size: 20px;
    line-height: 26px;
  }

  .resumen-cifra-detalle {
    font-size: 11px;
    line-height: 14px;
  }

  .resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child {
    padding: 20px;
  }

  .resumen-grafico {
    padding: 16px;
  }
}

/* ── 6. Bandeja: Conversaciones y Derivaciones ─────────────────────── */
.main:has(> .view.active.vista-buzon) {
  padding: 0 24px 24px;
}

.buzon-cuerpo {
  border-color: var(--vidrio-tarjeta-filo);
  border-radius: var(--radius-card-lg);
  background: rgb(var(--color-surface) / 0.5);
  box-shadow: var(--sombra-tarjeta);
}

.dark .buzon-cuerpo {
  background: rgb(var(--color-surface) / 0.55);
  border-color: var(--vidrio-tarjeta-filo);
}

/* Escritorio, como WhatsApp Web: la lista y el chat llenan el resto de la
   pantalla, sin margen ni esquinas; una raya los separa del título. */
@media (min-width: 801px) {
  .main:has(> .view.active.vista-buzon) {
    padding: 0;
  }

  /* El título, en el mismo eje que el buscador de la lista. */
  .contenido:has(.view.active.vista-buzon) > .topbar {
    padding-inline: 12px;
  }

  .buzon-cuerpo,
  .dark .buzon-cuerpo {
    border: 0;
    border-top: 1px solid var(--vidrio-raya);
    border-radius: 0;
    box-shadow: none;
  }
}

.buzon-lista {
  border-right-color: var(--vidrio-raya);
}

.buzon-herramientas {
  padding: 16px 12px 12px;
  border-bottom: 0;
}

.buzon-buscar {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-base);
}

.buzon-filtro {
  min-height: 36px;
  border-color: var(--hairline);
  background: var(--surface);
  color: var(--ink-secondary);
}

.buzon-filtro[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: rgb(var(--color-surface));
}

.buzon-items {
  padding: 0 8px 8px;
}

.buzon-fila {
  padding: 12px 8px;
  border-bottom: 1px solid var(--vidrio-raya);
}

.buzon-fila:hover {
  background: var(--vidrio-hover);
}

/* La elegida: una tarjeta blanca, como el ítem activo del menú. */
.buzon-fila[aria-selected="true"] {
  border-bottom-color: transparent;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--sombra-elegida);
}

/* «⋮» y «Volver» de la cabecera del chat: íconos sin marco. */
.buzon-mas,
.buzon-volver {
  border-color: transparent;
  background: transparent;
}

.buzon-fila-no-leida .buzon-hora {
  color: var(--ink);
}

.buzon-no-leida {
  background: var(--ink);
}

/* Avatares neutros: el color se guarda para los estados. */
.buzon-avatar,
.buzon-avatar[data-tono] {
  background: rgb(var(--color-border-soft));
  color: var(--ink-secondary);
  font-family: var(--font-body);
}

.dark .buzon-avatar,
.dark .buzon-avatar[data-tono] {
  background: rgb(var(--color-blanco) / 0.08);
}

.buzon-cabecera {
  padding: 12px 24px;
  border-bottom-color: var(--vidrio-raya);
  background: transparent;
}

.buzon-chat {
  background: var(--vidrio-chat);
}

.buzon-chat .chat-lista {
  padding: 16px clamp(16px, 5%, 64px) 24px;
}

.buzon-pie {
  padding: 12px 24px 16px;
  border-top: 0;
  background: var(--vidrio-chat);
}

/* ── Chat ── */
.chat-dia span {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  box-shadow: none;
  color: var(--ink-secondary);
}

.chat-burbuja {
  padding: 8px 12px 10px;
  border-radius: var(--radius-lg);
  line-height: 20px;
}

.chat-burbuja:not(.chat-seguida)::before {
  display: none;
}

.chat-entrante:not(.chat-seguida),
.chat-saliente:not(.chat-seguida) {
  border-radius: var(--radius-lg);
}

/* La persona del panel: violeta con todo su texto en blanco (5.4:1). */
.chat-operador {
  background: var(--chat-operador);
  color: var(--sobre-relleno);
}

.chat-operador .chat-texto,
.chat-operador .chat-hora,
.chat-operador .chat-autor,
.chat-operador .chat-entrega,
.chat-operador .chat-menu,
.chat-operador a {
  color: var(--sobre-relleno);
}

.chat-operador .chat-entrega[data-entrega="fallido"] {
  color: var(--sobre-relleno);
  font-weight: 700;
  text-decoration: underline;
}

.chat-operador .chat-cita {
  background: rgb(var(--color-blanco) / 0.16);
  border-left-color: var(--sobre-relleno);
}

.chat-operador .chat-cita-quien,
.chat-operador .chat-cita-texto {
  color: var(--sobre-relleno);
}

.chat-operador .chat-menu:focus-visible {
  outline-color: var(--sobre-relleno);
}

/* ── Cuadro de respuesta ── */
.respuesta-fila {
  position: relative;
  align-items: flex-end;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-modal);
  background: var(--surface);
}

.respuesta-fila:focus-within {
  border-color: rgb(var(--color-brand));
  box-shadow: var(--focus-ring);
}

.respuesta-texto,
.buzon-pie .respuesta-texto {
  min-height: 44px;
  max-height: 30vh;
  padding: 10px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  line-height: 22px;
  resize: none;
  field-sizing: content;
  box-shadow: none;
}

/* Vacío, el cuadro mide un renglón: la ayuda larga del texto de muestra no
   lo estira a cuatro en el teléfono. */
.respuesta-texto:placeholder-shown,
.buzon-pie .respuesta-texto:placeholder-shown {
  field-sizing: fixed;
  height: 44px;
  padding-block: 0;
  line-height: 44px;
}

.respuesta-texto:focus,
.respuesta-texto:focus-visible {
  outline: none;
  box-shadow: none;
}

.respuesta-texto::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}

/* Adjuntar, respuestas rápidas y enviar: círculos de 44px. */
.respuesta-icono,
.btn.respuesta-icono {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
}

.respuesta-icono:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--ink);
}

.respuesta-rapidas-btn[aria-expanded="true"] {
  background: rgb(var(--color-brand) / 0.1);
  color: var(--primary-strong);
}

.btn.respuesta-enviar {
  background: var(--relleno-marca-a);
  color: var(--sobre-relleno);
}

.btn.respuesta-enviar:hover:not(:disabled) {
  background: var(--relleno-marca-b);
  color: var(--sobre-relleno);
}

.btn.respuesta-enviar[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* La lista de respuestas rápidas: opaca, sobre el cuadro. */
.respuesta-rapidas-lista {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: min(380px, 100%);
  max-height: min(50vh, 380px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--sombra-flotante);
}

.respuesta-rapidas-lista:not([hidden]) {
  display: grid;
  gap: 2px;
}

.respuesta-rapida {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.respuesta-rapida[hidden] {
  display: none;
}

.respuesta-rapida:hover,
.respuesta-rapida[aria-selected="true"] {
  background: rgb(var(--color-brand) / 0.08);
}

.respuesta-rapida:focus-visible {
  outline-offset: -2px;
}

.respuesta-rapida-titulo {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
}

.respuesta-rapida-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--ink-muted);
}

/* ── Teléfono: lista → chat a pantalla completa ── */
@media (max-width: 800px) {
  /* En el teléfono, una hoja desde abajo sobre un velo. */
  .respuesta-rapidas-lista {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    width: auto;
    max-height: 64vh;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    box-shadow: 0 0 0 100vmax var(--fondo-overlay), 0 -16px 32px -12px rgb(var(--color-overlay) / 0.4);
  }

  .respuesta-rapida {
    min-height: 56px;
    font-size: 16px;
  }

  .main:has(> .view.active.vista-buzon) {
    padding: 0 0 0;
  }

  .buzon-cuerpo {
    border: 0;
    border-radius: 0;
  }

  .buzon-cabecera {
    padding: 8px 8px 8px 4px;
    background: var(--surface);
  }

  .buzon-pie {
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--hairline-soft);
  }

  .buzon-pie .respuesta-texto {
    font-size: 16px;
  }
}

/* ── 7. Barra inferior del teléfono ────────────────────────────────── */
.barra-inferior {
  display: none;
}

@media (max-width: 767.98px) {
  .barra-inferior {
    flex: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline-soft);
    background: var(--surface);
  }

  .barra-inferior-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 0 2px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
  }

  .barra-inferior-btn .nav-icon {
    width: 24px;
    height: 24px;
  }

  .barra-inferior-btn[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
  }

  .barra-inferior-btn[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 24px;
    height: 3px;
    margin-left: -12px;
    border-radius: 2px;
    background: rgb(var(--color-lime));
  }

  .barra-inferior .nav-cuenta {
    position: absolute;
    top: 4px;
    left: 50%;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 18px;
  }

  /* Con un chat abierto, el chat se queda con la pantalla: «Volver» en su
     cabecera regresa a la lista, que trae de vuelta las barras. */
  body:has(.view.active .buzon[data-abierto]) .topbar,
  body:has(.view.active .buzon[data-abierto]) .barra-inferior {
    display: none;
  }
}

/* ── 8. Listas de tarjetas (Leads, Agendamientos, Reconectar…) ─────── */
.lead-list {
  gap: 12px;
}

.lead-row {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
}

/* El hueco entre tarjetas lo da la lista, no el margen de `.card`. */
.lead-list > .lead-row {
  margin-bottom: 0;
}

.lead-interest {
  font-weight: 600;
}

/* Teléfono: estado, código y contacto en un renglón arriba de la tarjeta. */
@media (max-width: 860px) {
  .lead-row {
    gap: 12px;
    padding: 16px;
  }

  .lead-ident {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. REVISIÓN (crítica aprobada por el dueño, 2026-10-27). Va al final
   para ganarle a lo de arriba con la misma especificidad.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Texto de estado DENTRO de su insignia: el rojo y el ámbar del token no
     llegaban a 4.5:1 sobre su tinte (4.13 y 4.42). */
  --texto-peligro: #b91c1c;
  --texto-aviso: #854d0e;
}

.dark {
  --texto-peligro: rgb(var(--color-danger));
  --texto-aviso: rgb(var(--color-warning));
}

.badge-danger {
  color: var(--texto-peligro);
}

.badge-fixture {
  color: var(--texto-aviso);
}

/* ── Resumen ── */
.resumen-cifra-detalle,
.resumen-cifra-comparacion {
  text-wrap: pretty;
}

/* Contra el período anterior: flecha y signo, sin color (subir no siempre es bueno). */
.resumen-cifra-comparacion {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}

.resumen-cifras:not(.resumen-cifras-sec) > .resumen-cifra:first-child .resumen-cifra-comparacion {
  color: var(--sobre-relleno);
}

/* La lectura del gráfico va debajo y reserva un renglón: nada salta. */
.resumen-recorrible .resumen-lectura {
  min-height: calc(var(--text-sm) * 1.55);
}

.resumen-svg-chico {
  margin-top: 4px;
}

@media (max-width: 560px) {
  /* Dos columnas: con tres, los rótulos se partían y bajaban a 11px. La
     destacada y la cuarta ocupan la fila entera (sin huérfanas). */
  .resumen-cifras:not(.resumen-cifras-sec) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resumen-cifras:not(.resumen-cifras-sec) > :nth-child(4):last-child {
    grid-column: 1 / -1;
  }

  .resumen-cifra-detalle {
    font-size: var(--text-xs);
    line-height: 16px;
  }

  /* Los estados de los turnos: dos por renglón, todos a la vista. */
  #view-agendamientos .toolbar[role="group"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--radius-modal);
  }
}

/* ── Agendamientos: un solo botón lleno por turno ── */
.btn.btn-peligro-suave {
  color: var(--texto-peligro);
}

.btn.btn-peligro-suave:hover:not(:disabled) {
  border-color: rgb(var(--color-danger) / 0.5);
  background: rgb(var(--color-danger) / 0.06);
}

@media (max-width: 860px) {
  /* Las tres acciones en un renglón, del mismo ancho. */
  #view-agendamientos .lead-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #view-agendamientos .lead-actions .btn {
    width: 100%;
    padding-inline: 8px;
    white-space: normal;
    line-height: 18px;
  }
}

/* ── Bandeja ── */
/* La elegida lleva la barra lima, como el ítem activo del menú. */
.buzon-fila {
  position: relative;
}

.buzon-fila[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: rgb(var(--color-lime));
}

/* Los chips que no caben se desvanecen al borde: hay más a la derecha. */
.buzon-filtros {
  padding-right: 32px;
  mask-image: linear-gradient(90deg, rgb(var(--color-negro)) calc(100% - 40px), transparent);
}

/* El control de período lleva la misma clase, pero entra entero: sin fundido. */
.buzon-filtros.resumen-periodos {
  padding-right: 4px;
  mask-image: none;
}

/* El «▾» de cada mensaje vive en su propia columna: no tapa la hora. */
.chat-burbuja {
  padding-right: 32px;
}

.chat-hora {
  right: 32px;
}

/* ── Barra superior: «Activar avisos» con filo también en oscuro ── */
.dark .btn.avisos-activar {
  border-color: rgb(var(--color-brand));
  background: transparent;
  color: rgb(var(--color-brand));
}

/* La campana lleva un punto mientras los avisos del sistema no estén activos. */
.avisos-btn {
  position: relative;
}

.avisos-btn[data-sin-activar]::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--color-brand));
  box-shadow: 0 0 0 2px var(--surface);
}

/* ── Barra achicada: el nombre de la sección en un globo (app.js) ── */
.nav-globo {
  position: fixed;
  z-index: 1200;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--toast-fondo);
  color: var(--sobre-relleno);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: var(--sombra-flotante);
}

.nav-globo[hidden] {
  display: none;
}

/* La barra se achica sin animar su ancho (§7: sólo transform y opacidad):
   el contenido se funde al cambiar. El nombre de la animación cambia con
   el estado para que se repita en cada cambio. */
@media (min-width: 768px) {
  .sidebar {
    transition: none;
  }

  body:not(.menu-angosto) .sidebar > * {
    animation: barra-aparece-a 180ms var(--ease);
  }

  .menu-angosto .sidebar > * {
    animation: barra-aparece-b 180ms var(--ease);
  }
}

@keyframes barra-aparece-a {
  from {
    opacity: 0;
  }
}

@keyframes barra-aparece-b {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar > * {
    animation: none !important;
  }
}

/* ── Teléfono ── */
@media (max-width: 767.98px) {
  /* «Activar avisos» está adentro del menú de la campana: título y
     acciones en un renglón. */
  .btn.avisos-activar {
    display: none;
  }

  /* Las cinco secciones en columnas iguales («Más» incluido). El nombre
     largo puede pasar unos px del borde de su columna sin tocar al vecino. */
  .barra-inferior {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .barra-inferior-btn {
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: -0.02em;
  }
}

/* «· N más» y la lista de píldoras dentro de «Detalles»: sólo en el teléfono. */
@media (min-width: 801px) {
  .buzon-estado-mas,
  .buzon-flotante-estado {
    display: none;
  }
}

.buzon-flotante-estado {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* «Ver la conversación» y «Solo las que nadie tomó»: todo el renglón se toca. */
.enlace-tactil {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.buzon-herramientas .checkbox-row {
  min-height: 48px;
}

.buzon-herramientas .checkbox-row label {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  min-height: 48px;
  cursor: pointer;
}

/* El rayo lleva su nombre a la vista. */
.respuesta-rapidas-btn {
  gap: 6px;
  width: auto;
  padding: 0 12px 0 10px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.respuesta-icono.respuesta-rapidas-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
}

@media (max-width: 800px) {
  /* Cabecera del chat en UN renglón: la primera píldora y «· N más»; tocar
     la línea abre «Detalles», que las lista todas. */
  .buzon-encabezado .buzon-estado {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .buzon-estado > :is(.badge, .buzon-estado-dato) ~ :is(.badge, .buzon-estado-dato) {
    display: none;
  }

  .buzon-estado > .badge,
  .buzon-estado > .buzon-estado-dato {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* «Erika en pausa» es lo que hay que ver: ocupa el lugar de la primera. */
  .buzon-estado:has(> [data-en-pausa]) > :is(.badge, .buzon-estado-dato):not([data-en-pausa]) {
    display: none;
  }

  .buzon-estado > .badge[data-en-pausa] {
    display: inline-flex;
  }

  /* El rayo sin su nombre: el cuadro de texto se queda con el ancho. */
  .respuesta-rapidas-rotulo {
    display: none;
  }

  .buzon-estado-mas {
    flex: none;
    font-weight: 600;
    color: var(--ink-secondary);
  }

  /* «Volver» pegado al avatar: el blanco táctil sigue siendo de 48px. */
  .buzon-volver {
    margin-right: -12px;
  }

  .buzon-volver .icono-atras {
    margin-left: 0;
  }

  /* Lista: filas más bajas, avatar arriba, «⋮» sin estirar el renglón. */
  .buzon-fila {
    align-items: start;
    padding: 10px 8px;
  }

  .buzon-fila .buzon-menu {
    margin-block: -12px;
  }

  /* Conversaciones: buscador arriba; chips, «Actualizar» y «Nuevo
     mensaje» (íconos) en un renglón; la cuenta debajo. */
  #view-conversaciones .buzon-herramientas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
  }

  #view-conversaciones .buzon-herramientas > :not(.buzon-filtros):not(.buzon-herramientas-fila) {
    grid-column: 1 / -1;
  }

  #view-conversaciones .buzon-herramientas-fila {
    display: contents;
  }

  #view-conversaciones .buzon-herramientas-fila [data-cuenta],
  #view-conversaciones .buzon-herramientas-fila .buzon-etiqueta {
    grid-column: 1 / -1;
    order: 1;
  }

  #conv-actualizar,
  #view-conversaciones .buzon-herramientas-fila [data-operacion="sendWhatsAppTemplate"] {
    width: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 0;
  }

  #conv-actualizar::before,
  #view-conversaciones .buzon-herramientas-fila [data-operacion="sendWhatsAppTemplate"]::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--icono) center / contain no-repeat;
    mask: var(--icono) center / contain no-repeat;
  }

  #conv-actualizar {
    --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2.3 5.7'/><path d='M20 4v7h-7'/></svg>");
  }

  #view-conversaciones .buzon-herramientas-fila [data-operacion="sendWhatsAppTemplate"] {
    --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
  }
}

/* ── Objetivos táctiles: 48px en teléfono y pantallas de dedo (guía 8.2).
   Al final: arriba hay altos de escritorio (40/36) con la misma
   especificidad. ── */
@media (max-width: 767.98px), (pointer: coarse) {
  .btn,
  .btn-sm,
  .nav-btn,
  .buzon-filtro,
  .resumen-periodos .buzon-filtro,
  #view-agendamientos .toolbar[role="group"] .btn,
  .input,
  .select,
  .modo-pill,
  .sidebar-salir,
  .buzon-buscar,
  .btn.avisos-activar {
    min-height: 48px;
  }

  .icon-btn,
  .sidebar-cerrar,
  .sidebar-achicar,
  .buzon-menu,
  .respuesta-icono,
  .btn.respuesta-icono,
  .fc-toast-close {
    min-width: 48px;
    min-height: 48px;
  }

  .icon-btn,
  .respuesta-icono,
  .btn.respuesta-icono {
    width: 48px;
    height: 48px;
  }

  .respuesta-texto:placeholder-shown,
  .buzon-pie .respuesta-texto:placeholder-shown {
    height: 48px;
    line-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   10. ÍCONOS DE VERDAD (2026-10-28). Los «⋮», la estrella y el fijado eran
   dibujos con sombras y recortes; ahora son trazos de la misma familia que
   lib/icons.js (caja 24, trazo 2, puntas redondas), pintados con
   `currentColor` a través de una máscara: siguen el color y el tema.
   ═══════════════════════════════════════════════════════════════════════ */
.icono-puntos,
.icono-estrella,
.icono-fijado,
.protection-note::before,
.avisos-pila .fc-toast::before {
  display: inline-block;
  flex: none;
  background: currentColor;
  box-shadow: none;
  clip-path: none;
  border-radius: 0;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

.icono-puntos {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg>");
}

.icono-estrella {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/></svg>");
}

.icono-fijado {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  vertical-align: -2px;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6l-1 6 3 3H7l3-3z'/><path d='M12 12v9'/></svg>");
}

/* Notas de protección y avisos: un ícono delante, no una franja al costado. */
.protection-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-left: 0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.protection-note::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 2px;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6z'/></svg>");
}

.avisos-pila .fc-toast {
  border-left: 0;
}

.avisos-pila .fc-toast::before {
  content: "";
  width: 18px;
  height: 18px;
  align-self: center;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></svg>");
}

/* Resumen: sin tarjetas dentro de tarjetas. Las cifras de una tarjeta
   (costo de WhatsApp) van como columnas separadas por una raya. */
.card .resumen-cifra {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ── 11. Control y prevención (2026-10-28) ── */
/* Caracteres usados, a la derecha, sólo cerca del tope. */
.respuesta-contador {
  margin: 0;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-muted);
}

.respuesta-contador[hidden] {
  display: none;
}

/* «Enviar» deshabilitado junto al motivo (ventana de 24 h cerrada). */
.buzon-pie .respuesta:has(> .respuesta-aviso) > .respuesta-enviar {
  flex: none;
}

/* El botón de un aviso («Deshacer», preparado y todavía sin usar). */
.fc-toast-accion,
.btn.fc-toast-accion {
  flex: none;
  border: 0;
  background: rgb(var(--color-blanco) / 0.14);
  color: var(--sobre-relleno);
}

.btn.fc-toast-accion:hover:not(:disabled) {
  background: rgb(var(--color-blanco) / 0.24);
}

/* ── 12. Hoja «Atajos y ayuda» (lib/atajos.js) ── */
.ayuda {
  display: grid;
  gap: 12px;
}

.ayuda-titulo {
  margin: 4px 0 0;
  font-size: var(--text-md);
}

.ayuda-atajos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  align-items: center;
}

.ayuda-atajos dd,
.ayuda-respuestas dd {
  margin: 0;
  color: var(--ink-secondary);
}

.ayuda-respuestas {
  display: grid;
  gap: 4px;
  margin: 0;
}

.ayuda-respuestas dt {
  margin-top: 8px;
  font-weight: 600;
  color: var(--ink);
}

kbd {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}