/* Simpler. Dos temas: claro (blanco) y oscuro (negro). Un solo acento azul; el rojo solo avisa. */
@font-face { font-family: Geist; src: url(/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Bricolage; src: url(/fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --fondo: #F1F2F6; --sup: #FFFFFF; --sup2: #F0F2F5; --tinta: #12141A; --tinta2: #555C6B; --tinta3: #8A90A0;
  --linea: #E4E7ED; --linea2: #D3D8E0;
  --acento: #2F5BFF; --acento-tinta: #FFFFFF; --acento-suave: #EAF0FF; --acento-texto: #1F45D6;
  --alerta: #D93B40; --alerta-suave: #FDECEC; --aviso: #A86A00; --aviso-suave: #FFF4D6; --bien: #12805A; --bien-suave: #E2F5EC;
  --serie-b: #A9B4CC;
  --sombra: 0 1px 2px rgba(18,20,26,.05), 0 8px 24px -12px rgba(18,20,26,.14);
  --r1: 10px; --r2: 16px; --r3: 24px;
  --titulo: Bricolage, Geist, system-ui, sans-serif; --cuerpo: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
:root[data-tema='oscuro'] {
  --fondo: #050506; --sup: #111214; --sup2: #1A1B1F; --tinta: #F3F4F6; --tinta2: #A8ADB8; --tinta3: #6E7380;
  --linea: #24262B; --linea2: #33363D;
  --acento: #6C8CFF; --acento-tinta: #06080F; --acento-suave: #151C36; --acento-texto: #9DB2FF;
  --alerta: #FF6B6B; --alerta-suave: #32171A; --aviso: #F0B441; --aviso-suave: #2E2410; --bien: #4CC998; --bien-suave: #11291F;
  --serie-b: #4A5266;
  --sombra: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 var(--cuerpo); -webkit-font-smoothing: antialiased; height: 100dvh; overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, .cifra { font-family: var(--titulo); letter-spacing: -.02em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento-texto); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
::selection { background: var(--acento); color: var(--acento-tinta); }

/* ---------- Armazón: barra lateral, barra de arriba y contenido ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; height: 100dvh; padding: 14px; }
.lado { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px; font: 700 21px var(--titulo); letter-spacing: -.03em; color: var(--tinta); text-decoration: none; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca-fondo { fill: var(--acento); } .marca-trazo { stroke: var(--acento-tinta); }
.marca-movil { display: none; }
.nav { display: grid; gap: 4px; padding: 10px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 999px; color: var(--tinta2); text-decoration: none; font-weight: 500; font-size: 14.5px; white-space: nowrap; position: relative; }
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a:hover { color: var(--tinta); background: var(--sup2); }
.nav a[aria-current='page'] { background: var(--acento); color: var(--acento-tinta); font-weight: 600; box-shadow: 0 6px 16px -8px var(--acento); }
.nav .globo { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--alerta); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.lado-estado { margin-top: auto; display: grid; gap: 12px; padding: 16px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); }
.lado-fila { display: flex; gap: 10px; align-items: flex-start; }
.lado-fila i { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 3px var(--bien-suave); }
.lado-fila.falta i { background: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-suave); }
.lado-fila b { display: block; font-size: 13.5px; font-weight: 600; }
.lado-fila span { display: block; font-size: 12.5px; color: var(--tinta2); line-height: 1.35; }

.centro { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.barra { flex: none; display: flex; align-items: center; gap: 12px; height: 48px; }
.buscador { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; background: var(--sup); border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta3); }
.buscador:focus-within { border-color: var(--acento); }
.buscador svg { width: 18px; height: 18px; flex: none; }
.buscador input[type='search'] { border: 0; padding: 0; background: none; outline: none !important; color: var(--tinta); }
.barra-der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.interruptor { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 999px; background: var(--sup); font-size: 13.5px; font-weight: 500; }
.interruptor-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 3px var(--bien-suave); }
.interruptor[aria-pressed='false'] .interruptor-luz { background: var(--tinta3); box-shadow: none; }
.interruptor[aria-pressed='false'] { color: var(--tinta2); }
.icono-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 50%; background: var(--sup); color: var(--tinta2); }
.icono-btn:hover { color: var(--tinta); border-color: var(--linea2); }
.icono-btn svg { width: 18px; height: 18px; }
.barra .icono-btn, .barra .avatar { width: 46px; height: 46px; }
.barra .icono-btn svg { width: 20px; height: 20px; }
.perfil { position: relative; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tinta); color: var(--fondo); font: 700 15px var(--titulo); }
.menu { position: absolute; right: 0; top: 54px; z-index: 50; width: 220px; padding: 12px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--sombra); }
.menu-titulo { font-weight: 600; } .menu-sub { color: var(--tinta2); font-size: 13px; margin-bottom: 10px; }
.menu button { width: 100%; padding: 8px; border: 1px solid var(--linea); border-radius: var(--r1); background: none; }
.menu button:hover { background: var(--sup2); }
.aviso-modo { display: none; padding: 8px 14px; background: var(--aviso-suave); color: var(--aviso); font-size: 13px; font-weight: 500; text-align: center; }

main { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 2px 28px; scrollbar-width: thin; scrollbar-color: var(--linea2) transparent; }
main.ancho { padding: 0; overflow: hidden; }
main:focus { outline: none; }

/* ---------- Piezas comunes ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid var(--linea2); border-radius: 999px; background: var(--sup); font-weight: 500; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: var(--tinta3); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 16px; height: 16px; }
.btn-fuerte { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.btn-fuerte:hover { border-color: var(--acento); filter: brightness(1.08); }
.btn-chico { height: 30px; padding: 0 11px; font-size: 13px; }
.btn-peligro { color: var(--alerta); }
.caja { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); padding: 22px; }
.caja h2 { font-size: 18px; font-weight: 650; }
.caja-pie { color: var(--tinta2); font-size: 13px; margin-top: 4px; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera h1 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.08; }
.cabecera p { color: var(--tinta2); margin-top: 6px; max-width: 60ch; }
.tramos { display: flex; padding: 3px; background: var(--sup2); border-radius: 999px; }
.tramos button { border: 0; background: none; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--tinta2); }
.tramos button[aria-pressed='true'] { background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > span, label.rotulo { font-size: 13px; font-weight: 600; }
.campo small { color: var(--tinta2); font-size: 12.5px; }
input[type='text'], input[type='password'], input[type='search'], input[type='number'], input[type='date'], textarea, select { width: 100%; padding: 9px 12px; border: 1px solid var(--linea2); border-radius: var(--r1); background: var(--sup); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
.vacio { padding: 36px 20px; text-align: center; color: var(--tinta2); }
.vacio strong { display: block; color: var(--tinta); font: 650 18px var(--titulo); margin-bottom: 4px; }
.cargando { padding: 60px; text-align: center; color: var(--tinta3); }
.etapa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--tinta2); white-space: nowrap; }
.etapa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta3); }
.etapa[data-e='interesado']::before { background: var(--acento); }
.etapa[data-e='por_comprar']::before { background: var(--aviso); }
.etapa[data-e='compro']::before { background: var(--bien); }
.etapa[data-e='soporte']::before { background: var(--alerta); }
.chapa { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sup2); color: var(--tinta2); }
.chapa-alerta { background: var(--alerta-suave); color: var(--alerta); }
.chapa-aviso { background: var(--aviso-suave); color: var(--aviso); }
.chapa-bien { background: var(--bien-suave); color: var(--bien); }
.chapa-acento { background: var(--acento-suave); color: var(--acento-texto); }
.foto { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--titulo); color: #fff; }
.tostadas { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; }
.tostada { padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-size: 14px; font-weight: 500; box-shadow: var(--sombra); }
.tostada.error { background: var(--alerta); color: #fff; }

/* ---------- Hoy ---------- */
.hoy { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.hoy > * { grid-column: span 12; min-width: 0; }
.atencion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 16px 0 12px; }
.caja-atencion { display: flex; flex-direction: column; } .caja-atencion .btn { align-self: flex-start; }
.atencion-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 1px solid transparent; border-radius: var(--r2); background: var(--sup2); text-align: left; }
.atencion-fila:hover { border-color: var(--acento); }
.atencion-fila div { min-width: 0; flex: 1; }
.atencion-fila b { display: block; font-weight: 600; }
.atencion-fila span { display: block; color: var(--tinta2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atencion-fila time { color: var(--tinta3); font-size: 12.5px; white-space: nowrap; }
.aldia { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: var(--r2); background: var(--bien-suave); color: var(--bien); font-weight: 500; }
.aldia svg { width: 22px; height: 22px; flex: none; }

.recorrido { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 22px; }
.paso { position: relative; padding: 0 14px 0 0; }
.paso-barra { height: 110px; display: flex; align-items: flex-end; }
.paso-barra i { display: block; width: 100%; border-radius: 14px 14px 5px 5px; background: var(--acento); min-height: 4px; }
.paso:nth-child(2) i { opacity: .82; } .paso:nth-child(3) i { opacity: .66; } .paso:nth-child(4) i { opacity: .5; } .paso:nth-child(5) i { background: var(--bien); }
.paso .cifra { font-size: 34px; font-weight: 700; line-height: 1; margin-top: 10px; }
.paso b { display: block; font-weight: 600; font-size: 14px; margin-top: 4px; }
.paso small { display: block; color: var(--tinta2); font-size: 12.5px; }
.paso em { font-style: normal; display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sup2); color: var(--tinta2); font-size: 12px; font-weight: 600; }
.paso em.fuga { background: var(--alerta-suave); color: var(--alerta); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); padding: 18px 20px; }
.kpi span { font-size: 13.5px; color: var(--tinta2); font-weight: 500; }
.kpi .cifra { display: block; font-size: 38px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; }
.kpi small { font-size: 12.5px; color: var(--tinta3); }
.kpi small.sube { color: var(--bien); } .kpi small.baja { color: var(--alerta); }
.mitad { grid-column: span 6 !important; } .tercio { grid-column: span 4 !important; } .dos-tercios { grid-column: span 8 !important; }

.grafica { width: 100%; height: auto; display: block; margin-top: 14px; overflow: visible; }
.grafica text { font: 11px var(--cuerpo); fill: var(--tinta3); }
.grafica .eje { stroke: var(--linea); stroke-width: 1; }
.grafica .b-rec { fill: var(--serie-b); } .grafica .b-res { fill: var(--acento); }
.grafica .zona { fill: transparent; } .grafica .zona:hover { fill: var(--sup2); }
.leyenda { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--tinta2); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda .l-rec { background: var(--serie-b); } .leyenda .l-res { background: var(--acento); }
.burbuja-dato { position: fixed; z-index: 70; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: var(--tinta); color: var(--fondo); font-size: 12.5px; line-height: 1.45; box-shadow: var(--sombra); white-space: nowrap; }
.horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 16px; }
.horas i { height: 44px; border-radius: 6px; background: var(--acento); }
.horas-eje { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta3); margin-top: 6px; }
.lista-barras { display: grid; gap: 12px; margin-top: 16px; }
.lista-barras div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.lista-barras b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-barras span { color: var(--tinta2); font-variant-numeric: tabular-nums; }
.lista-barras i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--acento); min-width: 4px; }
table.tabla { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.tabla th { text-align: left; font-weight: 500; color: var(--tinta2); font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 9px 8px; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-envoltura { overflow-x: auto; }

/* ---------- Chats ---------- */
.chats { position: relative; display: grid; grid-template-columns: 350px minmax(0, 1fr) 330px; gap: 14px; height: 100%; }
.chats-lista, .hilo, .ficha { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); overflow: hidden; }
.chats-lista { display: flex; flex-direction: column; min-height: 0; }
.chats-buscar { padding: 16px 16px 10px; }
.chats-buscar input { border-radius: 999px; background: var(--sup2); border-color: transparent; padding: 10px 16px; }
.filtros { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.filtros button { flex: none; padding: 5px 11px; border: 1px solid var(--linea); border-radius: 999px; background: none; font-size: 13px; font-weight: 500; color: var(--tinta2); }
.filtros button[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.filtros button b { margin-left: 5px; color: var(--alerta); }
.filtros button[aria-pressed='true'] b { color: inherit; }
.lista { flex: 1; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.fila { display: flex; gap: 12px; width: 100%; padding: 12px; margin-bottom: 2px; border: 0; border-radius: 18px; background: none; text-align: left; position: relative; }
.fila:hover { background: var(--sup2); }
.fila[aria-current='true'] { background: var(--acento-suave); }
.fila-cuerpo { min-width: 0; flex: 1; }
.fila-arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fila-arriba b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-arriba time { flex: none; font-size: 12px; color: var(--tinta3); }
.fila-texto { color: var(--tinta2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila.sin-leer .fila-texto { color: var(--tinta); font-weight: 500; }
.fila-abajo { display: flex; align-items: center; gap: 8px; margin-top: 5px; min-height: 20px; }
.fila .punto { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acento); color: var(--acento-tinta); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hilo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linea); }
.hilo-cab div { min-width: 0; flex: 1; }
.hilo-cab b { display: block; font-weight: 650; font-size: 16px; }
.hilo-cab small { color: var(--tinta2); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volver, .ver-ficha { display: none; }
.franja { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--linea); }
.franja span { flex: 1; }
.franja-alerta { background: var(--alerta-suave); color: var(--alerta); }
.franja-aviso { background: var(--aviso-suave); color: var(--aviso); }
.mensajes { flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.dia { align-self: center; margin: 12px 0 8px; font-size: 12px; color: var(--tinta3); font-weight: 500; }
.msj { max-width: min(560px, 78%); padding: 10px 15px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; }
.msj-cliente { align-self: flex-start; background: var(--sup2); border-bottom-left-radius: 6px; }
.msj-simpler { align-self: flex-end; background: var(--acento-suave); color: var(--tinta); border-bottom-right-radius: 6px; }
.msj-tu { align-self: flex-end; background: var(--acento); color: var(--acento-tinta); border-bottom-right-radius: 6px; }
.msj-fallo { outline: 1.5px solid var(--alerta); }
.msj-boton { display: block; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: var(--sup); color: var(--acento-texto); border: 1px solid var(--linea); text-align: center; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.msj-pie { align-self: flex-end; font-size: 11.5px; color: var(--tinta3); margin: 0 4px 6px; }
.msj-pie.izq { align-self: flex-start; }
.msj-pie.mal { color: var(--alerta); }
.evento { align-self: center; max-width: 80%; text-align: center; font-size: 12.5px; color: var(--tinta2); padding: 4px 12px; border-radius: 999px; background: var(--sup2); margin: 6px 0; }
.nota { align-self: stretch; padding: 9px 13px; border-radius: var(--r1); background: var(--aviso-suave); color: var(--tinta); font-size: 13.5px; margin: 6px 0; white-space: pre-wrap; }
.nota b { color: var(--aviso); font-size: 12px; display: block; }
.redactar { padding: 12px 20px 18px; border-top: 1px solid var(--linea); }
.redactar-modos { display: flex; gap: 14px; margin-bottom: 8px; font-size: 13px; }
.redactar-modos button { border: 0; background: none; padding: 2px 0; color: var(--tinta3); font-weight: 600; border-bottom: 2px solid transparent; }
.redactar-modos button[aria-pressed='true'] { color: var(--tinta); border-color: var(--acento); }
.redactar textarea { min-height: 62px; max-height: 200px; border-radius: var(--r2); background: var(--sup2); border-color: transparent; }
.redactar.es-nota textarea { background: var(--aviso-suave); }
.redactar-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.redactar-pie .ventana { margin-right: auto; font-size: 12.5px; color: var(--tinta2); }
.redactar-pie .ventana.cerrada { color: var(--alerta); font-weight: 500; }
.rapidas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; }
.rapidas button { flex: none; padding: 4px 10px; border: 1px dashed var(--linea2); border-radius: 999px; background: none; font-size: 12.5px; color: var(--tinta2); }
.rapidas button:hover { border-style: solid; color: var(--tinta); }

.ficha { overflow-y: auto; scrollbar-width: thin; padding: 22px 20px; display: grid; gap: 20px; align-content: start; }
.ficha-cab { text-align: center; }
.ficha-cab .foto { width: 64px; height: 64px; font-size: 24px; margin: 0 auto 10px; }
.ficha-cab b { font: 650 18px var(--titulo); display: block; }
.ficha-cab a { font-size: 13px; }
.ficha h3 { font-size: 12.5px; font-weight: 600; color: var(--tinta2); margin-bottom: 8px; }
.ficha-resumen { padding: 12px 14px; border-radius: var(--r2); background: var(--acento-suave); font-size: 14px; }
.ficha-resumen small { display: block; color: var(--acento-texto); font-weight: 600; font-size: 12px; margin-bottom: 3px; }
.etapas-elegir { display: grid; gap: 4px; }
.etapas-elegir button { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r1); background: none; text-align: left; }
.etapas-elegir button:hover { background: var(--sup2); }
.etapas-elegir button[aria-pressed='true'] { border-color: var(--linea2); background: var(--sup2); font-weight: 600; }
.etapas-elegir button[aria-pressed='true']::after { content: '✓'; color: var(--acento-texto); }
.quien { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sup2); border-radius: var(--r2); }
.quien button { border: 0; background: none; padding: 8px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--tinta2); }
.quien button[aria-pressed='true'] { background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas .chapa button { border: 0; background: none; padding: 0; color: inherit; line-height: 1; }
.etiquetas input { width: 110px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; }
.ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.ficha dt { color: var(--tinta2); } .ficha dd { margin: 0; text-align: right; }
.ficha:empty { visibility: hidden; }
.sin-chat { flex: 1; display: grid; place-items: center; text-align: center; color: var(--tinta2); padding: 40px; }
.sin-chat strong { display: block; font: 650 20px var(--titulo); color: var(--tinta); margin-bottom: 6px; }

/* ---------- Personas (tablero) ---------- */
.tablero { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.columna { background: var(--sup2); border-radius: var(--r3); padding: 12px; min-height: 300px; }
.columna.encima { outline: 2px dashed var(--acento); outline-offset: -2px; }
.columna-cab { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.columna-cab span:last-child { color: var(--tinta3); font-weight: 600; font-size: 13px; }
.tarjeta { display: block; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; border: 1px solid var(--linea); border-radius: var(--r2); background: var(--sup); cursor: grab; }
.tarjeta:hover { border-color: var(--linea2); box-shadow: var(--sombra); }
.tarjeta b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta p { color: var(--tinta2); font-size: 13px; margin: 3px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tinta3); gap: 6px; }

/* ---------- Automáticos y Asistente ---------- */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: start; }
.pila { display: grid; gap: 16px; }
.celular { position: sticky; top: 0; border: 1px solid var(--linea); border-radius: 30px; background: var(--fondo); padding: 16px 14px 20px; }
.celular h3 { font-size: 12.5px; color: var(--tinta2); font-weight: 600; text-align: center; margin-bottom: 12px; }
.celular .msj { max-width: 92%; font-size: 13.5px; }
.celular-comentario { font-size: 13px; padding: 8px 10px; border-radius: var(--r1); background: var(--sup); border: 1px solid var(--linea); margin-bottom: 6px; }
.celular-comentario b { font-weight: 600; }
.celular-comentario.resp { margin-left: 18px; }
.celular hr { border: 0; border-top: 1px dashed var(--linea2); margin: 14px 0; }
.embudo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.embudo-cab .palabra { font: 700 22px var(--titulo); text-transform: uppercase; letter-spacing: 0; }
.embudo-cab .cifras { margin-left: auto; display: flex; gap: 16px; font-size: 13px; color: var(--tinta2); }
.embudo-cab .cifras b { color: var(--tinta); font-size: 15px; }
.renglones { display: grid; gap: 6px; }
.renglon { display: flex; gap: 6px; }
.renglon button { flex: none; width: 34px; border: 1px solid var(--linea); border-radius: var(--r1); background: none; color: var(--tinta3); }
.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.acciones .guardado { color: var(--bien); font-size: 13px; font-weight: 500; }
.conexiones { display: grid; gap: 10px; }
.conexion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r2); }
.conexion i { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--bien); }
.conexion.falta i { background: var(--aviso); }
.conexion b { display: block; font-weight: 600; } .conexion span { color: var(--tinta2); font-size: 13.5px; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; overflow-x: auto; }
.pestanas button { border: 0; background: none; padding: 10px 14px; font-weight: 500; color: var(--tinta2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas button[aria-selected='true'] { color: var(--tinta); border-color: var(--acento); }
details.version { border: 1px solid var(--linea); border-radius: var(--r1); padding: 8px 12px; margin-top: 8px; font-size: 13.5px; }
details.version summary { cursor: pointer; color: var(--tinta2); }
details.version pre { white-space: pre-wrap; font: 12.5px/1.5 var(--cuerpo); color: var(--tinta2); max-height: 220px; overflow: auto; }
.doc { border: 1px solid var(--linea); border-radius: var(--r2); padding: 14px; }
.doc textarea { min-height: 220px; font-size: 13.5px; }

/* ---------- Probar ---------- */
.probar { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
.telefono { border: 1px solid var(--linea); border-radius: 34px; background: var(--sup); overflow: hidden; display: flex; flex-direction: column; height: min(680px, calc(100dvh - 210px)); box-shadow: var(--sombra); }
.telefono-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.telefono-cab input { border: 0; padding: 2px 0; font-weight: 600; background: none; }
.telefono .mensajes { background: var(--sup2); }
.telefono .msj-cliente { align-self: flex-end; background: var(--tinta); color: var(--fondo); border: 0; border-radius: 18px 18px 6px 18px; }
.telefono .msj-simpler, .telefono .msj-tu { align-self: flex-start; background: var(--sup); color: var(--tinta); border: 1px solid var(--linea); border-radius: 18px 18px 18px 6px; }
.telefono-pie { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); }
.telefono-pie input { border-radius: 999px; }
.escribiendo { align-self: flex-start; color: var(--tinta3); font-size: 13px; padding: 4px 6px; }
.resultado { margin-top: 14px; padding: 14px; border-radius: var(--r2); background: var(--sup2); font-size: 14px; display: grid; gap: 8px; }

/* ---------- Entrar ---------- */
.entrar { display: grid; place-items: center; padding: 20px; overflow: auto; }
.entrar-caja { width: min(380px, 100%); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); padding: 32px 28px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.entrar-logo { width: 44px; height: 44px; }
.entrar-caja h1 { font-size: 30px; font-weight: 700; }
.entrar-caja p { color: var(--tinta2); margin-bottom: 12px; }
.entrar-caja label { font-size: 13px; font-weight: 600; }
.entrar-caja .btn { height: 44px; margin-top: 8px; }
.entrar-error { color: var(--alerta) !important; font-size: 13.5px; margin: 0 !important; }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1180px) {
  /* Barra lateral angosta: solo iconos. */
  .app { grid-template-columns: 68px minmax(0, 1fr); }
  .marca { padding: 0; justify-content: center; } .marca span { display: none; }
  .nav { padding: 8px; } .nav a { padding: 0; justify-content: center; } .nav a > span:not(.globo) { display: none; }
  .nav .globo { position: absolute; top: 2px; right: 0; margin: 0; }
  .lado-estado { padding: 12px 0; justify-items: center; } .lado-estado .lado-fila div { display: none; } .lado-fila i { margin: 0; }
  .chats { grid-template-columns: 310px minmax(0, 1fr); }
  .ficha { display: none; position: absolute; inset: 0 0 0 auto; width: min(340px, 100%); z-index: 25; box-shadow: var(--sombra); }
  .chats.con-ficha .ficha { display: grid; }
  .ver-ficha { display: grid; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .mitad, .tercio, .dos-tercios { grid-column: span 12 !important; }
}
@media (max-width: 820px) {
  .app { display: block; padding: 0; }
  .lado { display: contents; } .lado > .marca, .lado-estado { display: none; }
  .centro { height: 100dvh; gap: 0; }
  .barra { height: 60px; padding: 0 14px; gap: 10px; border-bottom: 1px solid var(--linea); }
  .marca-movil { display: flex; padding: 0; } .marca-movil span { display: inline; }
  .buscador { display: none; }
  .barra .icono-btn, .barra .avatar, .interruptor { width: 38px; height: 38px; } .interruptor { width: auto; padding: 0 13px; }
  #bot-texto { display: none; }
  .aviso-modo { display: block; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 2px; margin: 0; border: 0; border-radius: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--sup); border-top: 1px solid var(--linea); justify-content: space-around; }
  .nav a { flex-direction: column; gap: 2px; height: auto; padding: 5px 6px; font-size: 11px; border-radius: 10px; }
  .nav a > span:not(.globo) { display: inline; }
  .nav a[aria-current='page'] { box-shadow: none; color: var(--acento-texto); background: none; }
  .nav a:hover { background: none; }
  .nav .globo { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; }
  main { padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); }
  main.ancho { padding: 0 0 calc(58px + env(safe-area-inset-bottom)); }
  .chats { grid-template-columns: 1fr; gap: 0; }
  .chats-lista, .hilo, .ficha { border: 0; border-radius: 0; }
  .chats .hilo { display: none; } .chats.abierto .chats-lista { display: none; } .chats.abierto .hilo { display: flex; }
  .volver { display: grid; }
  .ficha { inset: 0; width: 100%; }
  .recorrido { grid-template-columns: 1fr; gap: 14px; }
  .paso { display: grid; grid-template-columns: 64px 1fr; gap: 0 12px; align-items: center; padding: 0; }
  .paso-barra { height: auto; grid-row: 1 / span 4; align-items: center; }
  .paso-barra i { height: 46px !important; border-radius: 8px; }
  .paso .cifra { margin-top: 0; font-size: 24px; }
  .paso em { grid-column: 2; justify-self: start; margin-top: 2px; }
  .dos, .probar { grid-template-columns: 1fr; }
  .celular { position: static; }
  .kpi .cifra { font-size: 28px; }
  .tostadas { bottom: 80px; }
}
@media (max-width: 460px) { .kpis { gap: 10px; } .kpi { padding: 14px; } .caja { padding: 16px; border-radius: 18px; } }
@media (prefers-reduced-motion: no-preference) {
  .paso-barra i { transform-origin: bottom; animation: crecer .6s cubic-bezier(.2,.8,.2,1) both; }
  .paso:nth-child(2) i { animation-delay: .06s; } .paso:nth-child(3) i { animation-delay: .12s; } .paso:nth-child(4) i { animation-delay: .18s; } .paso:nth-child(5) i { animation-delay: .24s; }
  @keyframes crecer { from { transform: scaleY(0); } }
  .tostada { animation: subir .2s ease-out; }
  @keyframes subir { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- Ajustes del armazón con barra lateral ---------- */
.columna { background: var(--sup); border: 1px solid var(--linea); }
.tarjeta { background: var(--fondo); border-color: transparent; }
.tramos { background: var(--sup); border: 1px solid var(--linea); }
.tramos button[aria-pressed='true'] { background: var(--acento-suave); color: var(--acento-texto); box-shadow: none; }
@media (min-width: 1181px) and (max-width: 1500px) {
  .app { grid-template-columns: 208px minmax(0, 1fr); }
  .chats { grid-template-columns: 300px minmax(0, 1fr) 286px; }
}
.tarjeta .chapa { background: var(--sup); }

/* ---------- Resumen: periodo y fechas exactas ---------- */
.periodo { position: relative; }
.tramos .tramo-fechas { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--linea); border-radius: 0 999px 999px 0; }
.tramos .tramo-fechas[aria-pressed='true'] { border-radius: 999px; border-left-color: transparent; }
.tramo-fechas svg { width: 15px; height: 15px; }
.fechas { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; align-items: flex-end; gap: 10px; padding: 14px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--sombra); }
.fechas label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
.fechas input { width: 150px; }

/* ---------- Resumen: publicaciones con portada ---------- */
.pub { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.pub-portada { flex: none; width: 44px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--sup2); }
.pub-sin { display: grid; place-items: center; color: var(--tinta3); }
.pub-sin svg { width: 20px; height: 20px; }
.pub b { display: block; font-weight: 600; }
.pub a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; text-decoration: none; }
.pub a:hover { text-decoration: underline; }
.pub a svg { width: 13px; height: 13px; }
.pub small { color: var(--tinta3); font-size: 12.5px; }

/* ---------- Chats: la etapa se elige junto al buscador; los tres filtros principales caben completos ---------- */
.chats-buscar { display: flex; gap: 8px; }
.chats-buscar input { flex: 1; min-width: 0; }
.chats-buscar select { flex: none; width: auto; padding: 0 8px 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--sup); font-size: 13.5px; font-weight: 500; color: var(--tinta2); cursor: pointer; }
.chats-buscar select.activo { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.chats-buscar select option { background: var(--sup); color: var(--tinta); }
.filtros { overflow: visible; }
.ficha { grid-template-columns: minmax(0, 1fr); }

/* ---------- Chats: notas de la persona ---------- */
.ficha h3 .cuenta { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--sup2); color: var(--tinta2); font-size: 11.5px; }
.notas { display: grid; gap: 8px; }
.notas input { border-radius: 999px; background: var(--sup2); border-color: transparent; padding: 8px 14px; font-size: 13.5px; }
.notas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.notas-lista.todas { max-height: 236px; overflow-y: auto; scrollbar-width: thin; }
.notas-lista li { display: flex; align-items: baseline; gap: 8px; padding: 7px 6px 7px 11px; border-radius: 10px; background: var(--aviso-suave); font-size: 13.5px; }
.nota-texto { flex: 1; min-width: 0; border: 0; padding: 0; background: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-texto.abierta { white-space: pre-wrap; overflow-wrap: anywhere; }
.notas-lista time { flex: none; font-size: 11.5px; color: var(--tinta2); }
.nota-borrar { flex: none; border: 0; background: none; padding: 0 4px; color: var(--tinta3); font-size: 15px; line-height: 1; }
.nota-borrar:hover { color: var(--alerta); }
.notas-vacio { font-size: 13px; color: var(--tinta3); }
.enlace-btn { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--acento-texto); font-size: 13px; font-weight: 600; }

/* ---------- Automáticos: vista previa con el aspecto de Instagram ---------- */
.celular { border: 0; border-radius: var(--r3); background: var(--sup2); padding: 16px; }
.celular h3 { text-align: left; margin: 0 2px 8px; }
.ig { --ig-fondo: #FFFFFF; --ig-tinta: #000000; --ig-gris: #737373; --ig-burbuja: #EFEFEF; --ig-linea: #DBDBDB;
  background: var(--ig-fondo); color: var(--ig-tinta); border-radius: 18px; padding: 14px; margin-bottom: 16px;
  font: 13.5px/1.38 -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
:root[data-tema='oscuro'] .ig { --ig-fondo: #000000; --ig-tinta: #F5F5F5; --ig-gris: #A8A8A8; --ig-burbuja: #262626; --ig-linea: #262626; }
.ig:last-child { margin-bottom: 0; }
.ig p { margin: 0; overflow-wrap: anywhere; }
.ig-foto { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ig-linea); display: grid; place-items: center; font: 700 13px var(--titulo); }
.ig-yo { color: #fff; border: 2px solid transparent; background: linear-gradient(#16181D, #16181D) padding-box, linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7) border-box; }
.ig-chica { width: 26px; height: 26px; font-size: 11px; }
.ig-coment { display: flex; align-items: flex-start; gap: 10px; }
.ig-coment > div { flex: 1; min-width: 0; }
.ig-coment b { font-weight: 600; font-size: 13px; }
.ig-coment time { margin-left: 6px; color: var(--ig-gris); font-size: 12px; }
.ig-coment small { display: block; margin-top: 4px; color: var(--ig-gris); font-size: 12px; font-weight: 600; }
.ig-cora { flex: none; margin-top: 8px; color: var(--ig-gris); } .ig-cora svg { width: 14px; height: 14px; display: block; }
.ig-resp { margin: 14px 0 0 42px; }
.ig-dm { padding: 0; overflow: hidden; }
.ig-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--ig-linea); }
.ig-cab > svg { width: 22px; height: 22px; flex: none; }
.ig-cab b { display: block; font-weight: 600; font-size: 14px; line-height: 1.2; }
.ig-cab small { color: var(--ig-gris); font-size: 12px; }
.ig-hilo { display: flex; flex-direction: column; padding: 14px 12px 16px; min-height: 170px; }
.ig-hilo > time { align-self: center; margin-bottom: 12px; color: var(--ig-gris); font-size: 11.5px; }
.ig-fila { display: flex; align-items: flex-end; gap: 8px; }
.ig-burbuja { max-width: 80%; background: var(--ig-burbuja); border-radius: 18px; overflow: hidden; }
.ig-burbuja p { padding: 9px 13px; white-space: pre-wrap; }
.ig-boton { display: block; margin: 0 6px 6px; padding: 9px 10px; border-radius: 12px; background: var(--ig-fondo); text-align: center; font-weight: 600; }
.ig-pie { display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 12px 12px; padding: 0 6px; border-radius: 999px; background: var(--ig-burbuja); color: var(--ig-gris); }
.ig-cam { width: 30px; height: 30px; border-radius: 50%; background: #0095F6; color: #fff; display: grid; place-items: center; } .ig-cam svg { width: 17px; height: 17px; }

@media (max-width: 820px) {
  .periodo { width: 100%; } .tramos { overflow-x: auto; scrollbar-width: none; } .tramos button { flex: none; }
  .fechas { left: 0; right: auto; flex-wrap: wrap; }
}
.notas, .notas-lista { grid-template-columns: minmax(0, 1fr); }

/* ---------- Suiche de "Simpler responde" ---------- */
.suiche { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--bien); transition: background .15s; }
.suiche::after { content: ''; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.interruptor[aria-pressed='false'] .suiche { background: var(--linea2); }
.interruptor[aria-pressed='false'] .suiche::after { left: 2px; }
.interruptor { gap: 10px; }

/* ---------- Menú desplegable propio ---------- */
.desple { position: relative; flex: none; }
.desple-boton { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--sup); font-size: 13px; font-weight: 500; color: var(--tinta2); white-space: nowrap; }
.desple-boton:hover { border-color: var(--linea2); color: var(--tinta); }
.desple-boton svg { width: 15px; height: 15px; }
.desple-boton[aria-expanded='true'] { border-color: var(--acento); }
.filtros .desple-boton[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.desple-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; width: max-content; display: grid; gap: 2px; padding: 6px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--sombra); }
.desple-menu.arriba { top: auto; bottom: calc(100% + 6px); }
.desple-menu button, .filtros .desple-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--tinta); font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; }
.desple-menu button:hover { background: var(--sup2); }
.desple-menu button[aria-selected='true'] { background: var(--acento-suave); color: var(--acento-texto); font-weight: 600; }
.desple-menu hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 6px; }
.desple-menu .etapa { gap: 0; }

/* ---------- Paginado ---------- */
.paginas { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta2); }
.paginas-tam { display: flex; align-items: center; gap: 8px; }
.paginas-cuenta { margin-left: auto; font-variant-numeric: tabular-nums; }
.paginas-flechas { display: flex; gap: 6px; }
.icono-btn:disabled { opacity: .4; cursor: default; }
.icono-btn:disabled:hover { color: var(--tinta2); border-color: var(--linea); }

/* ---------- Calendario para elegir fechas ---------- */
.fechas { display: block; width: 296px; padding: 14px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-cab b { font: 650 15px var(--titulo); }
.cal-cab .icono-btn { width: 32px; height: 32px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-dia-nombre { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--tinta3); padding: 4px 0 6px; }
.cal-dia { height: 36px; border: 0; background: none; border-radius: 999px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tinta); }
.cal-dia:hover:not(:disabled) { background: var(--sup2); }
.cal-dia:disabled { color: var(--tinta3); opacity: .45; cursor: default; }
.cal-dia.cal-hoy { font-weight: 700; color: var(--acento-texto); }
.cal-dia.en { background: var(--acento-suave); border-radius: 0; }
.cal-dia.ini, .cal-dia.fin, .cal-dia.ini:hover, .cal-dia.fin:hover { background: var(--acento); color: var(--acento-tinta); font-weight: 600; }
.cal-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta2); }

/* ---------- Clientes: periodo y nota del tablero ---------- */
.cabecera-lado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tablero-nota { margin: -8px 0 14px; font-size: 13px; color: var(--tinta2); }
.columna .enlace-btn { display: block; margin: 4px 4px 2px; }
@media (max-width: 820px) { .fechas { width: min(296px, calc(100vw - 32px)); } }
@media (min-width: 821px) { .chats-lista { overflow: visible; } }

/* ================= Ronda 4 ================= */
/* Saludo en la barra de arriba */
.saludo { min-width: 0; padding-left: 4px; line-height: 1.25; }
.saludo b { display: block; font: 650 17px var(--titulo); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saludo span { display: block; font-size: 13px; color: var(--tinta2); }
.saludo span::first-letter { text-transform: uppercase; }

/* Botón de Simpler activo, con su ayuda */
.bot { position: relative; display: flex; align-items: center; height: 46px; padding-right: 6px; background: var(--sup); border: 1px solid var(--linea); border-radius: 999px; }
.bot .interruptor { height: 44px; border: 0; background: none; padding: 0 10px 0 16px; }
.interruptor-luz { position: relative; width: 9px; height: 9px; }
.interruptor[aria-pressed='false'] .interruptor-luz { background: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-suave); }
.ayuda-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linea2); background: var(--sup2); color: var(--tinta2); font-size: 12.5px; font-weight: 700; line-height: 1; }
.ayuda-btn:hover, .ayuda-btn[aria-expanded='true'] { color: var(--acento-texto); border-color: var(--acento); }
.ayuda { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 300px; padding: 16px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--sombra); font-size: 13.5px; color: var(--tinta2); }
.ayuda b { display: block; color: var(--tinta); font: 650 15px var(--titulo); margin-bottom: 6px; }
.ayuda p + p { margin-top: 6px; }

/* Ventana de confirmación */
.modal-fondo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(10, 12, 20, .45); backdrop-filter: blur(3px); }
.modal { width: min(440px, 100%); padding: 26px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.modal h2 { font-size: 21px; font-weight: 700; line-height: 1.2; }
.modal p { margin-top: 10px; color: var(--tinta2); }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.btn-rojo { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.btn-rojo:hover { border-color: var(--alerta); filter: brightness(1.06); }

/* Tarjeta de estado de la barra lateral: un renglón que lleva a Conexiones */
.lado-estado { display: flex; align-items: center; gap: 11px; padding: 13px 14px; color: var(--tinta); text-decoration: none; }
.lado-estado:hover { border-color: var(--linea2); }
.lado-estado > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 4px var(--bien-suave); }
.lado-estado.falta > i { background: var(--aviso); box-shadow: 0 0 0 4px var(--aviso-suave); }
.lado-estado div { flex: 1; min-width: 0; }
.lado-estado b { display: block; font-size: 13.5px; font-weight: 600; }
.lado-estado span { display: block; font-size: 12px; color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lado-estado svg { flex: none; width: 16px; height: 16px; color: var(--tinta3); }

/* Insignia del canal sobre la foto */
.foto-caja { position: relative; flex: none; display: inline-grid; }
.canal { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--sup); background: var(--tinta3); }
.canal svg { width: 11px; height: 11px; stroke-width: 2.4; }
.fila[aria-current='true'] .canal { border-color: var(--acento-suave); }
.canal-instagram { background: linear-gradient(45deg, #F9A13B, #EE2A7B 55%, #6228D7); }
.canal-whatsapp { background: #1FAF54; } .canal-messenger { background: #0A7CFF; } .canal-tiktok { background: #111318; } .canal-asistente { background: #C2613F; }

/* Chats: filtros */
.filtros { flex-wrap: wrap; }
.filtros button { padding: 5px 10px; }

/* Ficha del cliente: todo a la vista */
.ficha { gap: 15px; padding: 18px; }
.ficha-cab { display: flex; align-items: center; gap: 12px; text-align: left; }
.ficha-cab .foto { width: 48px; height: 48px; font-size: 19px; margin: 0; }
.ficha-cab > div { min-width: 0; }
.ficha-cab b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha h3 { margin-bottom: 6px; }
.ficha-resumen { padding: 10px 13px; }
.quien button { padding: 6px; }
.etapas-elegir { display: flex; flex-wrap: wrap; gap: 6px; }
.etapas-elegir button { padding: 5px 11px; border: 1px solid var(--linea); border-radius: 999px; }
.etapas-elegir button[aria-pressed='true'] { background: var(--acento-suave); border-color: var(--acento); }
.etapas-elegir button[aria-pressed='true']::after { content: none; }
.etapas-elegir + .btn { margin-top: 8px; }
.ficha dl { gap: 4px 12px; }

/* Gráfica al ancho real */
.grafica-caja { margin-top: 14px; min-height: 230px; }
.grafica-caja .grafica { margin-top: 0; }
.sin-anim .paso-barra i { animation: none !important; }

/* Conexiones */
.conex-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.conex-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.conex-cab h2 { flex: 1; min-width: 0; }
.conex-icono { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.conex-icono svg { width: 22px; height: 22px; }
.conex p { color: var(--tinta2); font-size: 14px; }

@media (max-width: 1180px) { .lado-estado div, .lado-estado svg { display: none; } .lado-estado { justify-content: center; padding: 16px 0; } .saludo span { display: none; } }
@media (max-width: 820px) {
  .saludo, .ayuda-btn, .nav a[data-ir='/conexiones'] { display: none; }
  .bot { height: 38px; padding: 0; } .bot .interruptor { height: 36px; width: auto; padding: 0 13px; }
  .ayuda { position: fixed; left: 16px; right: 16px; top: 66px; width: auto; }
}
.foto-caja { align-self: flex-start; }
.filtros { flex-wrap: nowrap; gap: 5px; }
.filtros button { padding: 5px 9px; font-size: 12.5px; }
@media (min-width: 1181px) and (max-width: 1500px) { .filtros { padding: 0 12px 12px; gap: 4px; } .filtros button { padding: 4px 8px; font-size: 12px; } }

/* ================= Ronda 5 ================= */
.lado-caja { position: relative; margin-top: auto; display: flex; align-items: center; padding-right: 12px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r3); }
.lado-caja .lado-estado { flex: 1; min-width: 0; margin: 0; border: 0; background: none; border-radius: var(--r3); }
.ayuda-arriba { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 290px; }
.canal-suelta { position: static; width: 20px; height: 20px; border: 0; flex: none; }
.desple-boton .canal-suelta { width: 16px; height: 16px; } .desple-boton .canal-suelta svg { width: 9px; height: 9px; }
.filtros .desple { margin-left: auto; }
.filtros .desple-menu { left: auto; right: 0; min-width: 190px; }
.filtros .desple-boton { padding: 5px 6px 5px 10px; font-size: 12.5px; }
.filtros .desple-menu button { font-size: 13.5px; padding: 8px 12px; }
@media (min-width: 1181px) and (max-width: 1500px) { .filtros .desple-boton { padding: 4px 5px 4px 8px; font-size: 12px; } }
@media (max-width: 1180px) { .lado-caja { padding: 0; justify-content: center; } .lado-caja .ayuda-btn { display: none; } }
@media (max-width: 820px) { .lado-caja { display: none; } }

/* ================= Ronda 6 ================= */
.canal-bloqueo { background: var(--alerta); }
.hilo-cab .desple { flex: none; }
.hilo-cab > div.desple b, .hilo-cab > div.desple small { display: initial; }
.desple-menu.derecha { left: auto; right: 0; min-width: 220px; }
.desple-menu button.peligro { color: var(--alerta); }
.desple-menu button.peligro:hover { background: var(--alerta-suave); }
.icono-btn[aria-expanded='true'] { border-color: var(--acento); color: var(--acento-texto); }
.redactar-pie .desple { margin-right: 2px; }
.redactar-pie .ventana { margin-right: auto; }
.emojis { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: 316px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--sombra); }
.emojis button { height: 34px; border: 0; border-radius: 9px; background: none; font-size: 20px; line-height: 1; }
.emojis button:hover { background: var(--sup2); }
.emojis { width: 328px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.emojis button { padding: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; }

/* ================= Ronda 7: fotos, videos y audios ================= */
.msj-adjunto { padding: 4px; background: var(--sup2); max-width: min(340px, 78%); }
.msj-adjunto img, .msj-adjunto video { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: 15px; background: var(--linea); }
.msj-adjunto a { display: block; }
.msj-adjunto audio { display: block; width: 300px; max-width: 100%; height: 44px; }
.adjunto-vencido { display: block; padding: 8px 10px; font-size: 13px; color: var(--tinta2); white-space: normal; }
.icono-btn.grabando { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.redactar-pie .icono-btn { flex: none; }

/* Conexiones: quién responde en Instagram */
.quien-ig { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.quien-ig > div:first-child { flex: 1; min-width: 260px; }
.quien-ig .quien { width: 300px; flex: none; }
.quien-ig .quien button { padding: 9px; }