/* ===== Tokens ===== */
:root {
  --fondo: #f7f8fa;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --borde: #e5e7eb;
  --texto: #1f2937;
  --texto-2: #4b5563;
  --texto-3: #6b7280;
  --primario: #2563eb;
  --primario-hover: #1d4ed8;
  --primario-suave: #dbeafe;
  --rojo: #dc2626;
  --rojo-suave: #fee2e2;
  --ambar: #b45309;
  --ambar-suave: #fef3c7;
  --verde: #15803d;
  --verde-suave: #dcfce7;
  /* La barra lateral era oscura siempre, con sus colores escritos a mano en doce reglas. Ahora son
     tokens y sigue al tema: clara en claro, oscura en oscuro. Clara es lo que hace GoHighLevel, y
     es lo que más cambia la primera impresión de toda la aplicación. */
  --lateral: #ffffff;
  --lateral-texto: #374151;
  --lateral-tenue: #6b7280;          /* rótulos de grupo, el rol del usuario */
  --lateral-hover: #f3f4f6;
  --lateral-activo: #eff6ff;
  --lateral-activo-texto: #1d4ed8;
  --lateral-borde: #e5e7eb;
  --lateral-fuerte: #111827;         /* la marca y el nombre del negocio */
  --msg-cliente: #ffffff;
  --msg-bot: #dcf5ef;
  --msg-humano: #dbeafe;
  --chat-fondo: #eef1f4;
  /* Gráficos: validados con dataviz/validate_palette.js contra --superficie (#ffffff) */
  --viz-serie: #2a78d6;
  --viz-embudo-1: #86b6ef;
  --viz-embudo-2: #5598e7;
  --viz-embudo-3: #2a78d6;
  --viz-embudo-4: #1c5cab;
  --viz-embudo-5: #104281;
  --viz-grilla: #eceef1;
  --viz-base: #cbd5e1;
  --delta-bueno: #006300;
  --delta-malo: #b91c1c;
  --sombra: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --sombra-alta: 0 10px 30px rgb(15 23 42 / 0.18);
  --radio: 10px;
  /* Movimiento: lo que responde al dedo va en --mov-rapido; lo que entra o sale, en --mov.
     Más de 200 ms se siente lento, menos de 100 ni se ve. La curva sale rápido y frena al final. */
  --mov-rapido: 120ms;
  --mov: 180ms;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* El tema no se decide aquí con @media sino con el atributo data-tema del <html>, que pone
   assets/js/tema.js antes del primer pintado: así se puede ELEGIR claro, oscuro o automático,
   y los colores oscuros siguen escritos una sola vez. Sin JavaScript queda el claro de arriba. */
:root[data-tema="oscuro"] {
  --fondo: #0b1120;
  --superficie: #111827;
  --superficie-2: #0f172a;
  --borde: #1f2a3c;
  --texto: #e5e7eb;
  --texto-2: #b6c0cd;
  --texto-3: #8b97a8;
  --primario: #60a5fa;
  --primario-hover: #93c5fd;
  --primario-suave: #1e3a5f;
  --rojo: #f87171;
  --rojo-suave: #3f1d1d;
  --ambar: #fbbf24;
  --ambar-suave: #3b2a0a;
  --verde: #4ade80;
  --verde-suave: #12301d;
  --lateral: #0f172a;
  --lateral-texto: #cbd5e1;
  --lateral-tenue: #7c8ba1;
  --lateral-hover: #1e293b;
  --lateral-activo: #1e3a5f;
  --lateral-activo-texto: #ffffff;
  --lateral-borde: #1f2a3c;
  --lateral-fuerte: #ffffff;
  --msg-cliente: #1e293b;
  --msg-bot: #0f3b36;
  --msg-humano: #1e3a5f;
  --chat-fondo: #0b1322;
  /* Validados contra la superficie oscura #111827 */
  --viz-serie: #3987e5;
  --viz-embudo-1: #184f95;
  --viz-embudo-2: #256abf;
  --viz-embudo-3: #3987e5;
  --viz-embudo-4: #6da7ec;
  --viz-embudo-5: #9ec5f4;
  --viz-grilla: #1c2536;
  --viz-base: #334155;
  --delta-bueno: #0ca30c;
  --delta-malo: #f87171;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-alta: 0 10px 30px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 650; }
h3 { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.tenue { color: var(--texto-3); }

/* ===== Controles ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
  font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background var(--mov-rapido), border-color var(--mov-rapido), transform var(--mov-rapido);
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--superficie-2); border-color: var(--texto-3); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
:root[data-tema="oscuro"] .btn-primario { color: #0b1b3a; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn-bloque { width: 100%; }
.btn-peligro-suave { color: var(--rojo); }
.btn-icono {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer;
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.btn-icono:hover { background: var(--superficie-2); color: var(--texto); }

input:not([type="checkbox"]), select, textarea {
  width: 100%; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
}
textarea { resize: vertical; }
/* El desplegable del navegador trae su propia flecha, su propia altura y su propio gris: al lado
   de un buscador vestido se nota que uno de los dos no lo diseñó nadie. La flecha se dibuja con
   dos degradados en vez de una imagen para que siga al tema (una imagen tendría el color fijo). */
select:not([multiple]) {
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 20%, transparent); }
.input-sm { min-height: 34px; padding: 6px 10px; font-size: 13px; }

.campo { display: grid; gap: 5px; margin-bottom: 14px; }
.campo > span:first-child { font-size: 13px; font-weight: 550; color: var(--texto-2); }
.campo-error { font-size: 12px; color: var(--rojo); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Hay 15 <fieldset> repartidos por ocho pantallas y ninguno estaba vestido: salían con el borde
   acanalado y la muesca que pone el navegador por omisión, que es estética de formulario de hace
   veinte años. Por significado ya eran bloques con título, así que eso es lo que se ven ahora.
   min-width: 0 porque un fieldset, por omisión, se niega a encoger dentro de un grid. */
fieldset { min-width: 0; margin: 0 0 14px; padding: 12px 14px 14px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie-2); }
fieldset > legend { padding: 0 6px; margin-left: -6px; font-size: 12.5px; font-weight: 650; color: var(--texto); }
fieldset > legend + p, fieldset > legend + small { display: block; margin: 2px 0 10px; }

.alerta { padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.alerta-error { background: var(--rojo-suave); color: var(--rojo); }

.buscador { position: relative; display: flex; align-items: center; }
.buscador svg { position: absolute; left: 10px; color: var(--texto-3); pointer-events: none; }
.buscador input { padding-left: 32px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill-rojo { background: var(--rojo-suave); color: var(--rojo); }
.pill-gris { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.pill-verde { background: var(--verde-suave); color: var(--verde); }
.pill-ambar { background: var(--ambar-suave); color: var(--ambar); }
.pill-azul { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
:root[data-tema="oscuro"] .pill-azul { color: #93c5fd; }
.enlace { padding: 0; border: 0; background: none; color: var(--primario); font-weight: 650; cursor: pointer; }
.enlace:hover { text-decoration: underline; }
small.tenue { font-size: 12px; }

/* ===== Métricas ===== */
.pagina-metricas { max-width: 1280px; }
.filtros-metricas { flex-wrap: wrap; align-items: center; }
.rango-fechas { display: flex; align-items: center; gap: 6px; }
.rango-fechas input { width: auto; }
.filtros-metricas select { width: auto; min-width: 180px; }
.metricas { display: grid; gap: 16px; transition: opacity 0.15s; }
.metricas.recargando { opacity: 0.5; pointer-events: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.tile { padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.tiles-compactos .tile { box-shadow: none; background: var(--superficie-2); }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles + .tabla-contenedor { margin-top: 14px; }
/* La etiqueta reserva dos líneas siempre. Sin esto, "Conversaciones nuevas" (dos líneas) empuja
   su número más abajo que el de "Pedidos creados" (una), y la fila de cifras queda torcida. */
.tile-etiqueta { font-size: 12.5px; color: var(--texto-2); min-height: 2.6em; }
/* tabular-nums: todos los dígitos ocupan lo mismo, así una cifra que cambia no mueve nada */
.tile-valor { margin: 4px 0 2px; font-size: 24px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tiles-compactos .tile-valor { font-size: 19px; }
.tile-nota { font-size: 12px; color: var(--texto-3); }
.tile-delta { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.tile-delta .tenue { font-weight: 400; }
.delta-bueno { color: var(--delta-bueno); }
.delta-malo { color: var(--delta-malo); }
/* Antes esto era una barra roja de 4 px al borde de la ficha. Gritaba más de lo que el dato
   merece ("hay 3 chats por atender") y competía con el acento de la marca en la misma pantalla.
   Lo dice el número, que es donde ya estabas mirando. */
.tile-alerta .tile-valor { color: var(--rojo); }
.tarjeta-viz { margin: 0; min-width: 0; }
.tarjeta-viz > p.tenue { margin: 2px 0 12px; }
.tarjeta-viz .fila-entre { align-items: center; }
.grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.viz-zona { position: relative; min-height: 60px; }
.viz { position: relative; }
.viz svg { display: block; max-width: 100%; overflow: visible; }
.viz-grilla { stroke: var(--viz-grilla); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-eje { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-linea { fill: none; stroke: var(--viz-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { fill: var(--viz-serie); opacity: 0.1; }
.viz-cursor { stroke: var(--texto-3); stroke-width: 1; }
.viz-punto { fill: var(--viz-serie); stroke: var(--superficie); stroke-width: 2; }
.viz-capa, .viz-hit { fill: transparent; cursor: crosshair; }
.viz-hit { cursor: default; }
.viz-hit:hover, .viz-hit:focus { fill: color-mix(in srgb, var(--texto) 5%, transparent); outline: none; }
.viz-columna { fill: var(--viz-serie); }
.viz-vacio { position: absolute; inset: 40% 0 auto; padding: 0; }
.viz-tooltip {
  position: fixed; z-index: 60; display: grid; gap: 1px; padding: 7px 10px; pointer-events: none;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra-alta); font-size: 12.5px;
}
.viz-tooltip strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.viz-tooltip span { color: var(--texto-3); }
.embudo { display: grid; gap: 10px; }
.embudo-fila { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) minmax(90px, auto); align-items: center; gap: 12px; }
.embudo-etapa { display: grid; font-weight: 600; font-size: 13.5px; }
.embudo-paso { font-weight: 400; font-size: 11.5px; }
.embudo-pista { height: 24px; display: flex; align-items: center; border-radius: 0 4px 4px 0; }
.embudo-pista:focus-visible { outline-offset: 3px; }
.embudo-barra { height: 20px; background: var(--c); border-radius: 0 4px 4px 0; min-width: 0; transition: width 0.25s; }
.embudo-pista:hover .embudo-barra { filter: brightness(1.08); }
.embudo-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.embudo-perdidos { margin-top: 4px; }
.barras-productos .embudo-fila { grid-template-columns: minmax(100px, 170px) minmax(0, 1fr) minmax(110px, auto); }
.tabla-compacta td, .tabla-compacta th { padding: 7px 12px; }
@media (max-width: 1000px) { .grilla-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .embudo-fila, .barras-productos .embudo-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .embudo-pista { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Seguimientos ===== */
.pagina-estrecha-media { max-width: 880px; }
.badge-suave { background: var(--primario); }
:root[data-tema="oscuro"] .badge-suave { color: #0b1b3a; }
.reglas { margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.reglas summary { margin: 0; }
.reglas ul { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 4px; color: var(--texto-2); }
.agentes-seguimiento { display: grid; gap: 8px; margin-bottom: 14px; }
.agente-seguimiento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); font-size: 13px; }
.lista-seguimientos { display: grid; gap: 12px; }
/* Secciones de "Mensajes por enviar": avisos de la agenda y seguimientos sugeridos */
.seccion-avisos { font-size: 16px; margin: 18px 0 10px; }
.seccion-avisos[hidden] { display: none; }
.vacio-suave { padding: 14px 16px; border: 1px dashed var(--borde); border-radius: 10px; margin: 0; }
.seguimiento { margin: 0; display: grid; gap: 10px; }
.seguimiento-cab { display: flex; align-items: center; gap: 10px; }
.seguimiento-quien { flex: 1; min-width: 0; }
.seguimiento-quien a:hover { text-decoration: underline; }
.seguimiento-ultimo { padding: 8px 10px; border-left: 3px solid var(--borde); background: var(--superficie-2); border-radius: 0 8px 8px 0; font-size: 13px; }
.seguimiento-texto { margin: 0; }
.seguimiento-texto > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seguimiento .dialogo-acciones { margin: 0; }
.etapa-seguimiento { margin: 4px 0 10px; padding: 8px 12px; border: 1px dashed var(--borde); border-radius: 8px; }
.etapa-seguimiento summary { margin: 0 0 6px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ===== Administración ===== */
.nav-seccion { margin: 14px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lateral-tenue); }
.lateral { overflow-y: auto; }
.alerta-aviso { background: var(--ambar-suave); color: var(--texto); }
.editor-cab { margin-bottom: 6px; }
.editor-prompt {
  width: 100%; min-height: 60vh; padding: 14px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.55;
}
.volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; color: var(--texto-3); font-weight: 550; }
.volver:hover { color: var(--texto); }
.pestanas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestana { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texto-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color var(--mov-rapido) var(--curva), border-color var(--mov-rapido) var(--curva); }
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--primario); border-bottom-color: var(--primario); }
.lista-etapas { display: grid; gap: 12px; }
.etapa-editor { border-left: 4px solid var(--color); margin: 0; }
.etapa-editor-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.etapa-editor-cab input:not(.input-color) { max-width: 280px; font-weight: 650; }
.etapa-orden { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borde); font-weight: 700; font-size: 12px; }
.input-color { width: 42px; min-height: 36px; padding: 2px; cursor: pointer; }

/* Métricas → Descargas a Excel */
.descargas { display: grid; gap: 10px; margin-top: 10px; }
.descarga { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; }
.descarga h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--texto); }
.descarga p { margin: 0; font-size: 13.5px; }
.descarga .btn { flex: none; }
@media (max-width: 640px) { .descarga { flex-direction: column; align-items: stretch; } .descarga .btn { justify-content: center; } }

/* Ajustes → Logo y colores del negocio */
.campo .input-color { width: 56px; min-width: 56px; }
.marca-logo { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.marca-logo-img, .marca-logo-vacio { flex: none; width: 86px; height: 86px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2); }
.marca-logo-img { object-fit: contain; padding: 6px; background: #fff; }
.marca-logo-vacio { display: grid; place-items: center; color: var(--texto-3); }
.marca-logo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.marca-portada { display: grid; gap: 10px; margin-bottom: 14px; }
.marca-portada-img { width: 100%; max-height: 180px; object-fit: cover; border: 1px solid var(--borde); border-radius: 12px; }
.marca-portada-vacia { display: grid; place-items: center; gap: 4px; height: 110px; border: 1px dashed var(--borde); border-radius: 12px; background: var(--superficie-2); color: var(--texto-3); font-size: 13px; }
.marca-logo-acciones small { flex-basis: 100%; }
/* Vista previa de cómo se verá el encabezado público */
.marca-muestra { margin-top: 12px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.marca-muestra-cab { display: flex; align-items: center; gap: 10px; padding: 14px; font-weight: 750;
  background: linear-gradient(160deg, color-mix(in srgb, var(--muestra) 22%, var(--superficie)), color-mix(in srgb, var(--muestra-2) 10%, var(--superficie))); }
.marca-muestra-cab img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; }
.marca-muestra-cuerpo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--superficie); }
.marca-muestra-pill { padding: 4px 11px; border-radius: 999px; background: var(--muestra); color: #fff; font-size: 13px; font-weight: 700; }
.marca-muestra-btn { padding: 6px 14px; border-radius: 10px; background: var(--muestra-2); color: #fff; font-size: 13px; font-weight: 700; }
.grilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 14px; }
.vista-prompt { max-height: 60vh; overflow: auto; padding: 14px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
.acciones-izq { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
/* QR para vincular un número en WAHA (fondo blanco también en modo oscuro: el celular lo lee mejor) */
.qr-waha { margin: 12px 0; text-align: center; }
.qr-waha img { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 8px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); }
.estado-canal { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); }
.datos-canal { grid-template-columns: 150px 1fr; font-size: 13px; }
.ruptura { overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
details summary { cursor: pointer; margin: 12px 0 8px; font-weight: 600; color: var(--texto-2); }
.casillas { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.casillas legend { padding: 0 4px; font-size: 13px; font-weight: 550; color: var(--texto-2); }

/* ===== Pedidos ===== */
.resumen-pedidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.resumen-tarjeta { padding: 14px 16px; border: 1px solid var(--borde); border-left: 4px solid var(--c); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.resumen-ambar { --c: #f59e0b; }
.resumen-verde { --c: #16a34a; }
.resumen-azul { --c: #3b82f6; }
.resumen-titulo { font-size: 12px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; }
.resumen-valor { margin: 2px 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-filtros .chips { flex-wrap: wrap; }
.pedido-cab { margin-bottom: 12px; }
.pedido-bloque { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--borde); }
.pedido-fila { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.pedido-total { padding-top: 6px; border-top: 1px dashed var(--borde); font-weight: 700; font-size: 15px; }
.lista-pedidos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lista-pedidos li { display: flex; align-items: center; gap: 8px; }
.lista-pedidos li span:first-of-type { flex: 1; font-variant-numeric: tabular-nums; }
.lista-pedidos a { color: var(--primario); font-weight: 650; }
.pill-sent-positivo { background: var(--verde-suave); color: var(--verde); }
.pill-sent-neutral { background: var(--superficie-2); color: var(--texto-2); }
.pill-sent-negativo { background: var(--rojo-suave); color: var(--rojo); }

.chip-etapa {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--color);
  background: color-mix(in srgb, var(--color) 14%, transparent);
}
.chip-etapa::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color); }
:root[data-tema="oscuro"] .chip-etapa { color: color-mix(in srgb, var(--color) 60%, #fff); background: color-mix(in srgb, var(--color) 24%, transparent); }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 14px; font-weight: 650; color: #fff;
  background: hsl(var(--hue) 45% 45%);
}
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }

.spinner {
  width: 26px; height: 26px; margin: 32px auto;
  border: 3px solid var(--borde); border-top-color: var(--primario); border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.vacio { padding: 28px 20px; text-align: center; color: var(--texto-3); }
/* Pestañas dentro de una pantalla: parten un rollo largo de ajustes en pedazos cortos, cada uno
   con principio y fin a la vista. Debajo sigue habiendo un solo formulario.
   La barra es `.pestanas`, que ya existía; esto es solo la caja que la envuelve con sus paneles. */
.pestana-panel[hidden] { display: none; }
/* La explicación de la pantalla, debajo de la cabecera del módulo */
.pagina-intro { margin: 0 0 16px; }

/* Cabecera de módulo: el nombre del módulo y sus pantallas como pestañas, en la MISMA fila. Es lo
   que hace GoHighLevel y es lo que convierte un menú lateral larguísimo en secciones con
   contenido: al entrar ves de una qué más hay dentro, sin tener que descubrirlo en el menú. */
.modulo-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
  padding: 18px 28px 0; border-bottom: 1px solid var(--borde); }
.modulo-cab h1 { margin: 0 0 10px; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.modulo-cab .pestanas { flex: 1; margin-bottom: -1px; border-bottom: 0; }
.modulo-cab > :last-child:not(.pestanas):not(h1) { margin-bottom: 10px; }
/* La pestaña también puede ser un enlace: el enrutador hace su trabajo y el "atrás" funciona */
a.pestana { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pestana .badge { position: static; }
/* Una pantalla de módulo es una columna: la cabecera arriba, fija, y el contenido llenando el resto */
.modulo { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.modulo > .pagina { flex: 1; min-height: 0; }
.modulo > .conv { flex: 1; min-height: 0; height: auto; }
/* El Guardar se queda pegado abajo. Antes estaba al final de un desplazamiento de tres pantallas:
   cambiabas la hora de apertura arriba y tenías que bajar hasta el fondo para guardarla. */
.barra-guardar { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end;
  align-items: center; gap: 10px; margin-top: 4px; padding: 12px 0 14px;
  background: linear-gradient(to top, var(--fondo) 78%, transparent); }

/* Una pantalla vacía es la primera que ve alguien que entra, y era dos renglones grises en medio
   de nada, con el único botón lejos, arriba a la derecha. Ahora dice qué es, para qué sirve y
   trae el botón ahí mismo. */
.vacio-grande { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; min-height: 260px; padding: 32px 24px; text-align: center; color: var(--texto-3); }
.vacio-grande h2 { margin: 0; color: var(--texto); font-size: 17px; }
.vacio-grande p { max-width: 440px; margin: 0; }
.vacio-grande .btn { margin-top: 8px; }
.vacio-icono { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie-2); color: var(--texto-3); }
.pantalla-carga { display: grid; place-items: center; min-height: 100vh; }
.fila-entre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fila-acciones { display: flex; align-items: center; gap: 12px; }
.oculto { display: none; }

/* Configuración del restaurante */
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.dia-semana { position: relative; cursor: pointer; }
.dia-semana input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dia-semana span {
  display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--borde); border-radius: 50%;
  background: var(--superficie); font-weight: 700; color: var(--texto-2);
}
.dia-semana input:checked + span { background: var(--primario); border-color: var(--primario); color: #fff; }
.dia-semana input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }
.grupo-casillas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }

/* Menú agrupado por categoría */
.fila-grupo td { padding-top: 16px; background: var(--superficie-2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-2); }
.celda-nombre .pill { margin-left: 6px; vertical-align: 1px; }

/* ===== Cocina (módulo Comidas) ===== */
.pagina-cocina:fullscreen { overflow: auto; padding: 16px 20px; background: var(--fondo); }
.cocina-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; }
.cocina-tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cocina-columna { display: grid; gap: 12px; padding: 12px; border-radius: var(--radio); background: var(--superficie-2); min-height: 140px; }
.cocina-columna-lista { display: grid; gap: 12px; }
.cocina-columna h2 { display: flex; align-items: center; gap: 8px; margin: 2px 4px; font-size: 16px; }
.cocina-columna h2 .chip-num { padding: 1px 8px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); font-size: 13px; }
.cocina-pedido {
  display: grid; gap: 8px; padding: 14px; border: 1px solid var(--borde); border-left: 5px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
}
.cocina-recibido .cocina-pedido { border-left-color: var(--ambar); }
.cocina-preparando .cocina-pedido { border-left-color: var(--primario); }
.cocina-listo .cocina-pedido { border-left-color: var(--verde); }
/* 15 vueltas: lo que dura resaltado un pedido nuevo. Antes eran 3, pero la tarjeta se rehacía
   cada 5 segundos y el pulso volvía a arrancar; ahora la tarjeta se queda y el pulso se mantiene. */
.cocina-nuevo { animation: cocina-nuevo 1s ease-in-out 15; box-shadow: 0 0 0 3px var(--ambar); }
@keyframes cocina-nuevo { 50% { transform: scale(1.02); } }
.cocina-pedido-cab { align-items: center; }
.cocina-numero { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cocina-tiempo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.cocina-tarde .cocina-tiempo { color: var(--rojo); }
.cocina-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cocina-items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cocina-items li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.cocina-cantidad { min-width: 34px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cocina-plato { font-size: 17px; font-weight: 650; line-height: 1.3; }
.cocina-adicional { font-size: 14px; font-weight: 600; color: var(--primario); }
/* Lo que eligió el cliente (Sabor: Coca-Cola): es parte del plato, no un agregado */
.cocina-opcion { font-size: 14.5px; font-weight: 700; color: var(--texto); }
.cocina-nota { font-size: 14px; font-style: italic; color: var(--ambar); }
.cocina-nota-general { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--ambar-suave); font-style: normal; }
.cocina-direccion, .cocina-pago, .cocina-avisado, .cocina-editado { margin: 0; font-size: 13px; }
.cocina-avisado { color: var(--verde); font-weight: 600; }
.cocina-editado { color: var(--texto-2); font-weight: 600; }
.cocina-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cocina-acciones .btn-primario { flex: 1; min-height: 44px; font-size: 15px; }
.cocina-entregados { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.cocina-entregados summary { cursor: pointer; font-weight: 650; }
.cocina-lista-entregados { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.cocina-lista-entregados li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* Lo que falta por cobrar y el cierre de caja del día */
.cocina-cobros { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.cocina-cobros summary { cursor: pointer; font-weight: 650; }
.cocina-lista-cobros { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.cocina-lista-cobros li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* Pantalla del domiciliario */
.pagina-domicilios h2 { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 16px; }
.domicilios-lista { display: grid; gap: 4px; }
.domicilio { display: grid; gap: 8px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); }
.domicilio-en-camino { border-color: color-mix(in srgb, var(--primario, #0f766e) 50%, var(--borde)); }
.domicilio p { margin: 0; }
.domicilio-cliente { font-size: 16px; }
.domicilio-direccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.domicilio-items { margin: 0; padding-left: 18px; font-size: 14px; color: var(--texto-2); }
.domicilio-pago { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.domicilio-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.domicilio-orden { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--superficie-2); font-size: 12px; font-weight: 700; }
.domicilio-eta { font-size: 15px; font-weight: 600; }
/* Llaves de pago del negocio (Nequi, Daviplata, llave) con su QR */
.llaves-pago { display: grid; gap: 14px; margin: 10px 0; padding: 0; list-style: none; }
.llaves-pago li { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; }
.llaves-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.llaves-fila input, .llaves-fila select { flex: 1 1 140px; min-width: 0; }
/* El comprobante que reporta el cliente, pendiente de verificar en el banco */
.cocina-pago-reportado { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; }
.comprobante-grande { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #fff; }
.domicilio-acciones .btn-primario { flex: 1 1 auto; }
.cocina-mesas h3, .cocina-cobros h3 { margin: 12px 0 6px; font-size: 14px; }
.cocina-mesa-pide { padding: 4px 6px; border-radius: 8px; background: color-mix(in srgb, var(--ambar, #f59e0b) 14%, transparent); }
/* Hoja de cobro: pagos divididos */
.cobro-total-final { padding-top: 8px; border-top: 1px solid var(--borde); }
.cobro-pagos { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.cobro-pagos li { display: flex; gap: 6px; align-items: center; }
.cobro-pagos select { flex: 1 1 auto; min-width: 0; }
.cobro-pagos input { flex: 1 1 90px; min-width: 0; }
.cocina-caja { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); }
.cocina-caja-total { margin: 0 0 6px; font-size: 15px; }
.cocina-caja-desglose { display: grid; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13.5px; color: var(--texto-2); }
.cocina-caja-desglose li { display: flex; justify-content: space-between; gap: 12px; }
/* Hoja de cobro */
.cobro-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 20px; }
.cobro-cambio { min-height: 22px; margin: 6px 0 0; font-size: 15px; }
.cobro-cambio.mal { color: var(--peligro, #b91c1c); }
.cocina-acciones { align-items: center; }
.cocina-acciones-sec { display: flex; flex-wrap: wrap; gap: 6px; }
.cocina-boton-principal { width: 100%; }
.cocina-boton-listo { background: var(--verde); border-color: var(--verde); }
.cocina-boton-entregado { background: #2563eb; border-color: #2563eb; }
.cocina-pestanas { display: none; }
/* Editar un pedido que ya está en la cocina (el mesero agrega lo que el cliente pidió después) */
.editar-pedido { display: grid; gap: 12px; }
.editar-lineas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.editar-linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 10px; border: 1px solid var(--borde); border-radius: 10px;
}
.editar-linea-plato { display: grid; gap: 4px; }
.editar-linea-lado { display: grid; justify-items: end; gap: 6px; }
.editar-nota { margin-top: 2px; font-size: 13px; }
.editar-cantidad { display: flex; align-items: center; gap: 4px; }
.editar-cantidad .btn { min-width: 38px; min-height: 38px; justify-content: center; font-size: 18px; font-weight: 800; }
.editar-cantidad span { min-width: 26px; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.editar-total { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--superficie-2); font-size: 14px; }
.editar-buscar { flex: 1; min-width: 0; }
.editar-categoria h3 { margin: 14px 0 6px; font-size: 14px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.editar-plato-titulo { margin: 0; font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--texto); }
.editar-menu { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.editar-plato {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px;
  padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
  color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.editar-plato:hover:not(:disabled) { border-color: var(--primario); }
.editar-plato:disabled { opacity: .55; cursor: not-allowed; }
.editar-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Datos del pedido que toma el personal (a dónde va y a nombre de quién), arriba de los platos */
.editar-datos { display: grid; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
.editar-datos .campo { margin: 0; }
.chip-opcion {
  display: inline-flex; align-items: center; min-height: 42px; padding: 6px 14px; border: 1px solid var(--borde);
  border-radius: 999px; background: var(--superficie); font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opcion.activa { border-color: var(--primario); background: var(--primario-suave); color: var(--primario); }
/* Avisos push del dispositivo y desbloqueo del sonido */
.panel-avisos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
}
.panel-avisos p { margin: 0; flex: 1 1 260px; line-height: 1.4; }
.panel-avisos p svg { vertical-align: -3px; margin-right: 6px; }
.panel-avisos-apagados { border-color: var(--primario); background: var(--primario-suave); }
.panel-avisos-bloqueados, .panel-avisos-instalar-ios { border-color: var(--ambar); background: var(--ambar-suave); }
.panel-avisos-activos { padding: 6px 12px; font-size: 13px; }
.panel-avisos-activos svg { color: var(--verde); }
.cocina-desbloquear {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 12px;
  border: 0; border-radius: var(--radio); background: var(--ambar); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer;
}
.cocina-desbloquear[hidden], .panel-avisos[hidden] { display: none; }

.barra-deshacer {
  position: fixed; left: 50%; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 14px; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-alta); font-weight: 600;
}
.barra-deshacer .btn { background: transparent; border-color: currentColor; color: inherit; }
@media (max-width: 900px) {
  /* Celular: una pestaña por estado, fija arriba, y las tarjetas a lo ancho con botones grandes */
  .pagina-cocina { padding: 12px 12px 90px; }
  .cocina-cab { margin-bottom: 10px; }
  .cocina-cab h1 { font-size: 20px; }
  .cocina-resumen { font-size: 13px; }
  .solo-escritorio, .cocina-cab .texto-boton { display: none; }
  .cocina-pestanas {
    position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin: 0 -12px 12px; padding: 8px 12px; background: var(--fondo); border-bottom: 1px solid var(--borde);
  }
  .cocina-pestana {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 6px 4px;
    border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto-2); font-weight: 700; font-size: 15px;
  }
  .cocina-pestana-n { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); font-size: 13px; }
  .cocina-pestana.activa { color: #fff; border-color: transparent; }
  .cocina-pestana.activa .cocina-pestana-n { background: rgb(255 255 255 / 0.25); }
  .cocina-pestana-recibido.activa { background: var(--ambar); }
  .cocina-pestana-preparando.activa { background: var(--primario); }
  .cocina-pestana-listo.activa { background: var(--verde); }
  .cocina-pestana.alerta { border-color: var(--ambar); color: var(--ambar); animation: cocina-nuevo 1s ease-in-out infinite; }
  .cocina-tablero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cocina-columna { padding: 0; background: none; min-height: 0; }
  .cocina-columna:not(.visible) { display: none; }
  .cocina-columna > h2 { display: none; }
  .cocina-pedido { padding: 14px 14px 12px; }
  .cocina-numero { font-size: 30px; }
  .cocina-plato { font-size: 18px; }
  .cocina-acciones { display: grid; gap: 8px; }
  .cocina-acciones .cocina-boton-principal { min-height: 54px; font-size: 17px; border-radius: 12px; }
  .cocina-acciones-sec { justify-content: space-between; }
  .cocina-acciones-sec .btn { min-height: 40px; }
  .barra-deshacer { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ===== Agenda (módulo de citas) ===== */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.agenda-barra select { width: auto; min-width: 190px; }
.agenda-semana { display: flex; align-items: center; gap: 6px; }
.agenda-rango { margin-left: 6px; font-weight: 650; }
.agenda { display: grid; gap: 12px; }
.agenda-dia { padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.agenda-dia > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.agenda-hoy { border-left: 4px solid var(--primario); }
.agenda-pasado { opacity: 0.8; }
.agenda-dia .vacio-sm { padding: 4px 0; text-align: left; }
.agenda-citas { margin: 0; padding: 0; list-style: none; display: grid; }
.agenda-cita { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--borde); }
.agenda-cita:first-child { border-top: 0; }
.agenda-cancelada .agenda-detalle { text-decoration: line-through; color: var(--texto-3); }
.agenda-hora { display: grid; font-variant-numeric: tabular-nums; }
.agenda-hora span { font-size: 12.5px; }
.agenda-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agenda-notas { margin-top: 3px; font-size: 13px; color: var(--texto-2); font-style: italic; }
.agenda-recordatorios { margin-top: 3px; font-size: 12.5px; color: var(--texto-3); }
.agenda-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.agenda-bloqueo { margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px dashed var(--borde); font-size: 13px; color: var(--texto-2); }
.agenda-bloqueos { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.agenda-bloqueos summary { margin: 0; }
.agenda-lista-bloqueos { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.agenda-lista-bloqueos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agenda-lista-bloqueos button { margin-left: auto; }
.agenda-horas { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; padding: 2px; }
.agenda-horas .chip { font-variant-numeric: tabular-nums; }
.agenda-otra-hora summary { margin: 8px 0 4px; font-size: 13px; }
/* Calendario del mes */
.pagina.pagina-agenda { max-width: 1320px; }
.agenda-dia-cab { align-items: center; margin-bottom: 8px; }
.agenda-dia-cab h2 { display: flex; align-items: center; gap: 8px; }
.agenda-dia > .agenda-dia-cab h2 { margin: 0; }
.cal { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.cal > .agenda-dia { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.cal > .agenda-dia .agenda-cita { grid-template-columns: 76px minmax(0, 1fr); }
.cal > .agenda-dia .agenda-acciones { grid-column: 1 / -1; justify-content: flex-start; }
.cal-mes { padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.cal-cabecera, .cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-cabecera span { padding: 2px 6px 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); }
.cal-dia {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 6px;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); text-align: left; cursor: pointer; overflow: hidden;
}
.cal-dia:hover { border-color: var(--texto-3); }
.cal-otro-mes { background: var(--superficie-2); color: var(--texto-3); }
.cal-otro-mes .cal-evento { opacity: 0.6; }
.cal-pasado .cal-numero { color: var(--texto-3); }
.cal-hoy .cal-numero { align-self: flex-start; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; background: var(--primario); color: #fff; }
.cal-elegido { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); background: color-mix(in srgb, var(--primario) 7%, var(--superficie)); }
.cal-numero { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-bloqueo { font-size: 10px; }
.cal-eventos { display: grid; gap: 2px; min-width: 0; }
.cal-evento {
  display: block; padding: 1px 5px; border-radius: 4px; border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 11.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto);
}
.cal-evento b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-mas { font-size: 11px; font-weight: 600; color: var(--texto-3); padding-left: 4px; }
.cal-cuenta { display: none; }
.cal-agendada { --c: #3b82f6; }
.cal-confirmada { --c: #16a34a; }
.cal-completada { --c: #64748b; }
.cal-no_asistio { --c: #d97706; }
.cal-cancelada { --c: #dc2626; }
.cal-cancelada.cal-evento { text-decoration: line-through; opacity: 0.7; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
@media (max-width: 1100px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
  .cal > .agenda-dia { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .cal-mes { padding: 8px; }
  .cal-cabecera, .cal-grilla { gap: 2px; }
  .cal-cabecera span { padding: 2px 0 4px; text-align: center; font-size: 10.5px; }
  .cal-dia { min-height: 52px; align-items: center; padding: 4px 2px; }
  .cal-eventos { display: none; }
  .cal-cuenta {
    display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--primario-suave); color: var(--primario); font-size: 11px; font-weight: 700;
  }
}

/* Configuración: servicios y asesores */
.lista-editable { display: grid; gap: 8px; margin-bottom: 10px; }
.fila-servicio { display: grid; grid-template-columns: minmax(0, 2fr) 110px minmax(0, 2fr) auto; gap: 8px; align-items: end; }
.asesor { padding: 12px 0; border-top: 1px solid var(--borde); }
.asesor:first-of-type { border-top: 0; }
.asesor .dias-semana { margin: 6px 0 8px; }
.fila-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) {
  .agenda-cita { grid-template-columns: 70px minmax(0, 1fr); }
  .agenda-acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .fila-servicio { grid-template-columns: 1fr 90px; }
  .fila-servicio > :nth-child(3) { grid-column: 1 / -1; }
  .fila-horas { grid-template-columns: 1fr 1fr; }
}

/* ===== Personal del restaurante ===== */
.lista-personal { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.persona { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.persona.inactiva { opacity: 0.6; }
.persona-datos { display: grid; gap: 2px; min-width: 0; }
.persona-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.persona-acceso { font-size: 12.5px; }
.persona-acciones { display: flex; gap: 6px; }
.opciones-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion-rol { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.opcion-rol:has(input:checked) { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 8%, var(--superficie)); }
.opcion-rol input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--primario); }
.opcion-rol span { display: grid; gap: 2px; }
.fila-clave { display: flex; gap: 8px; }
.fila-clave input { flex: 1; font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 560px) {
  .opciones-rol { grid-template-columns: 1fr; }
  .persona-acciones { width: 100%; }
  .persona-acciones .btn { flex: 1; min-height: 40px; }
}

/* ===== Menú por QR ===== */
.celda-plato { display: flex; align-items: center; gap: 10px; }
.foto-plato { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; overflow: hidden; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); color: var(--texto-3); cursor: pointer; }
.foto-plato img { width: 100%; height: 100%; object-fit: cover; }
.foto-plato.sin-foto { border-style: dashed; }
.foto-plato:hover { border-color: var(--primario); color: var(--primario); }
.foto-grande { display: block; width: 100%; max-height: 360px; object-fit: contain; margin-bottom: 12px; border-radius: 10px; background: var(--superficie-2); }
.qr-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.qr-vista svg { display: block; border-radius: 6px; }
.qr-vista-acciones { display: grid; gap: 8px; justify-items: start; }
.enlace-publico { font-size: 12px; word-break: break-all; color: var(--texto-2); }
.agenda-espera { margin-bottom: 12px; }
.cocina-mesa { font-size: 15px; font-weight: 800; }
.zona-impresion { display: none; }
@media print {
  body.imprimiendo > *:not(.zona-impresion) { display: none !important; }
  body.imprimiendo { background: #fff; }
  body.imprimiendo .zona-impresion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12mm; padding: 6mm; }
  .qr-tarjeta { display: grid; justify-items: center; gap: 6px; padding: 8mm 6mm; border: 1px dashed #999; border-radius: 6mm; break-inside: avoid; color: #000; text-align: center; font-family: system-ui, sans-serif; }
  .qr-negocio { font-size: 13pt; font-weight: 700; }
  .qr-titulo { font-size: 20pt; font-weight: 800; }
  .qr-subtitulo { font-size: 10pt; color: #333; }
}

/* ===== Gestión (herramienta interna) ===== */
.pagina.pagina-gestion, .pagina.pagina-gestion-clientes { max-width: 1320px; }
.pagina.pagina-gestion-clientes { max-width: none; }
.alerta-info { background: color-mix(in srgb, #3b82f6 12%, transparent); color: var(--texto-2); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--borde); border-top: 4px solid var(--c, var(--primario));
  border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); color: inherit;
}
a.kpi:hover { border-color: var(--texto-3); border-top-color: var(--c, var(--primario)); }
.kpi-titulo { font-size: 12px; font-weight: 650; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-valor { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-detalle { font-size: 12.5px; color: var(--texto-3); }
.kpi-verde { --c: #16a34a; } .kpi-azul { --c: #3b82f6; } .kpi-rojo { --c: #dc2626; } .kpi-ambar { --c: #f59e0b; } .kpi-morado { --c: #8b5cf6; }
.gestion-columnas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gestion-col > .tarjeta h2 { margin-bottom: 10px; }
.gestion-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gestion-filtros input[type="search"] { width: min(320px, 100%); }
.gestion-filtros select { width: auto; min-width: 180px; }

/* Tareas */
.lista-tareas { margin: 0; padding: 0; list-style: none; display: grid; }
.tarea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--borde); }
.tarea:first-child { border-top: 0; }
.tarea-check { width: 19px; height: 19px; accent-color: var(--verde); cursor: pointer; }
.tarea-cuerpo { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.tarea-cuerpo:hover .tarea-titulo { color: var(--primario); }
.tarea-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarea-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--texto-3); }
.tarea-cliente { font-weight: 600; color: var(--texto-2); }
.tarea-en-curso { color: #2563eb; font-weight: 650; }
.tarea-vence { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarea-vence.vencida { color: var(--rojo); font-weight: 700; }
.tarea-hecha .tarea-titulo { text-decoration: line-through; color: var(--texto-3); }
.tarea-vencida { box-shadow: inset 3px 0 0 var(--rojo); padding-left: 8px; }
.grupos-tareas { display: grid; gap: 12px; }
.grupo-tareas h2 { margin-bottom: 6px; }
.grupo-vencidas { border-color: color-mix(in srgb, var(--rojo) 40%, var(--borde)); }
.grupo-vencidas h2 { color: var(--rojo); }
.tareas-hechas { margin-top: 10px; }
.tablero-tareas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.columna-tareas { display: grid; gap: 8px; padding: 10px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); min-height: 200px; }
.columna-tareas > header { font-weight: 700; padding: 2px 4px 4px; }
.columna-en_curso > header { color: #2563eb; } .columna-hecha > header { color: var(--verde); }
.tarjeta-tarea { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra); cursor: grab; }
.tarjeta-tarea.vencida { border-left: 3px solid var(--rojo); }
.tarjeta-tarea-titulo { font-weight: 650; }
.tarjeta-tarea-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.soltar { outline: 2px dashed var(--primario); outline-offset: -2px; }

/* Detalle de tarea */
.dialogo:has(.dialogo-ancho) { width: min(680px, calc(100vw - 32px)); }
.dialogo-seccion { margin: 16px 0 8px; }
.fila-campos.fila-3 { grid-template-columns: 1.2fr 1fr 0.8fr; }
.tarea-detalle-cab { display: grid; gap: 8px; margin-bottom: 12px; }
.tarea-detalle-titulo { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--texto); }
.tachada { text-decoration: line-through; color: var(--texto-3); }
.datos-tarea, .datos-ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
.datos-tarea dt, .datos-ficha dt { color: var(--texto-3); }
.datos-tarea dd, .datos-ficha dd { margin: 0; overflow-wrap: anywhere; }
.datos-tarea a, .datos-ficha a, .lista-cobros a, .alerta-titulo a, .actividad-meta a { color: var(--primario); font-weight: 600; }
.tarea-descripcion { margin-top: 12px; white-space: pre-wrap; color: var(--texto-2); }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.paso { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.paso input { width: 17px; height: 17px; accent-color: var(--verde); }
.paso-hecho span { text-decoration: line-through; color: var(--texto-3); }
.lista-pasos-editar { display: grid; gap: 6px; margin-bottom: 6px; }
.paso-editar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.paso-editar input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde); }
.comentar { display: grid; gap: 6px; margin-top: 8px; }
.comentar button { justify-self: end; }
.dialogo-acciones-entre { justify-content: space-between; flex-wrap: wrap; margin-top: 16px; }

/* Historial (línea de tiempo) */
.linea-tiempo { margin: 0; padding: 0; list-style: none; display: grid; }
.actividad { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde); }
.actividad:first-child { border-top: 0; }
.actividad-icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 14px; }
.actividad-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.actividad-meta { font-size: 12px; margin-top: 2px; }
.actividad-etapa .actividad-texto, .actividad-pago .actividad-texto { font-weight: 600; }
.actividad-sistema .actividad-texto, .actividad-tarea .actividad-texto { color: var(--texto-2); }
.linea-tiempo-compacta .actividad { padding: 7px 0; font-size: 13.5px; }
.linea-tiempo-compacta .actividad-icono { width: 26px; height: 26px; font-size: 12px; }
.nueva-actividad { display: grid; gap: 8px; }
.nueva-actividad .fila-entre { align-items: center; }
.nueva-actividad select { width: auto; }

/* Alertas, cobros y embudo del panel */
.alertas-gestion { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.alertas-gestion li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); border-left-width: 4px; }
.alerta-critica { border-left-color: #dc2626 !important; background: color-mix(in srgb, #dc2626 6%, transparent); }
.alerta-alta { border-left-color: #f59e0b !important; }
.alerta-media { border-left-color: #eab308 !important; }
.alerta-titulo { font-weight: 650; }
.alertas-gestion .tenue { font-size: 12.5px; }
.lista-cobros { margin: 0; padding: 0; list-style: none; display: grid; }
.lista-cobros li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--borde); }
.lista-cobros li:first-child { border-top: 0; }
.lista-cobros strong { font-variant-numeric: tabular-nums; }
.embudo-gestion { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.embudo-gestion li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 13px; }
.embudo-barra { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.embudo-barra span { display: block; height: 100%; border-radius: 999px; min-width: 0; }
.embudo-gestion strong { text-align: right; font-variant-numeric: tabular-nums; }

/* Tablero de clientes */
.tablero-gestion { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.columna-gestion { display: grid; gap: 8px; padding: 10px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); border-top: 4px solid var(--color); min-height: 240px; align-content: start; }
.columna-gestion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 4px; }
.columna-gestion-nombre { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.columna-gestion-total { font-size: 12px; font-variant-numeric: tabular-nums; }
.columna-gestion-lista { display: grid; gap: 8px; }
.tarjeta-gc { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra); cursor: grab; }
.tarjeta-gc:hover { border-color: var(--texto-3); }
.tarjeta-gc.arrastrando { opacity: 0.45; }
.tarjeta-gc-mora { border-left: 3px solid var(--rojo); }
.tarjeta-gc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarjeta-gc-valor { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tarjeta-gc-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.tarjeta-gc-meta .pill { font-size: 11px; }
.tarjeta-gc-contacto { font-size: 12px; }
.tarjeta-gc-mover { display: none; font-size: 12.5px; min-height: 30px; }
.fila-clic { cursor: pointer; }
.fila-clic:hover td { background: var(--superficie-2); }
.fila-anulada td { opacity: 0.55; text-decoration: line-through; }
.fila-anulada td.acciones, .fila-anulada .pill { text-decoration: none; }
.fila-mora td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }

/* Ficha del cliente */
.ficha-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ficha-titulo { display: grid; gap: 8px; }
.ficha-titulo h1 { font-size: 22px; }
.ficha-titulo .chips { align-items: center; }
.selector-etapa { width: auto; min-height: 30px; padding: 2px 30px 2px 10px; border-radius: 999px; font-weight: 650; font-size: 13px;
  color: var(--color); border-color: var(--color); background-color: color-mix(in srgb, var(--color) 12%, var(--superficie)); }
.ficha-columnas { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.ficha-lateral .tarjeta h2 { margin-bottom: 10px; }
.contacto-ficha { display: grid; gap: 6px; justify-items: start; }
.notas-ficha { white-space: pre-wrap; color: var(--texto-2); }
.pago-cubre { margin: 4px 0 8px; font-size: 13px; }
.pasos-vincular { display: grid; gap: 10px; margin: 8px 0 14px; padding-left: 20px; }
.codigo-grande { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 18px; font-weight: 800; letter-spacing: 0.15em; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gestion-columnas, .ficha-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi-valor { font-size: 21px; }
  .tablero-tareas { grid-template-columns: minmax(0, 1fr); }
  .tablero-gestion { grid-auto-columns: minmax(240px, 85vw); }
  .tarea { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tarea > .pill { display: none; }
  .fila-campos.fila-3 { grid-template-columns: 1fr 1fr; }
  .lista-cobros li { grid-template-columns: minmax(0, 1fr) auto; }
  .alertas-gestion li { grid-template-columns: auto minmax(0, 1fr); }
  .alertas-gestion li .btn { grid-column: 2; justify-self: start; }
}
@media (hover: none) {
  .tarjeta-gc-mover { display: block; }
}

/* ===== Consumo de IA ===== */
.consumo-proveedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.consumo-proveedor { margin: 0; display: grid; gap: 10px; }
.consumo-proveedor h2 { margin: 0; }
.consumo-proveedor p { margin: 0; }
.consumo-marcas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.consumo-cifra { display: grid; gap: 2px; }
.consumo-numero { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.consumo-medidor-cab { align-items: center; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.medidor { height: 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; }
.medidor-barra { height: 100%; border-radius: 999px; background: var(--estado, var(--verde)); }
.estado-bien { --estado: var(--verde); }
.estado-aviso { --estado: var(--ambar); }
.estado-critico { --estado: var(--rojo); }
.estado-uso { font-size: 12.5px; color: var(--texto-2); }
.estado-uso > span { color: var(--estado); }
.consumo-detalle { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.consumo-frescura { font-size: 12px; }
.consumo-viejo, .consumo-alerta { color: var(--ambar); }
.consumo-sin-dato { font-size: 13.5px; color: var(--texto-2); }
.consumo-mensaje { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-consumo { font-size: 12.5px; }

/* ===== Lista de negocios ===== */
/* Las tarjetas de una misma fila terminan a la misma altura. Antes cada una acababa donde le
   tocaba —un nombre que envuelve, una etiqueta más— y los botones "Entrar al negocio" quedaban
   escalonados. Eso es lo que se lee como descuido aunque nadie sepa señalar por qué.
   `align-items: start` lo impedía; la pieza que faltaba es el `margin-top: auto` de las acciones. */
.negocios { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: stretch; }
.negocio-tarjeta { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.negocio-tarjeta h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.negocio-tarjeta p.tenue { margin: 2px 0 0; }
.negocio-tarjeta.inactivo { opacity: 0.65; }
/* Alto mínimo para que la cabecera no salte según el nombre y las etiquetas que traiga */
.negocio-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 48px; }
.negocio-cab > div:first-child { min-width: 0; }
.negocio-cab > .pill { flex: none; }
/* Pegado a las fichas y separado de los botones: se lee como pie de los datos, no como un botón más */
.negocio-pie { margin: -2px 0 0; font-size: 12.5px; }
/* Dos columnas fijas: con auto-fit una tarjeta podía quedar con dos y la de al lado con tres */
.negocio-tarjeta .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.negocio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
@media (max-width: 720px) { .negocios { grid-template-columns: minmax(0, 1fr); } }

/* ===== Toasts y diálogos ===== */
#toasts { position: fixed; right: 16px; top: 16px; z-index: 100; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  padding: 11px 14px; border-radius: 8px; box-shadow: var(--sombra-alta);
  background: var(--texto); color: var(--superficie); font-weight: 500;
  animation: entrar 0.2s ease-out;
}
.toast-error { background: var(--rojo); color: #fff; }
.toast-exito { background: var(--primario); color: #fff; }
.toast.saliendo { opacity: 0; transform: translateY(6px); transition: all 0.25s; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

.dialogo {
  width: min(520px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--borde); border-radius: 14px;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgb(15 23 42 / 0.45); }
.dialogo-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px 20px; }
.dialogo-cuerpo { padding: 10px 20px 20px; }
.dialogo-cuerpo > p { margin-bottom: 18px; color: var(--texto-2); }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ===== Login ===== */
.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; background: radial-gradient(circle at 20% 10%, var(--primario-suave), transparent 45%), var(--fondo); }
.login-caja { width: min(380px, 100%); padding: 28px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-alta); }
.login-caja h1 { margin: 18px 0 18px; }
.marca { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.marca-login { font-size: 18px; }

/* ===== Marco de la app ===== */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.lateral {
  display: flex; flex-direction: column; flex: none; width: 232px; padding: 16px 12px;
  background: var(--lateral); color: var(--lateral-texto); border-right: 1px solid var(--lateral-borde);
}
.lateral .marca { color: var(--lateral-fuerte); padding: 2px 8px 18px; }
.lateral-negocio { padding: 0 8px 16px; }
.etiqueta-sm { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lateral-tenue); margin-bottom: 5px; }
.selector-negocio { background: var(--lateral-hover); border-color: var(--lateral-borde); color: var(--lateral-fuerte); }
.negocio-unico { color: var(--lateral-fuerte); font-weight: 600; }
.negocio-cambiar { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--lateral-texto); text-decoration: underline; }
.negocio-cambiar:hover, .negocio-cambiar.activo { color: #fff; }
.nav { display: grid; gap: 2px; }
/* Secciones plegables del menú. El encabezado es un botón, no un rótulo: antes el menú eran 26
   entradas en una columna que había que desplazar para llegar al final. */
.nav-grupo-caja { display: grid; gap: 2px; }
.nav-grupo-items { display: grid; gap: 2px; }
.nav-grupo-caja[data-abierto="false"] .nav-grupo-items { display: none; }
.nav-grupo { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  margin: 12px 0 2px; padding: 4px 10px; border: 0; background: none; color: var(--lateral-tenue); font: inherit;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: left; cursor: pointer; transition: color var(--mov-rapido) var(--curva); }
.nav-grupo:hover { color: var(--lateral-texto); }
.nav-grupo::after { content: ""; flex: none; width: 6px; height: 6px; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform var(--mov-rapido) var(--curva); }
.nav-grupo-caja[data-abierto="false"] .nav-grupo::after { transform: rotate(-45deg) translate(-1px, 1px); }
.nav-enlace {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--lateral-texto); font-weight: 550; cursor: pointer; text-align: left;
}
.nav-enlace:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.nav-enlace.activo { background: var(--lateral-activo); color: var(--lateral-activo-texto); font-weight: 600; }
.badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.lateral-pie { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--lateral-borde); }
.usuario-caja { padding: 8px 10px; border-radius: 8px; }
.usuario-caja:hover, .usuario-caja.activo { background: var(--lateral-hover); }
.usuario-nombre { color: var(--lateral-fuerte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-rol { font-size: 12px; color: var(--lateral-tenue); }
/* Claro / oscuro / lo que diga el sistema. */
.tema-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 8px 0 2px; padding: 2px; border-radius: 8px; background: var(--lateral-hover); }
.tema-opcion { padding: 5px 0; border: 0; border-radius: 6px; background: transparent; color: var(--lateral-tenue); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva); }
.tema-opcion:hover { color: var(--lateral-texto); }
.tema-opcion.activo { background: var(--lateral-activo); color: var(--lateral-activo-texto); }

.principal { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vista { flex: 1; min-height: 0; overflow: auto; }
.barra-movil { display: none; }
.velo { display: none; }

/* ===== Páginas genéricas ===== */
.pagina { padding: 24px 28px; max-width: 1200px; }
.pagina-estrecha { max-width: 640px; }
/* Cabecera de página: el mismo patrón en todas las pantallas —título y explicación a la
   izquierda, la acción principal a la derecha—. Es lo que hace que al cambiar de pantalla sientas
   que sigues en el mismo producto. Sin línea separadora: GoHighLevel separa con aire, no con
   rayas, y una raya en cada pantalla termina pesando. */
.pagina-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; }
.pagina-cab h1 { margin: 0; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; }
.pagina-cab p { margin-top: 5px; }
.tarjeta { padding: 20px; margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.tarjeta h2 { margin-bottom: 14px; }
.datos { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.datos dt { color: var(--texto-3); }
.datos dd { margin: 0; font-weight: 550; }
/* Barra de herramientas: lo que filtra a la izquierda, el buscador y las acciones a la derecha.
   Cada pantalla la escribía en el orden que le convino —unas el buscador primero, otras los chips—,
   así que el ojo tenía que volver a buscarlo en cada sección. Se ordena desde aquí con `order` y un
   `margin-left: auto`, y por eso no hubo que tocar las trece vistas una por una. */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.barra-filtros .buscador { order: 10; flex: none; margin-left: auto; width: min(300px, 100%); }
.barra-filtros > .btn, .barra-filtros > .fila-acciones { order: 11; }
.barra-filtros select { width: auto; }
/* Todo a la misma altura. Los chips medían 26 px y los campos 38, y la fila se veía torcida sin
   que se supiera por qué: es el mismo problema de ritmo de las fichas de números. */
.barra-filtros .chip, .barra-filtros .btn, .barra-filtros select,
.barra-filtros input:not([type="checkbox"]), .barra-filtros .segmento { min-height: 36px; }
/* Dentro de una barra el chip es un control, no una etiqueta: esquina suave como los campos */
.barra-filtros .chip { padding: 0 12px; border-radius: 8px; }

/* ===== Tabla ===== */
.tabla-contenedor { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.inactivo td { opacity: 0.6; }
.tabla .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.celda-nombre { font-weight: 600; }
.celda-desc { max-width: 440px; margin-top: 2px; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones .btn + .btn { margin-left: 6px; }
/* En una tabla de treinta platos, sesenta botones con su borde y su fondo compiten con los datos,
   que son lo que viniste a leer. Los botones se quedan sin caja hasta que llegas a su fila, pero
   el TEXTO mantiene su contraste: atenuar un control hasta dejarlo pálido es peor que dibujarlo
   entero. Con el teclado aparece igual, por `focus-within`. */
.tabla tbody .acciones .btn { border-color: transparent; background: transparent; }
.tabla tbody tr:hover .acciones .btn, .tabla tbody tr:focus-within .acciones .btn {
  border-color: var(--borde); background: var(--superficie); }
.tabla tbody .acciones .btn:hover { background: var(--superficie-2); border-color: var(--texto-3); }
/* La acción que destruye no va en rojo de entrada: en cada renglón, el rojo se lleva la vista justo
   a lo único que no se puede deshacer. Se pone roja cuando vas a pulsarla, que es cuando importa. */
.tabla .acciones .btn-peligro-suave { color: var(--texto-2); }
.tabla .acciones .btn-peligro-suave:hover { color: var(--rojo); border-color: var(--rojo); }

/* ===== Conversaciones ===== */
.conv { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; height: 100%; }
.conv:not([data-abierta]) { grid-template-columns: 340px minmax(0, 1fr); }
.conv:not([data-abierta]) .conv-ficha { display: none; }
.conv-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); background: var(--superficie); }
.conv-lista-cab { display: grid; gap: 10px; padding: 16px 14px 12px; border-bottom: 1px solid var(--borde); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2); font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition: background var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido);
}
/* Seleccionado con un tinte y el borde del acento, no con un relleno sólido: es lo que hace
   GoHighLevel, y con tres o cuatro chips a la vez un relleno fuerte compite con el botón de acción */
.chip.activo { background: var(--primario-suave); border-color: var(--primario); color: var(--primario); }
.chip-num { font-variant-numeric: tabular-nums; opacity: 0.8; }
.chip-alerta:not(.activo) { border-color: var(--rojo); color: var(--rojo); }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--borde); border-left: 3px solid transparent;
  transition: background var(--mov-rapido), border-left-color var(--mov-rapido); }
.conv-item:hover { background: var(--superficie-2); }
.conv-item.activo { background: var(--primario-suave); }
.conv-item.urgente { border-left-color: var(--rojo); }
.conv-item-cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.conv-item-nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-hora { flex: none; font-size: 12px; color: var(--texto-3); }
.conv-item-texto { color: var(--texto-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prefijo { color: var(--texto-3); }
/* Una sola línea, pase lo que pase. Antes envolvía a dos y cada conversación medía casi 100 px:
   en una pantalla cabían seis. Lo que no quepa se corta, que es mejor que empujar la siguiente. */
.conv-item-meta { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 3px; overflow: hidden; }
.conv-item-meta > * { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-meta:empty { display: none; }
/* Pide una persona: el borde rojo de la izquierda ya lo decía, esto lo hace visible sin gastar fila */
/* `baseline` no sirve con un punto y un icono, que no tienen texto con el que alinearse */
.conv-item .fila-entre { align-items: center; gap: 6px; }
.conv-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); }
.conv-pausa { flex: none; display: inline-flex; color: var(--texto-3); }
.pill-agente { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }

/* Todas / Por agente */
.conv-titulo { align-items: center; }
.segmento { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); }
.segmento button {
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--texto-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.segmento button.activo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.conv-grupo-cab {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.conv-grupo-cab:hover { background: var(--primario-suave); }
.conv-grupo-cab svg { flex: none; color: var(--texto-3); transform: rotate(180deg); transition: transform 0.15s; }
.conv-grupo-cab[aria-expanded="true"] svg { transform: rotate(-90deg); }
.conv-grupo-nombre { min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-grupo-canal { flex: none; font-size: 12px; color: var(--texto-3); }
.conv-grupo-num { flex: none; margin-left: auto; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.vacio-sm { padding: 14px 20px; font-size: 13px; }

.conv-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-fondo); }
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 62px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.chat-cab-info { flex: 1; min-width: 0; }
.chat-cab-nombre { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-cab-sub { font-size: 12px; color: var(--texto-3); }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.separador-dia { align-self: center; margin: 10px 0 4px; }
.separador-dia span { padding: 3px 10px; border-radius: 999px; background: var(--superficie); color: var(--texto-3); font-size: 12px; box-shadow: var(--sombra); }
.msg { display: flex; }
.msg-cliente { justify-content: flex-start; }
.msg-bot, .msg-humano { justify-content: flex-end; }
.msg-burbuja { max-width: min(560px, 78%); padding: 7px 11px 5px; border-radius: 12px; box-shadow: var(--sombra); }
.msg-cliente .msg-burbuja { background: var(--msg-cliente); border-top-left-radius: 3px; }
.msg-bot .msg-burbuja { background: var(--msg-bot); border-top-right-radius: 3px; }
.msg-humano .msg-burbuja { background: var(--msg-humano); border-top-right-radius: 3px; }
.msg-autor { font-size: 11.5px; font-weight: 650; color: var(--texto-2); margin-bottom: 2px; }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-pie { margin-top: 2px; font-size: 11px; color: var(--texto-3); text-align: right; }
.msg-media { display: grid; gap: 4px; margin-bottom: 4px; }
.msg-imagen { display: block; max-width: min(280px, 60vw); max-height: 320px; border-radius: 8px; }
.msg-audio { width: min(260px, 58vw); height: 34px; }
.msg-media-nota { font-size: 12px; color: var(--texto-2); font-style: italic; overflow-wrap: anywhere; }
.msg-archivo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-weight: 550; }
.msg-archivo:hover { border-color: var(--texto-3); }
.chat-composer { padding: 10px 16px 12px; border-top: 1px solid var(--borde); background: var(--superficie); }
.composer-fila { display: flex; align-items: flex-end; gap: 8px; }
.composer-fila textarea { resize: none; min-height: 40px; max-height: 160px; }
.btn-enviar { width: 42px; height: 40px; padding: 0; flex: none; }
.composer-aviso { margin-top: 6px; font-size: 11.5px; color: var(--texto-3); }

/* Información del bot (la edita el dueño) */
.info-bot .tarjeta { margin-bottom: 16px; }
.info-bot textarea { width: 100%; }
.info-avance .info-progreso { height: 8px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; margin: 10px 0 6px; }
.info-avance .info-progreso span { display: block; height: 100%; background: var(--primario); border-radius: 99px; }
.info-avance p { margin: 0; font-size: 13px; }
.info-avance.completa { border-color: var(--verde); }
.info-lista { display: grid; gap: 10px; margin: 12px 0; }
.info-fila { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.info-fila-campos { flex: 1; display: grid; gap: 6px; min-width: 0; }
.info-fila-campos input { font-weight: 600; }
.info-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 13px; }
.info-sugerencias .chip { display: inline-flex; align-items: center; gap: 4px; }
.info-previa summary { cursor: pointer; font-weight: 600; }
.info-previa pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; padding: 12px;
  background: var(--superficie-2); border-radius: 8px; max-height: 420px; overflow-y: auto; }
.info-barra-fija { position: sticky; bottom: 0; z-index: 3; margin: 0 -4px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--borde); }
.info-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.info-estado { font-size: 13px; color: var(--texto-2); }
.texto-error { color: var(--rojo); font-weight: 600; }

.exportar-atajos { margin-bottom: 12px; }

/* Inmobiliarias: avisos por aprobar, cierre con comisión e importación */
.avisos-inmuebles { border-left: 4px solid var(--ambar); margin-bottom: 16px; }
.lista-avisos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-avisos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.cierre-calculo { margin: 4px 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--primario-suave); color: var(--texto); font-weight: 600; font-size: 14px; }
.importar-errores { margin: 10px 0; font-size: 13px; }
.importar-errores ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.alerta-exito { background: var(--verde-suave); color: var(--verde); }
.inmueble-propietario { font-size: 12.5px; }
.opinion-visita { width: 100%; font-size: 13px; font-style: italic; }

/* Seguridad de cuentas: recordatorio de 2 pasos, códigos, auditoría y login */
/* Las franjas se comían dos filas del encabezado en TODAS las pantallas, en rojo y amarillo
   saturados. Siguen estando —si el motor está caído hay que enterarse— pero como una tira fina:
   el aviso no es más importante que el trabajo que vienes a hacer. */
.aviso-cuenta { display: block; padding: 6px 16px; background: var(--ambar-suave); color: var(--ambar); font-weight: 600; font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--borde); }
.aviso-cuenta[hidden] { display: none; }
.aviso-plan { display: block; padding: 6px 16px; background: var(--ambar-suave); color: var(--ambar); font-weight: 600; font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--borde); }
.aviso-plan.aviso-plan-grave { background: #b91c1c; color: #fff; }
.aviso-plan[hidden] { display: none; }
/* Consumo del plan (informe mensual y Gestión) */
.plan-tarjeta .plan-barras { display: grid; gap: 12px; margin-top: 10px; }
.plan-barra-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.plan-barra { height: 8px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; margin-top: 4px; }
.plan-barra span { display: block; height: 100%; background: var(--primario); }
.plan-barra.alto span { background: var(--ambar); }
.plan-barra.lleno span { background: var(--rojo); }
/* "Mi plan": qué incluye un plan a la medida y el consumo de los meses anteriores */
.plan-items { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px; }
.plan-items h3 { font-size: 14px; margin: 0 0 6px; }
.plan-items ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.plan-historial { display: grid; gap: 10px; margin-top: 10px; }
.plan-historial-fila { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.plan-historial-fila .plan-barra { margin-top: 0; min-width: 0; }
.plan-historial-mes { color: var(--texto-2); text-transform: capitalize; }
.plan-historial-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-explicada { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--texto-2); }
.pasos-2fa { padding-left: 20px; display: grid; gap: 10px; }
.codigo-telegram { font-size: 19px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.qr-2fa { margin: 10px 0 6px; display: block; width: fit-content; padding: 8px; background: #fff; border-radius: 8px; border: 1px solid var(--borde); }
.qr-2fa svg { display: block; }
.input-codigo { font-size: 22px; letter-spacing: 4px; font-variant-numeric: tabular-nums; max-width: 220px; }
.codigos-respaldo { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codigos-respaldo code { display: block; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 6px; font-size: 15px; text-align: center; }
.enlace-login { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; color: var(--primario); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.login-caja .alerta-info { margin: 12px 0; }
.tabla-auditoria .celda-detalle { max-width: 360px; font-size: 12.5px; overflow-wrap: anywhere; color: var(--texto-2); }
.tabla-auditoria .fila-alerta { background: var(--rojo-suave); }
.auditoria-pie { margin-top: 12px; }

/* Informe mensual */
.informe .tiles { margin-bottom: 16px; }
.informe-seccion { margin: 22px 0 10px; font-size: 17px; }
.informe-destacados ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.informe-destacados li { font-size: 15px; line-height: 1.45; }
.informe-parcial { margin-bottom: 14px; }
.informe-nota { margin-top: 18px; font-size: 12.5px; }
@media print {
  body.imprimiendo-pagina .lateral, body.imprimiendo-pagina .barra-movil, body.imprimiendo-pagina .aviso-servicio,
  body.imprimiendo-pagina .no-imprimir, body.imprimiendo-pagina #toasts { display: none !important; }
  body.imprimiendo-pagina, body.imprimiendo-pagina .principal { background: #fff; }
  /* la app ocupa la pantalla con su propio scroll: al imprimir, todo el contenido en páginas */
  body.imprimiendo-pagina .app, body.imprimiendo-pagina .principal, body.imprimiendo-pagina .principal > * { display: block; height: auto; overflow: visible; }
  body.imprimiendo-pagina .tile, body.imprimiendo-pagina .tarjeta { box-shadow: none; break-inside: avoid; }
}

/* Adjuntar foto o archivo en el chat */
.composer-adjunto { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie-2); }
.composer-adjunto[hidden] { display: none; }
.composer-adjunto img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.composer-adjunto-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; background: var(--primario-suave); color: var(--primario); flex: none; }
.composer-adjunto-info { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.composer-adjunto-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-chat.soltando { outline: 3px dashed var(--primario); outline-offset: -6px; }

/* Respuestas rápidas: menú sobre el cuadro de texto */
.chat-composer { position: relative; }
.btn-rapidas { width: 40px; height: 40px; flex: none; color: var(--primario); }
.btn-rapidas[aria-expanded="true"] { background: var(--primario-suave); }
.respuestas-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); max-height: min(320px, 50vh); overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); z-index: 5; padding: 4px; }
.respuestas-menu[hidden] { display: none; }
.respuesta-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--texto); font: inherit; cursor: pointer; }
.respuesta-opcion strong { font-size: 13px; color: var(--primario); }
.respuesta-opcion span { font-size: 13px; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.respuesta-opcion:hover, .respuesta-opcion.marcada { background: var(--superficie-2); }
.respuesta-opcion.marcada { box-shadow: inset 3px 0 0 var(--primario); }
.respuestas-administrar { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; margin-top: 2px; border: 0;
  border-top: 1px solid var(--borde); background: none; color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.respuestas-vacio { padding: 10px; font-size: 13px; }
.respuestas-vacio p { margin: 0 0 8px; }
.respuestas-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.respuestas-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); }
.respuestas-lista li p { margin: 2px 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.respuestas-lista .fila-acciones { flex: none; align-self: flex-start; }
.respuestas-admin form textarea { width: 100%; }

.conv-ficha { overflow-y: auto; border-left: 1px solid var(--borde); background: var(--superficie); }
/* De quién es la ficha, arriba del todo: antes el encabezado decía "Ficha del cliente", que es lo
   único que ya sabías. Al volver a un chat después de atender otros tres, lo que buscas es el nombre. */
.ficha-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ficha-quien-texto { min-width: 0; }
.ficha-quien h2 { margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-quien p { margin: 1px 0 0; font-size: 12px; }
.avatar-md { width: 34px; height: 34px; font-size: 13px; }
/* Etiquetas: se ponen y se quitan aquí mismo, que es donde te das cuenta de que hacen falta */
.ficha-etiquetas { align-items: center; }
.chip-etiqueta { border-color: color-mix(in srgb, var(--color) 50%, transparent); }
.chip-etiqueta.activo { background: color-mix(in srgb, var(--color) 16%, transparent); color: var(--color); }
.chip-anadir { width: auto; min-height: 28px; padding: 2px 8px; font-size: 12.5px; color: var(--texto-2); }
.ficha-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; min-height: 62px; }
.ficha-cab .btn-icono { display: none; }
.ficha-bloque { display: grid; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--borde); }
.destacado { padding: 8px 10px; border-radius: 8px; background: var(--ambar-suave); color: var(--texto); font-weight: 550; }
.etapa-actual select { border-left: 4px solid var(--color); font-weight: 600; }
.interruptor { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--primario); }
.linea-tiempo { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: 13px; }
.boton-ficha, .solo-movil { display: none; }

/* ===== Tablero ===== */
.pagina-tablero { max-width: none; height: 100%; display: flex; flex-direction: column; }
.pagina-tablero .pagina-cab select { width: auto; min-width: 200px; }
.tablero { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.columna { display: flex; flex-direction: column; flex: 0 0 272px; min-height: 0; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); border-top: 3px solid var(--color); }
.columna.sobre { background: color-mix(in srgb, var(--color) 12%, var(--superficie-2)); border-style: dashed; }
.columna, .columna-vacia { transition: background var(--mov) var(--curva), border-color var(--mov); }
.columna-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.columna-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--color); }
.columna-cab h2 { flex: 1; font-size: 14px; }
.columna-total { padding: 1px 8px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); font-size: 12px; font-weight: 650; color: var(--texto-2); }
.columna-tarjetas { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 2px 10px 10px; }
.columna-vacia { padding: 18px 0; text-align: center; font-size: 13px; color: var(--texto-3); border: 1px dashed var(--borde); border-radius: 8px; }
.columna-mas { padding: 0 12px 10px; font-size: 12px; }
.tarjeta-cliente { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra); cursor: grab;
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), transform var(--mov-rapido), opacity var(--mov-rapido); }
.tarjeta-cliente:hover { border-color: var(--texto-3); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.tarjeta-cliente.urgente { border-left: 3px solid var(--rojo); }
.tarjeta-cliente.arrastrando { opacity: 0.45; }
.tarjeta-cab { display: flex; align-items: center; gap: 8px; }
.tarjeta-nombre { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-hora { font-size: 11.5px; }
.tarjeta-producto { font-size: 12.5px; color: var(--texto-2); }
.tarjeta-accion { font-size: 12.5px; color: var(--texto-2); font-style: italic; }
.tarjeta-mover { display: none; }

/* ===== Responsive ===== */
@media (max-width: 1180px) {
  /* El :not([data-abierta]) de arriba pesa más que un .conv suelto: hay que repetirlo o no se aplica */
  .conv, .conv:not([data-abierta]) { grid-template-columns: 320px minmax(0, 1fr); }
  .conv-ficha { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(340px, 92vw); box-shadow: var(--sombra-alta); transform: translateX(105%); transition: transform 0.2s; }
  .conv[data-ficha] .conv-ficha { transform: none; }
  .ficha-cab .btn-icono, .boton-ficha { display: inline-grid; }
}

@media (max-width: 860px) {
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; transform: translateX(-100%); transition: transform 0.2s; }
  .app.menu-abierto .lateral { transform: none; }
  .app.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / 0.4); }
  .barra-movil { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
  .barra-movil-titulo { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pagina { padding: 16px; }
  .pagina-cab { flex-wrap: wrap; }
  /* En el celular se ve una sola columna a pantalla completa: la lista o el chat, nunca las dos */
  .conv, .conv:not([data-abierta]) { grid-template-columns: minmax(0, 1fr); }
  .conv[data-panel="lista"] .conv-chat, .conv[data-panel="chat"] .conv-lista { display: none; }
  .conv[data-panel="lista"] .conv-lista { border-right: 0; }
  .solo-movil { display: inline-grid; }
  .tile-valor { font-size: 21px; overflow-wrap: anywhere; }   /* cifras largas en pesos caben en la tarjeta */
  .chat-cab { flex-wrap: wrap; padding: 8px 10px; row-gap: 6px; }
  .chat-cab .avatar { display: none; }
  /* El nombre ocupa la primera fila (junto a "volver"); el estado y los botones van debajo */
  .chat-cab-info { flex: 1 1 calc(100% - 56px); }
  .chat-cab .boton-ficha { margin-left: auto; }
  .chat-mensajes { padding: 12px; }
  .msg-burbuja { max-width: 88%; }
  .fila-campos { grid-template-columns: 1fr; }
  .resumen-pedidos { grid-template-columns: 1fr; }
  .barra-filtros { flex-direction: column; }
  .barra-filtros .buscador { max-width: none; }

  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
  .tabla td { padding: 3px 0; border: 0; }
  .tabla td[data-titulo]::before { content: attr(data-titulo) ": "; color: var(--texto-3); font-size: 12px; }
  .tabla td:first-child::before { content: none; }
  .tabla .acciones { text-align: left; padding-top: 8px; }
}

@media (hover: none) {
  .tarjeta-mover { display: block; }
  .tarjeta-cliente { cursor: pointer; }
}

/* Franja de alerta del servicio (motor caído o IA fallando) */
.aviso-servicio { display: block; padding: 6px 16px; background: #b91c1c; color: #fff; font-weight: 600; font-size: 12.5px; line-height: 1.4; text-decoration: none; }
.aviso-servicio[hidden] { display: none; }

/* ===== Agenda: resumen, paquetes, pagos y servicios ===== */
.oculto-extra { display: none !important; }
.agenda-extra { display: grid; gap: 14px; margin-bottom: 14px; }
.agenda-resumen-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-resumen-barra > p { flex: 1 1 280px; margin: 0; }
.campo-linea { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.agenda-resumen { display: grid; gap: 14px; }
.agenda-resumen .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile-nota { margin-top: 2px; font-size: 12px; }
.agenda-resumen-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.agenda-barras { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.agenda-barras li { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.agenda-barras li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-barra-pista { height: 10px; border-radius: 999px; background: var(--viz-grilla); overflow: hidden; }
.agenda-barra-valor { display: block; height: 100%; border-radius: 999px; background: var(--viz-serie); }
.lista-paquetes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.paquete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.paquete > div:first-child { display: grid; gap: 4px; }
.paquete-cancelado { opacity: 0.6; }
.paquete-progreso { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.paquete-progreso span { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--borde); }
.paquete-progreso span.usada { border-color: var(--primario); background: var(--primario); }
.paquete-progreso span.agendada { border-color: var(--primario); background: var(--primario-suave); }
.servicio-editable { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px dashed var(--borde); }
.servicio-mas summary { cursor: pointer; font-size: 13px; color: var(--primario); }
.servicio-mas[open] summary { margin-bottom: 8px; }
.asesor-calendario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.pasos-calendario { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 4px; }

/* ===== Inmuebles (inmobiliarias) ===== */
.filtros-inmuebles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtros-inmuebles input { flex: 1 1 220px; }
.inmuebles-enlace { margin: -6px 0 12px; word-break: break-all; }
.inmuebles-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.inmueble-tarjeta { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.inmueble-tarjeta.cerrado { opacity: 0.6; }
.inmueble-foto { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 0; border: 0; background: var(--superficie-2); cursor: pointer; }
.inmueble-foto img { width: 100%; height: 100%; object-fit: cover; }
.inmueble-sin-foto { display: grid; justify-items: center; gap: 4px; color: var(--texto-3); font-size: 13px; }
.inmueble-codigo { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 6px; background: rgb(15 23 42 / 0.78); color: #fff; font-size: 12px; font-weight: 700; }
.inmueble-nfotos { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: rgb(15 23 42 / 0.7); color: #fff; font-size: 12px; }
.inmueble-cuerpo { display: grid; gap: 4px; padding: 12px 14px 14px; }
.inmueble-cuerpo h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.3; text-transform: none; letter-spacing: normal; color: var(--texto); font-weight: 700; }
.inmueble-precio { margin: 0; font-weight: 750; color: var(--primario); }
.inmueble-cuerpo p { margin: 0; }
.inmueble-actividad { font-size: 13px; color: var(--texto-2); }
.inmueble-cuerpo .fila-acciones { margin-top: 6px; }
.fila-campos.fila-5 { grid-template-columns: repeat(5, 1fr); }
.inmueble-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.inmueble-miniatura { margin: 0; overflow: hidden; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); }
.inmueble-miniatura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.inmueble-miniatura figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; }
.inmueble-agregar { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 110px; border: 1.5px dashed var(--borde); border-radius: 8px; background: none; color: var(--texto-2); font: inherit; cursor: pointer; }
.lista-interesados { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.lista-interesados li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.perfil-busca { display: grid; gap: 6px; }
.perfil-busca .fila-acciones { flex-wrap: wrap; }
@media (max-width: 640px) {
  .fila-campos.fila-5 { grid-template-columns: repeat(3, 1fr); }
}

/* Editor de opciones por plato (Menú): grupos donde el cliente elige una */
.grupos-opciones { display: grid; gap: 10px; margin: 8px 0; }
.grupo-opcion { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }

/* ---------------------------------------------------------------- Formularios públicos (v2) */
/* El enlace de la página pública, con el botón de copiar al lado */
.form-enlace { display: flex; align-items: center; gap: 4px; }
.form-enlace a { font-size: 12px; word-break: break-all; }

.chip-estado {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.chip-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-activo  { color: var(--verde); background: var(--verde-suave); }
.chip-apagado { color: var(--texto-3); background: var(--superficie-2); }

/* Un número de la tabla que se puede pulsar para ver el detalle */
.btn-enlace {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--primario); cursor: pointer; text-decoration: underline;
}
.btn-enlace:hover { color: var(--primario-hover); }

/* El editor de preguntas: cada una en su tarjeta, para que se vea dónde empieza y acaba */
.preguntas { display: grid; gap: 10px; margin-block: 10px; }
.pregunta-fila {
  display: grid; gap: 8px; padding: 10px;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
}
.pregunta-acciones { align-items: end; }
.pregunta-acciones .fila-acciones { gap: 2px; }
/* Las flechas de reordenar: el icono es de izquierda/derecha, aquí apuntan arriba y abajo */
.pregunta-acciones .btn-icono:nth-child(1) svg { transform: rotate(90deg); }
.pregunta-acciones .btn-icono:nth-child(2) svg { transform: rotate(90deg); }

.etiquetas-elegir { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }

/* ---------------------------------------------------------------- Contactos (v2) */
.resumen-contactos { margin: 0 0 8px; }

/* Filtrar por etiqueta: chips que se encienden */
.filtro-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.filtro-titulo { margin-right: 2px; }
.chip-filtro {
  padding: 4px 11px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip-filtro:hover { border-color: var(--color, var(--primario)); }
.chip-filtro.activa {
  border-color: var(--color, var(--primario)); color: #fff;
  background: var(--color, var(--primario));
}
.chip-filtro:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Una fila de la tabla que abre la ficha */
.fila-clicable { cursor: pointer; transition: background 0.12s; }
.fila-clicable:hover { background: var(--superficie-2); }
.fila-clicable:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }

.celda-contacto { display: flex; align-items: center; gap: 10px; }
.aviso-no-contactar { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--rojo); }

.etiquetas-fila { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-etiqueta {
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--color); background: color-mix(in srgb, var(--color) 14%, transparent);
}
:root[data-tema="oscuro"] .chip-etiqueta { color: color-mix(in srgb, var(--color) 62%, #fff); background: color-mix(in srgb, var(--color) 26%, transparent); }

.paginador { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0; }

/* La ficha */
.ficha-datos { display: grid; gap: 10px; }
.ficha-dato { display: flex; gap: 8px; align-items: baseline; }
.ficha-dato .tenue { min-width: 70px; }
.ficha-campos { display: grid; gap: 10px; margin-top: 6px; }
.ficha-hilos { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ficha-hilos a {
  display: block; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie-2); color: inherit; text-decoration: none;
}
.ficha-hilos a:hover { border-color: var(--primario); }
.ficha-notas { white-space: pre-wrap; margin: 6px 0 0; color: var(--texto-2); }
.interruptor-aviso { margin-top: 14px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }

/* Unir dos fichas */
.unir-resultados { display: grid; gap: 6px; margin-block: 8px; }
.unir-opcion {
  display: grid; gap: 2px; justify-items: start; padding: 8px 10px; text-align: left;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); font: inherit; cursor: pointer;
}
.unir-opcion:hover { border-color: var(--primario); }
.unir-opcion.activa { border-color: var(--primario); background: var(--primario-suave); }

/* Administrar etiquetas y campos */
.admin-lista { display: grid; gap: 8px; margin-block: 10px; }
.admin-fila {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2);
}
.admin-fila input[type="color"] { width: 34px; height: 34px; padding: 2px; flex: none; border: 1px solid var(--borde); border-radius: 8px; background: none; }
.admin-fila input[type="text"], .admin-fila input:not([type]) { flex: 1; min-width: 0; }
.admin-usos { flex: none; white-space: nowrap; }
.admin-campo-nombre { flex: 1; min-width: 0; display: grid; gap: 1px; }
.admin-nueva { border-style: dashed; }

/* ---------------------------------------------------------------- Automatizaciones (v2) */
/* Cada condición y cada acción en su tarjeta, para que se lea como una frase */
.auto-reglas { display: grid; gap: 8px; margin-block: 10px; }
.regla-fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px;
}
.regla-fila select, .regla-fila input { min-width: 0; }
.regla-fila > .btn-icono { margin-left: auto; }
.regla-si { flex: none; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
.cond-sujeto, .cond-objeto { display: contents; }

/* Las acciones son más altas (algunas llevan un texto), así que van en columna */
.regla-accion { display: grid; gap: 8px; }
.regla-accion > .fila-entre { align-items: center; }
.regla-accion .fila-acciones { align-items: center; gap: 6px; }
.accion-detalle { display: grid; gap: 6px; }
.accion-detalle textarea { width: 100%; resize: vertical; }

.chip-error { color: var(--rojo); background: var(--rojo-suave); }

/* ===== Movimiento (versión 2) =====
   Nada de esto cambia los colores: el problema nunca fue el color, era que la pantalla se
   recargaba disimuladamente. Lo que entra, entra; lo que no cambió, se queda quieto. */

/* Una fila que llega con el refresco entra en vez de aparecer de golpe. Solo las que llegan
   después: listar() no marca las de la primera carga, que si no la lista entera cascabelea. */
.fila-entra { animation: fila-entra var(--mov) var(--curva); }
@keyframes fila-entra { from { opacity: 0; transform: translateY(-5px); } }

/* Esqueleto de la primera carga. Un spinner solo dice "espere"; esto deja ver la forma de lo
   que viene, y la pantalla no salta cuando llegan los datos. */
.esqueletos { display: grid; gap: 10px; padding: 14px; }
.esqueleto {
  height: 54px; border-radius: 8px;
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--borde) 37%, var(--superficie-2) 63%);
  background-size: 300% 100%;
  animation: esqueleto 1.3s ease-in-out infinite;
}
.esqueletos-chat { padding: 18px 16px; gap: 14px; }
.esqueletos-chat .esqueleto:nth-child(odd) { width: 62%; height: 44px; }
.esqueletos-chat .esqueleto:nth-child(even) { width: 48%; height: 38px; margin-left: auto; }
.esqueletos-tablero { grid-auto-flow: column; grid-auto-columns: 272px; align-items: start; overflow: hidden; }
.esqueletos-tablero .esqueleto { height: 220px; }
@keyframes esqueleto { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* Mensaje recién llegado al chat, y el que uno acaba de escribir y todavía va en camino */
.msg-nuevo { animation: msg-entra var(--mov) var(--curva); }
@keyframes msg-entra { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.msg-pendiente .msg-burbuja { opacity: 0.6; }
.msg-pendiente .msg-pie::after { content: ' · enviando…'; }

/* Mientras llega el refresco, la lista que ya está en pantalla se apaga un poco: dice que algo
   está pasando sin tirar lo que se está leyendo, que es lo que hacía el spinner. */
[data-cargando] { opacity: 0.6; transition: opacity var(--mov); }

/* Nadie pidió que la pantalla se mueva. Con "menos movimiento" en el sistema no se anima nada:
   incluye el spinner y el pulso de la pantalla de cocina, que antes no se podían apagar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}