/* CRM Agentes (Lubo) · estilos. Todos los colores salen de estas variables.
   Paleta Lubo: rojo, blanco y azul. Claro u oscuro según html[data-tema] (lo pone js/tema.js:
   claro, oscuro o automático por horario, guardado solo en cada dispositivo). */
:root {
  --bg: #F3F6FC; --surface: #FFFFFF; --surface-2: #E8EEF9; --ink: #0B1B3F; --muted: #53617D; --line: #D3DCEC;
  --blue: #1D46C8; --blue-ink: #FFFFFF; --red: #D3202F; --red-ink: #FFFFFF; --red-bg: #FDE6E8;
  --chat: #EAF0FA; --b-in: #FFFFFF; --b-out: #D9E4FB; --b-persona: #FCE4E7;
  --banda: #0B1B3F; --banda-ink: #FFFFFF;
  --paper: #FFFFFF; --paper-ink: #111111;
  --info: #1D46C8; --info-bg: #E1E9FB; --warn: #C21B2A; --warn-bg: #FDE4E6; --warn-line: #D3202F;
  --ok: #1D6A3D; --ok-bg: #DDF2E4; --bad: #C21B2A; --bad-bg: #FDE4E6;
  --sombra: 0 1px 2px rgb(11 27 63 / .06), 0 4px 14px -8px rgb(11 27 63 / .18);
  --etq-azul: #1D46C8; --etq-azul-bg: #E1E9FB; --etq-verde: #1D6A3D; --etq-verde-bg: #DDF2E4; --etq-rojo: #C21B2A; --etq-rojo-bg: #FDE4E6;
  --etq-violeta: #5B34A8; --etq-violeta-bg: #ECE4FA; --etq-celeste: #0A5E78; --etq-celeste-bg: #DBF0F7; --etq-rosa: #A3205F; --etq-rosa-bg: #FBE3EF;
  --nota-bg: #EEF1F8; --tilde-leido: #1D46C8;
  --f-display: 'Oswald', 'Arial Narrow', Arial, sans-serif; --f-body: 'Nunito', 'Segoe UI', system-ui, sans-serif; --f-mono: 'Courier Prime', 'Courier New', monospace;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --bg: #081229; --surface: #0F1C3D; --surface-2: #17274F; --ink: #EEF2FB; --muted: #A4B1CC; --line: #26385F;
  --blue: #7FA2FF; --blue-ink: #061230; --red: #FF5F6D; --red-ink: #2A0509; --red-bg: #3B1521;
  --chat: #0B1734; --b-in: #17274F; --b-out: #203D84; --b-persona: #4A1A27;
  --banda: #17274F; --banda-ink: #EEF2FB;
  --paper: #F7F7F4; --paper-ink: #111111;
  --info: #9FB9FF; --info-bg: #172C5E; --warn: #FF7A86; --warn-bg: #3B1521; --warn-line: #FF5F6D;
  --ok: #7AD69C; --ok-bg: #10301F; --bad: #FF7A86; --bad-bg: #3B1521;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px -10px rgb(0 0 0 / .6);
  --etq-azul: #9FB9FF; --etq-azul-bg: #172C5E; --etq-verde: #7AD69C; --etq-verde-bg: #10301F; --etq-rojo: #FF7A86; --etq-rojo-bg: #3B1521;
  --etq-violeta: #C9AEFF; --etq-violeta-bg: #2B1E4F; --etq-celeste: #86D6EF; --etq-celeste-bg: #0E3340; --etq-rosa: #FF9BCB; --etq-rosa-bg: #3E1630;
  --nota-bg: #1B2A50; --tilde-leido: #7FA2FF;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--f-body); }
h1, h2 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(24px, 3.2vw, 32px); }
h2 { font-size: 16px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
p { margin: 0; }
a { color: var(--blue); }
.muted { color: var(--muted); } .chico { font-size: 13px; }
.eyebrow { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--red); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Botones, chips y campos */
.btn { font: 700 14px var(--f-body); border-radius: 999px; padding: 9px 16px; border: 1px solid var(--blue); background: var(--blue); color: var(--blue-ink); cursor: pointer; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--blue); }
.btn.sm { font-size: 13px; padding: 6px 12px; }
.btn.ancho { width: 100%; }
.btn.peligro { border-color: var(--bad); color: var(--bad); background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.pill { display: inline-block; font: 700 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.info { background: var(--info-bg); color: var(--info); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.bad { background: var(--bad-bg); color: var(--bad); }
input, select, textarea { font: 15px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; min-width: 0; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
.mono { font: 13px/1.5 var(--f-mono); }
label, .lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.lbl { display: block; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.fila.entre { justify-content: space-between; flex-wrap: nowrap; }
.fila.envolver { gap: 6px 16px; }
.pila { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.vacio { color: var(--muted); padding: 14px 0; }
.card.vacio { padding: 24px; }

/* Pantallas de entrada */
.centro { min-height: 100%; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.login input { width: 100%; }
.login .fila { margin-top: 8px; }
.login-tema { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.login-legal { text-align: center; margin: 2px 0 0; } .login-legal a { color: var(--muted); }
.login-tema .segmentos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.login-legal { text-align: center; margin: 2px 0 0; } .login-legal a { color: var(--muted); }
.login-tema .segmentos button { display: flex; justify-content: center; gap: 6px; }

/* Marco general */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }
.nav { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.marca b { display: block; font-size: 15px; } .marca small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.logo { width: 38px; height: 38px; border-radius: 10px; background: var(--red); color: var(--red-ink); display: grid; place-items: center; font: 700 18px var(--f-display); flex: none; }
.links { display: flex; flex-direction: column; gap: 2px; }
.links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.links a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.links a:hover { background: var(--surface-2); }
.links a.activo { background: var(--blue); color: var(--blue-ink); }
.badge { margin-left: auto; background: var(--red); color: var(--red-ink); border-radius: 999px; font-size: 12px; padding: 1px 8px; font-weight: 800; }
.pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
main { overflow-y: auto; padding-block: 24px 48px; padding-left: max(16px, min(4vw, 40px)); padding-right: max(16px, min(4vw, 40px)); display: flex; flex-direction: column; gap: 20px; }
main > * { max-width: 1280px; width: 100%; margin-inline: auto; flex-shrink: 0; }
.vista-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.vista-h p.muted { margin-top: 6px; max-width: 68ch; }
.demo-aviso { width: 100%; font-size: 13px; color: var(--info); background: var(--info-bg); border-radius: 10px; padding: 7px 12px; }

/* Botón "Opciones" (apariencia, cuenta): solo en celular y tablet, arriba a la derecha de cada pantalla */
.btn-opciones { display: none; flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.btn-opciones svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn-opciones:hover { border-color: var(--blue); color: var(--blue); }
.vista-h { position: relative; }
.pie-tema { display: flex; flex-direction: column; gap: 6px; }
.pie-tema .segmentos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pie-tema .segmentos button { padding: 5px 2px; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.tema-sel button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.opc-bloque { border-top: 1px solid var(--line); padding-top: 12px; }
.opc-bloque:first-child { border-top: 0; padding-top: 0; }
.modal .tema-sel { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; }
.modal .tema-sel button { border-radius: 10px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Recepción */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
main > .segmentos { margin-left: max(0px, calc((100% - 1280px) / 2)); margin-right: auto; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; }
.kpi b { font: 600 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-weight: 600; margin-top: 4px; }
.kpi.warn { border-color: var(--warn-line); background: var(--warn-bg); } .kpi.warn b { color: var(--warn); }
.kpi.info b { color: var(--info); }
.bloque { display: flex; flex-direction: column; gap: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.ayuda { border: 1px solid var(--warn-line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.ayuda-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--warn-bg); padding: 10px 12px; }
.caja { margin: 10px 12px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.tel { font: 800 18px var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-line); margin-right: 6px; }
.mini { margin: 10px 12px 0; background: var(--chat); border-radius: 10px; padding: 10px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mini .msg { font-size: 13px; max-width: 90%; padding: 6px 9px; }
.responder { display: flex; gap: 6px; padding: 10px 12px 0; }
.responder input { flex: 1; border-radius: 999px; }
.pie-tarjeta { padding: 10px 12px 12px; }
.comanda { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ticket { background: var(--paper); color: var(--paper-ink); font: 14px/1.35 var(--f-mono); padding: 14px 16px; margin: 0; border-radius: 4px; overflow-x: auto; white-space: pre; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 16px -10px rgba(0,0,0,.45); }

/* Pedidos */
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; width: fit-content; max-width: 100%; }
.segmentos button { font: 700 14px var(--f-body); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.segmentos button[aria-pressed="true"] { background: var(--blue); color: var(--blue-ink); }
.segmentos.chico button { font-size: 13px; padding: 5px 11px; }
.tablero { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-bottom: 6px; }
.columna { background: var(--surface-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; container-type: inline-size; }
.columna-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.pedido { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pedido-cuerpo { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.pedido-cuerpo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.hora { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Chats */
.chats { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.chat-lista { display: flex; flex-direction: column; gap: 6px; max-height: 76vh; overflow-y: auto; }
.chat-item { all: unset; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.chat-item.activo { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.chat-item:focus-visible { outline: 2px solid var(--blue); }
.panel-chat { display: flex; flex-direction: column; overflow: hidden; }
.panel-chat:has(.rapidas:not([hidden])), .panel-chat:has(.emojis:not([hidden])) { overflow: visible; }
.chat-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.banda-ayuda { background: var(--warn-bg); color: var(--ink); padding: 8px 16px; font-size: 14px; }
.banda-anuncio { background: var(--info-bg); color: var(--ink); padding: 8px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.banda-anuncio p { margin: 0; }
.banda-anuncio .anuncio-texto { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.banda-anuncio a { color: var(--blue); font-weight: 700; }
.chat { background: var(--chat); height: min(58vh, 560px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.msg.in, .msg.persona { align-self: flex-start; border-top-left-radius: 4px; }
.msg.in { background: var(--b-in); } .msg.persona { background: var(--b-persona); }
.msg.out { align-self: flex-end; background: var(--b-out); border-top-right-radius: 4px; }
.msg.sys { align-self: center; background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; text-align: center; }
.msg .tag { display: block; font: 800 10.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); margin-bottom: 2px; }
.msg .tag.ia { color: var(--info); }
.msg .t { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.typing { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 4px 8px; }
.composer { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.composer .fila { flex-wrap: nowrap; }
.composer input { flex: 1; border-radius: 999px; padding: 10px 16px; }
.sim { padding: 0 16px 14px; }
/* Herramientas del equipo en Chats (nov 2026) */
.pill.etq { text-transform: none; letter-spacing: .01em; }
.etq-azul { background: var(--etq-azul-bg); color: var(--etq-azul); } .etq-verde { background: var(--etq-verde-bg); color: var(--etq-verde); }
.etq-rojo { background: var(--etq-rojo-bg); color: var(--etq-rojo); } .etq-violeta { background: var(--etq-violeta-bg); color: var(--etq-violeta); }
.etq-celeste { background: var(--etq-celeste-bg); color: var(--etq-celeste); } .etq-rosa { background: var(--etq-rosa-bg); color: var(--etq-rosa); }
.etq-gris { background: var(--surface-2); color: var(--muted); }
.etq-linea { gap: 4px; } .asignado { color: var(--muted); font-weight: 700; }
.chat-item.sin-leer b { font-weight: 900; } .chat-item.sin-leer { border-color: var(--bad); }
.filtros-chats { gap: 6px; } .filtros-chats select { width: 100%; }
.chat-herr { padding: 8px 16px; border-bottom: 1px solid var(--line); gap: 6px; }
.chat-herr select { padding: 5px 10px; font-size: 13px; border-radius: 999px; max-width: 220px; }
.buscar-chat { padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.buscar-chat input { flex: 1; }
.msg { position: relative; }
.msg.encontrado { box-shadow: 0 0 0 2px var(--info); } .msg.actual, .msg.resaltado { box-shadow: 0 0 0 3px var(--blue); }
.msg.nota { align-self: center; max-width: 90%; background: var(--nota-bg); border: 1px dashed var(--blue); color: var(--ink); font-size: 14px; }
.msg .tag.nota-tag { color: var(--blue); }
.msg .reenviado { display: block; font-size: 12px; font-style: italic; color: var(--muted); }
.msg .cita { all: unset; cursor: pointer; display: block; border-left: 3px solid var(--blue); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; font-size: 13px; }
.msg .cita b { display: block; font-size: 11px; color: var(--blue); }
.msg .tilde { margin-left: 4px; font-weight: 800; letter-spacing: -2px; } .msg .tilde.leido { color: var(--tilde-leido); } .msg .tilde.fallo { color: var(--bad); letter-spacing: 0; }
.msg-mas { position: absolute; top: 2px; right: 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 900; padding: 0 4px; line-height: 1; opacity: .55; }
.msg:hover .msg-mas, .msg-mas:focus-visible { opacity: 1; }
.msg-pdf { display: block; padding: 8px; margin: 4px 0; background: var(--surface-2); border-radius: 6px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.msg-borrada { padding: 6px 8px; margin: 2px 0 4px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.cita-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-left: 3px solid var(--blue); background: var(--surface-2); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.aviso-24h { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 13px; }
.composer.en-nota input#chat-box { border-style: dashed; border-color: var(--blue); background: var(--nota-bg); }
.composer .segmentos button:disabled { opacity: .45; cursor: not-allowed; }
.composer { position: relative; }
.rapidas, .emojis { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 6; }
.rapidas { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; box-shadow: var(--sombra); }
.rapida { display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.rapida.elegida { background: var(--info-bg); }
.rapida-usar { all: unset; cursor: pointer; flex: 1; min-width: 0; padding: 6px 8px; display: flex; gap: 8px; overflow: hidden; }
.rapida-usar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapida-vacia { padding: 6px 8px; }
.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px; max-height: 200px; overflow-y: auto; box-shadow: var(--sombra); }
.emoji { border: 0; background: transparent; font-size: 20px; cursor: pointer; border-radius: 8px; padding: 4px; }
.emoji:hover, .emoji:focus-visible { background: var(--surface-2); }
.lista-reenviar { max-height: 50vh; overflow-y: auto; } .lista-reenviar .btn { justify-content: flex-start; text-align: left; }
.rapidas[hidden], .emojis[hidden], .aviso-24h[hidden] { display: none; }
.composer .modos { flex-wrap: wrap; }
.etq-tilde { gap: 8px; cursor: pointer; } .etq-nueva { flex-wrap: wrap; } .etq-nueva input { flex: 1; min-width: 140px; }
@media (max-width: 1023px), (max-height: 500px) and (max-width: 1100px) { .chats { grid-template-columns: minmax(0, 1fr); } .chat-lista { max-height: 260px; } }
/* Chats: el chat abierto ocupa el alto que queda en la pantalla, así la caja para escribir siempre se ve (sin correr hacia abajo) */
.chats { flex: 1 1 auto; min-height: 380px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.chats .panel-chat { min-height: 0; }
.chats .chat { flex: 1 1 auto; height: auto; min-height: 140px; }
.chats .chat-lista { max-height: none; min-height: 0; }
@media (max-width: 1023px), (max-height: 500px) and (max-width: 1100px) {
  .chats:not(.con-chat) { min-height: 0; }
  /* Con un chat abierto en celular o tablet vertical: solo el chat, a pantalla completa */
  main:has(.chats.con-chat) { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  main:has(.chats.con-chat) > :not(.chats) { display: none; }
  .chats.con-chat { flex: 1 1 auto; min-height: 0; }
  .chats.con-chat .panel-chat { height: 100%; }
  .chats.con-chat .chat { min-height: 100px; }
}
/* Celular acostado (pantalla muy baja): no entra todo junto; el chat toma casi toda la altura y se corre un poco para ver la caja de escribir */
@media (max-height: 500px) {
  .chats.con-chat { flex: none; }
  .chats.con-chat .panel-chat { height: auto; }
  .chats.con-chat .chat { flex: none; height: 62dvh; min-height: 150px; }
}

/* Clientes */
.tabla-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tabla tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#cli-busca { width: min(420px, 100%); }
.historial { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* Mi negocio */
.seccion { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.seccion summary { cursor: pointer; font: 500 16px var(--f-display); letter-spacing: .07em; text-transform: uppercase; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.campo input, .campo textarea { width: 100%; }
.tilde { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 15px; }
.tilde input { width: 18px; height: 18px; }
.linea { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.item { align-items: flex-end; flex-wrap: wrap; }
.item > .campo { min-width: 140px; }

/* Ventanas y avisos */
.modal-fondo { position: fixed; inset: 0; background: rgb(4 10 28 / .55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--surface); border-radius: 16px; width: min(560px, 100%); max-height: calc(100% - 32px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.modal-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-h h2 { text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 600; }
.modal-c { padding: 16px 18px; overflow-y: auto; }
.modal-a { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: 6px; }
.form > input, .form > select, .form > textarea, .form > div > input, .form > div > select { width: 100%; margin-bottom: 6px; }
.form .item select { flex: 1; min-width: 120px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos input { width: 100%; }
#toasts { position: fixed; bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); }
.toast.bad { background: var(--bad); color: var(--red-ink); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Mensajes nuevos sin responder */
.nuevos { margin: 10px 12px 0; background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 8px 12px; font-weight: 800; display: flex; align-items: center; }
.nuevos .punto, .msg.nuevo::after { background: var(--bad); }
.nuevos-inline { color: var(--bad); font-weight: 800; }
.msg.nuevo { box-shadow: 0 0 0 2px var(--bad); position: relative; }

.crece { flex: 1; }
.barra-guardar { position: sticky; bottom: -46px; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 -6px 18px -12px rgba(0,0,0,.35); }
.sin-guardar { color: var(--bad); font-weight: 800; }

.solo-movil { display: none; }
@media (max-width: 1023px), (max-height: 500px) and (max-width: 1100px) {
  .solo-movil { display: inline-block; }
  .chats.con-chat .chat-lista { display: none; }
  .chats:not(.con-chat) .panel-chat { display: none; }

}
/* Tablero de pedidos: las 5 columnas siempre entran en la pantalla (sin correr de costado), en vertical y en horizontal */
.acciones-pedido { flex-wrap: wrap; }
.acciones-pedido .btn { min-width: 0; white-space: normal; line-height: 1.15; }
.pedido, .pedido-cuerpo { min-width: 0; overflow-wrap: break-word; }
.pedido-cuerpo .fila.entre.chico { flex-wrap: wrap; gap: 2px 8px; }
@container (max-width: 200px) {
  .columna-h h2 { font-size: 13px; letter-spacing: .02em; }
  .pedido { padding: 8px; gap: 6px; }
  .pedido-cuerpo { font-size: 13px; }
  .pedido .hora { font-size: 13px; }
  .acciones-pedido { flex-direction: column; align-items: stretch; gap: 6px; }
  .acciones-pedido .btn { width: 100%; padding: 7px 8px; font-size: 13px; }
}
@container (max-width: 150px) {
  .columna-h h2 { font-size: 12px; }
  .pedido-cuerpo { font-size: 12px; }
  .pedido .pedido-cuerpo > .fila:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 1100px) { .tablero { gap: 6px; } .columna { padding: 6px; gap: 8px; } }
/* Celular (pantalla angosta): una columna abajo de la otra, sin correr de costado */
@media (max-width: 600px) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .columna .vacio { margin: 0; }
}
.pedido .cliente { font-weight: 700; }
.rol-admin { display: inline-block; margin-top: 2px; color: var(--blue); font-weight: 800; }
.demo-aviso.pausado { color: var(--bad); background: var(--bad-bg); }
.persona { padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.persona:last-child { border-bottom: 0; }
.nota-admin { width: 160px; font-size: 13px; padding: 5px 8px; }
.pie label { color: var(--muted); }
.pie select { width: 100%; }
.relleno { padding: 16px; }
.sin-salto { flex-wrap: nowrap; }

/* Tablero de administración */
.kpi small { margin-top: 2px; font-size: 12.5px; }
.alerta { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.alerta.warn { border-left-color: var(--warn-line); background: var(--warn-bg); }
.alerta.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.grafico-caja { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.grafico { width: 100%; height: auto; }
.g-grilla { stroke: var(--line); stroke-width: 1; }
.g-eje { fill: var(--muted); font: 11px var(--f-body); }
.g-eje.fuerte { fill: var(--ink); font-weight: 800; }
.g-valor { fill: var(--ink); font: 700 11px var(--f-body); }
.g-barra { fill: var(--blue); opacity: .55; }
.g-barra.hoy { opacity: 1; }
.fila-pausada td { opacity: .6; }
.nota { color: var(--ink); background: var(--surface-2); border-radius: 6px; padding: 2px 6px; margin-top: 4px; display: inline-block; }

/* Barra cuando el administrador entra a un negocio */
.app.con-barra { grid-template-rows: auto minmax(0, 1fr); }
.barra-admin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: var(--banda); color: var(--banda-ink); border-bottom: 3px solid var(--red); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); padding-top: max(8px, env(safe-area-inset-top, 0px)); font-size: 14px; }
.barra-admin .btn { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.nav-admin .logo { background: var(--blue); color: var(--blue-ink); }

/* Tarjetas de números que se pueden tocar */
.kpi.clicable { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi.clicable:hover { border-color: var(--blue); }
.kpi .ver-mas { color: var(--blue); font-weight: 800; margin-top: 4px; }

/* Clientes del administrador */
.cliente-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 14px 16px; }
.cliente-fila.apagado { background: var(--surface-2); }
.cf-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 360px; }
.cf-nombre { font-size: 17px; }
.cf-uso { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.aviso-ia { color: var(--warn); font-weight: 800; }
.cf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font: 800 13px var(--f-body); color: var(--bad); }
.switch .perilla { width: 38px; height: 22px; border-radius: 999px; background: var(--bad-bg); position: relative; transition: background .15s; }
.switch .perilla::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bad); transition: transform .15s, background .15s; }
.switch.on { color: var(--ok); }
.switch.on .perilla { background: var(--ok-bg); }
.switch.on .perilla::after { transform: translateX(16px); background: var(--ok); }
.switch:disabled { opacity: .6; cursor: default; }

/* Problemas de la IA */
.situacion { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.situacion .motivo { font-weight: 700; }
.situacion .cita { background: var(--chat); border-radius: 10px; padding: 8px 10px; }
.consejo { margin: 0; font-size: 14px; color: var(--info); }
.motivo-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 30%) 32px; gap: 10px; align-items: center; font-size: 14px; }
.barrita { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barrita span { display: block; height: 100%; background: var(--warn-line); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .switch .perilla, .switch .perilla::after { transition: none; } }
.situacion, .situacion .cita, .situacion .motivo, .motivo-fila > span, .alerta > span { overflow-wrap: anywhere; min-width: 0; }
.situacion .fila.entre { flex-wrap: wrap; }

/* Tablero del negocio: datos nuevos */
.precio-linea { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.precio-linea:last-of-type { border-bottom: 0; }
.precio-linea .campo { max-width: 200px; }
.barra-puntaje { display: block; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barra-puntaje > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.barra-puntaje.mini { display: inline-block; width: 70px; height: 7px; vertical-align: middle; }
/* Plan de mensajes: azul mientras va bien, rojo desde el 80% (sin amarillo) */
.barra-plan { display: block; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.barra-plan > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.barra-plan.alto > span { background: var(--bad); }
.barra-plan.mini { display: inline-block; width: 70px; height: 7px; vertical-align: middle; margin: 0; }
.plan-mensajes.alto { border-color: var(--warn-line); background: var(--bad-bg); }
.plan-rojo { color: var(--bad); font-weight: 700; }
.tabla tr.fila-roja td { background: var(--bad-bg); }
.co-sub { margin: 10px 0 0; font-size: 15px; }
.puntaje { font: 600 24px var(--f-display); }
.puntaje.ok { color: var(--ok); } .puntaje.warn { color: var(--warn); } .puntaje.bad { color: var(--bad); }
.faltan { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.cf-config { color: var(--ink); }
.riesgo-txt { color: var(--bad); font-weight: 700; }
/* Mapa de calor de horarios */
.calor { border-collapse: separate; border-spacing: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.calor th { color: var(--muted); font-weight: 700; text-align: center; padding: 0 2px; }
.calor tbody th { text-align: right; padding-right: 6px; }
.calor td { width: 28px; height: 26px; min-width: 24px; text-align: center; border-radius: 5px; background: var(--surface-2); color: transparent; }
.calor td.con { background: color-mix(in srgb, var(--blue) calc(var(--int) * 100%), var(--surface-2)); color: var(--blue-ink); font-weight: 800; }
.alerta { flex-wrap: wrap; }
.alerta > span { flex: 1 1 220px; }
.alerta > .fila.sin-salto { flex-wrap: wrap; }
/* Agotado por hoy */
.agot-cuadro .fila.entre { align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.agot-cuadro.con { border-color: var(--warn-line); background: var(--warn-bg); }
.agot-cuadro p { margin: 4px 0 0; }
.agot-linea { padding: 14px 16px; margin-bottom: 14px; }
.agot-linea h2 { margin: 0 0 6px; }
.agot-lista { list-style: none; margin: 0; padding: 0; }
.agot-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.agot-fila:first-child { border-top: 0; }
.agot-fila label { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; cursor: pointer; min-width: 0; }
.agot-fila label .muted { flex-basis: 100%; }
.agot-fila input[type="checkbox"] { width: 28px; height: 28px; flex: none; accent-color: var(--bad); cursor: pointer; margin: 0; }
.agot-tag { display: none; font: 800 11px var(--f-body); text-transform: uppercase; letter-spacing: .04em; color: var(--bad); background: var(--bad-bg); border-radius: 999px; padding: 2px 8px; }
.agot-fila.marcado label b { text-decoration: line-through; color: var(--muted); }
.agot-fila.marcado .agot-tag { display: inline-block; }
.barra-guardar { position: sticky; bottom: -46px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; margin: 8px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -6px 18px rgb(0 0 0 / .06); }
.btn:disabled { opacity: .55; cursor: default; }
/* Interruptor neutro (apagado en gris, no en rojo) */
.switch.neutro:not(.on) { color: var(--muted); }
.switch.neutro:not(.on) .perilla { background: var(--surface-2); }
.switch.neutro:not(.on) .perilla::after { background: var(--muted); }
.encuesta-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px; }
.encuesta-caja > div { flex: 1 1 320px; min-width: 0; }
.encuesta-caja p { margin: 2px 0 0; }
/* Resumen semanal */
.resumen-semanal { border-left: 4px solid var(--blue); }
.resumen-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.resumen-lista li { display: grid; grid-template-columns: 170px 1fr; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.resumen-lista li:first-child { border-top: 0; }
.resumen-lista li > b { color: var(--ink); }
@media (max-width: 640px) { .resumen-lista li { grid-template-columns: 1fr; } }
.opinion q { font-style: italic; }
.agot-fila label .muted { font-weight: 500; }
/* Avisos para el agente */
.avisos-lista { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; }
.avisos-lista li { padding: 8px 0; border-top: 1px solid var(--line); }
.avisos-lista li:first-child { border-top: 0; }
.avisos-lista li > span { display: block; overflow-wrap: anywhere; margin-bottom: 6px; }
.ensenadas summary { cursor: pointer; font-weight: 800; }
.ensenada { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ensenada:first-child { border-top: 0; padding-top: 0; }
/* Mi negocio por pasos */
.pasos { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.pasos button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 6px; font: 700 13px var(--f-body); cursor: pointer; }
.pasos button.activo { background: var(--blue); border-color: var(--blue); color: var(--blue-ink); }
.pasos .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 12px; }
.pasos .num.ok { background: var(--ok-bg); color: var(--ok); }
.pasos button.activo .num { background: color-mix(in srgb, var(--blue-ink) 25%, transparent); color: var(--blue-ink); }
.negocio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1180px) { .negocio-cuerpo { grid-template-columns: minmax(0, 1fr) 380px; } .panel-prueba { position: sticky; top: 0; } }
.negocio-paso { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.paso-titulo { margin: 0; }
.paso-nav { margin-top: 4px; }
.panel-prueba { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.panel-prueba .prueba-chat { height: 380px; overflow-y: auto; }
.panel-prueba form input { flex: 1; min-width: 0; }
.segmentos.envolver { flex-wrap: wrap; }
.item.especial { flex-wrap: wrap; align-items: flex-end; }
.pregunta-extra { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.roles { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
/* Listas de palabras (chips con ×) */
.chips-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip-quitar { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-weight: 700; overflow-wrap: anywhere; }
.chip-quitar button { border: 0; background: var(--bad-bg); color: var(--bad); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-weight: 800; line-height: 1; }
#pp-seccion form input { flex: 1; min-width: 0; }
/* Cupos y barrios */
.cupo-input { width: 120px; flex: none; text-align: right; }
.zonas { display: flex; flex-direction: column; gap: 10px; }
.zona-fila { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 10px; align-items: end; }
@media (max-width: 560px) { .zona-fila { grid-template-columns: minmax(0, 1fr) 110px; } .zona-fila > button { grid-column: 1 / -1; justify-self: start; } }
.fila.envolver { flex-wrap: wrap; }
/* Pedidos: producción, búsqueda, impresión */
.busca { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.produccion .prod-lineas { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.prod-linea ul { margin: 4px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.prod-linea .num { display: inline-block; min-width: 72px; font-weight: 800; color: var(--blue); }
.marco-impresion { position: fixed; width: 0; height: 0; border: 0; right: 0; bottom: 0; }
.bienvenida { border-left: 4px solid var(--blue); } .bienvenida p { margin: 4px 0; }
.whatsapp { border-left: 4px solid var(--ok); }
.whatsapp p { margin: 4px 0 0; }
.guia-wa ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* Agenda de turnos */
.agenda-controles input[type=date] { width: auto; }
table.agenda { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(70px + var(--cols, 2) * 150px); table-layout: fixed; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.agenda th, table.agenda td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0; height: 34px; vertical-align: top; }
table.agenda thead th { position: sticky; top: 0; background: var(--surface-2); padding: 8px; text-align: left; font: 800 13px var(--f-body); z-index: 1; }
table.agenda thead th small { display: block; font-weight: 600; color: var(--muted); }
table.agenda th.hora { width: 70px; padding: 4px 8px; font: 700 12px var(--f-body); color: var(--muted); background: var(--surface); text-align: right; }
table.agenda thead th:first-child { width: 70px; }
table.agenda td.cerrado { background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.celda-libre { width: 100%; height: 100%; min-height: 33px; border: 0; background: transparent; color: transparent; cursor: pointer; font: 800 16px var(--f-body); }
.celda-libre:hover, .celda-libre:focus-visible { background: var(--info-bg); color: var(--info); }
.turno-celda { width: 100%; height: 100%; min-height: 33px; border: 0; border-left: 4px solid var(--blue); background: var(--info-bg); color: var(--ink); text-align: left; padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; font: 600 12px var(--f-body); overflow: hidden; }
.turno-celda b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turno-celda.est-reservado { border-left-color: var(--warn-line); background: var(--warn-bg); }
.turno-celda.est-asistio { border-left-color: var(--ok); background: var(--ok-bg); }
.turno-celda.est-no_vino { border-left-color: var(--bad); background: var(--bad-bg); }
.turno-fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; flex-wrap: wrap; }
.turno-fila > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.turno-link { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.turno-rec.pasado { opacity: .75; }
.servicio-caja { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.item.recurso { align-items: flex-end; flex-wrap: wrap; }
.cuenta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 10px; overflow-wrap: anywhere; }
.cuenta:first-child { border-top: 0; padding-top: 0; }
.cuenta > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.link-fila { flex: 1 1 320px; max-width: 560px; flex-wrap: nowrap; }
.link-fila .link-clave { flex: 1; min-width: 0; font-size: 13px; }
.link-fila .btn { flex: none; }
.sumar-cuenta { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sumar-cuenta .fila input { flex: 1 1 220px; min-width: 0; }
.sumar-cuenta .fila select { flex: 0 1 auto; }
.detalle-turno .fila.entre { border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.btn-link { background: none; border: 0; padding: 4px 0; color: var(--blue); font: 700 13px var(--f-body); cursor: pointer; text-decoration: underline; text-align: left; }
/* Gastos de un cliente (admin): 5 cuadros grandes */
.kpis.gastos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 700px) { .kpi.gasto.total, .kpi.gasto.limite { grid-column: 1 / -1; } .kpi.gasto { padding: 14px 16px; min-height: 0; } .kpi.gasto .g-num { font-size: 36px; } .kpi.gasto .g-usd { font-size: 17px; } .kpi.gasto .g-usd.solo { font-size: 24px; } }
.kpi.gasto { padding: 20px 22px; gap: 8px; min-height: 150px; }
.kpi.gasto .g-tit { margin: 0; color: var(--ink, inherit); font-weight: 800; font-size: 16px; }
.kpi.gasto .g-num { font: 600 46px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi.gasto .g-usd { font: 700 21px/1.2 var(--f-body); font-variant-numeric: tabular-nums; color: var(--muted); }
.kpi.gasto .g-usd.solo { font: 600 32px/1.1 var(--f-display); color: inherit; margin-top: auto; white-space: nowrap; }
.kpi.gasto.limite .g-usd.solo { font-size: clamp(22px, 2.2vw, 32px); }
.kpi.gasto.total { border-color: var(--blue); }
.kpi.gasto.total .g-usd { color: var(--blue); }
.kpi.gasto.bad { border-color: var(--bad); background: var(--bad-bg); } .kpi.gasto.bad .g-usd { color: var(--bad); }
.kpi.gasto.warn .g-usd { color: var(--warn); }
.banda-limite { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cf-acciones { flex-direction: column; align-items: flex-end; }
.cf-acciones .cf-entrar { align-self: stretch; }
@media (max-width: 700px) { .cf-acciones { align-items: stretch; } }
.cobro-plata { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.cobro-plata .neg { color: var(--bad); }
.prueba-gratis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-color: var(--blue); }
.prueba-gratis .btn { margin-left: auto; }
.oculto-visual { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.msg-foto { display: block; max-width: min(240px, 100%); max-height: 320px; border-radius: 10px; margin-bottom: 6px; object-fit: cover; }
/* Salud: pacientes */
.pac-busca-caja { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 18px; }
.buscador-grande { width: min(640px, 100%); font-size: 19px; padding: 14px 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); }
.buscador-grande:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.tabla.pacientes td, .tabla.pacientes th { vertical-align: middle; }
.tabla.pacientes .pac-lapiz { width: 44px; text-align: center; }
.icono-btn { font-size: 17px; line-height: 1; padding: 6px 10px; }
.pac-nombre { background: none; border: 0; padding: 0; font: 700 15.5px var(--f-body); color: inherit; cursor: pointer; text-align: left; }
.pac-nombre:hover { color: var(--blue); text-decoration: underline; }
.grilla-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
.grilla-ficha .campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grilla-ficha .campo.ancho2 { grid-column: span 2; }
.grilla-ficha .campo.fuerte label { font-weight: 800; }
.grilla-ficha input, .grilla-ficha select, .grilla-ficha textarea { width: 100%; min-width: 0; }
.con-lupa input { flex: 1; min-width: 0; }
.lupa { flex: none; }
.pac-edad { white-space: nowrap; }
.ficha-paciente { display: flex; flex-direction: column; gap: 14px; }
.acciones-ficha { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 2; }
.evolucion p { margin: 4px 0 0; white-space: pre-wrap; }
.el-lista { max-height: 320px; overflow: auto; }
.el-op { justify-content: flex-start; text-align: left; }
@media (max-width: 640px) { .grilla-ficha .campo.ancho2 { grid-column: auto; } }
/* Salud: profesionales */
.burbujas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 28px auto; max-width: 900px; }
.burbuja-prof { position: relative; display: flex; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); min-width: 210px; }
.burbuja-prof .prof-nombre { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: 14px 18px 14px 24px; cursor: pointer; color: inherit; text-align: left; font: inherit; border-radius: 999px; }
.burbuja-prof .prof-nombre b { font-size: 17px; }
.burbuja-prof .prof-nombre span { font-size: 13.5px; }
.burbuja-prof .prof-nombre small { font-size: 12.5px; color: var(--blue); font-weight: 700; }
.burbuja-prof:hover { border-color: var(--blue); }
.burbuja-prof .prof-editar { background: none; border: 0; padding: 0 18px 0 6px; cursor: pointer; font-size: 17px; color: var(--muted); border-radius: 999px; }
.burbuja-prof .prof-editar:hover { color: var(--blue); }
.burbuja-prof.agregar { align-items: center; gap: 10px; padding: 14px 24px; border-style: dashed; cursor: pointer; color: var(--blue); font: 700 15px var(--f-body); }
.burbuja-prof.agregar b { font-size: 22px; }
.centrado { text-align: center; }
.prof-turno, .libre-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.libre-fila { justify-content: flex-start; }
.libre-fila .btn { margin-left: auto; }
.libre-fila.pasado { opacity: .55; }

/* Foto del perfil de WhatsApp */
.wa-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.wa-foto.vacia { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.wa-foto[hidden] { display: none; }
.revision { list-style: none; padding: 0; margin: 6px 0; }
.revision li { padding: 6px 0; border-bottom: 1px solid rgba(127,127,127,.2); }
.revision li.ok { color: inherit; }
.revision li.mal { color: var(--bad); font-weight: 700; }
.formas-fila { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 10px; align-items: center; }
.formas-fila input { width: 100%; }
@media (max-width: 560px) { .formas-fila { grid-template-columns: 1fr; } }
.kioscos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kiosco h2 { margin: 0; }
.kio-personas { list-style: none; padding: 0; margin: 10px 0; }
.kio-personas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(127,127,127,.2); flex-wrap: wrap; }
.kio-linea { font-size: 13px; font-weight: 700; color: var(--blue); margin: 1px 0; }
.anuncio-linea { color: var(--info); font-weight: 600; margin: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tacho { padding: 4px 7px; line-height: 0; }
.tacho svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tacho { color: var(--bad); border-color: currentColor; }
.tacho:hover { background: var(--bad-bg); }
.chat-item .tacho { padding: 2px 5px; }
/* Página de un kiosco: 7 días (hoy a la derecha) y la cuenta */
.kio-pie { margin-top: 8px; align-items: flex-end; }
.kio-deuda-mini { margin: 2px 0 0; font-size: 14px; }
.kio-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kio-dia { padding: 12px 10px; min-height: 320px; }
.kio-dia.hoy { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
.kio-dia-nombre { font-weight: 800; margin: 0; }
.kio-dia-fecha { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.kio-ped { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.kio-ped ul { margin: 0; padding-left: 16px; font-size: 14px; }
.kio-ped.cancelado { opacity: .5; text-decoration: line-through; }
.kio-abajo { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; margin-top: 22px; align-items: start; }
.kio-monto { font-size: 34px; font-weight: 800; margin: 4px 0 0; }
.kio-deuda .btn.ancho { margin-top: 12px; }
@media (max-width: 1100px) { .kio-semana { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kio-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kio-abajo { grid-template-columns: 1fr; } }
.modal.ancha { width: min(720px, calc(100vw - 32px)); max-width: none; }
.pk-linea { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.pk-linea h3 { margin: 0 0 6px; font-size: 16px; }
.pk-fila { display: grid; grid-template-columns: 2fr 1fr 1fr 36px; gap: 8px; align-items: center; margin-bottom: 6px; }
.pk-fila input { width: 100%; min-width: 0; }
.pk-titulos span { font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .pk-fila { grid-template-columns: 1fr 1fr; } .pk-fila input:first-child { grid-column: 1 / -1; } .pk-titulos { display: none; } }
/* Alarma de pedido nuevo (pantalla completa hasta tocar "Visto") */
.alarma { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 30, 60, .82); display: grid; place-items: center; padding: 16px; animation: alarma-fondo 1.2s ease-in-out infinite alternate; }
@keyframes alarma-fondo { from { background: rgba(10, 30, 60, .82); } to { background: rgba(160, 40, 20, .85); } }
.alarma-c { background: var(--surface); color: var(--ink); border-radius: 22px; padding: 28px 24px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.alarma-t { font-size: clamp(30px, 6vw, 46px); font-weight: 800; margin: 0 0 14px; }
.alarma-lista { display: grid; gap: 10px; margin-bottom: 18px; text-align: left; }
.alarma-ped { border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 18px; }
.alarma-ped p { margin: 4px 0 0; }
.alarma-visto { width: 100%; font-size: 26px; padding: 18px; border-radius: 16px; }
.avisos-push { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .alarma { animation: none; } }
.pedido { position: relative; }
.pedido-tacho { position: absolute; top: 8px; right: 8px; padding: 3px 5px !important; z-index: 1; }
.pedido .pedido-cuerpo > .fila:first-child { padding-right: 40px; }
#ver-cancelados { margin-left: auto; }
.btn.tacho, .btn.ghost.tacho { color: var(--bad); border-color: var(--bad); }
.pedido-tacho svg { width: 14px; height: 14px; }
.alarma-ayuda { border-color: var(--bad); background: var(--bad-bg); }
.banner-sonido { width: 100%; text-align: left; font: inherit; font-weight: 700; color: var(--warn); cursor: pointer; }
.avisos-estado { margin-top: 8px; }
.avisos-aparatos, .avisos-ayuda { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.avisos-aparatos summary, .avisos-ayuda summary { cursor: pointer; font-weight: 600; }
.lista-aparatos { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.lista-aparatos li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.avisos-ayuda ul { padding-left: 18px; display: grid; gap: 6px; margin: 8px 0 0; }
.txt-mal { color: var(--bad); }
.lista-reglas { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.lista-reglas li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.lista-reglas .regla { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; }
.lista-reglas .regla-ya { opacity: .6; }
.hd-fila { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cambio.hecho { opacity: .7; }

/* Separador de día en los chats ("Hoy", "Ayer · sábado 24 de octubre"…) */
.separador-dia { align-self: center; position: sticky; top: 4px; z-index: 1; margin: 6px 0 2px; }
.separador-dia span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--b-in); color: var(--muted); font-size: 12px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.entrega-linea { color: var(--info); overflow-wrap: anywhere; }
.a-pedido { min-width: 150px; }
.a-pedido input[type=number] { margin-top: 4px; }

/* ---------- Explicaciones y grupos de opciones ---------- */
.explica { background: var(--info-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; }
.explica p { margin: 4px 0; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }

/* "¿Vendés por mayor?" al crear el negocio */
fieldset.sin-borde { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
fieldset.sin-borde legend { font-weight: 600; padding: 0; margin-bottom: 2px; }
fieldset.sin-borde[hidden] { display: none; }
.tabs-dia { gap: 8px; margin: 4px 0 12px; }
.promo-fila .grilla { margin-bottom: 8px; }
.promo-grilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 600px) { .promo-grilla { grid-template-columns: 1fr; } }
/* Productos del menú: nombre, precio y tacho arriba; descripción y opciones abajo */
.item.prod-fila { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) auto; grid-template-areas: "nombre precio tacho" "desc desc desc" "ops ops ops" "fab fab fab"; gap: 6px 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prod-fila .pf-nombre { grid-area: nombre; } .prod-fila .pf-precio { grid-area: precio; } .prod-fila .pf-tacho { grid-area: tacho; padding-bottom: 6px; }
.prod-fila .pf-desc { grid-area: desc; } .prod-fila .pf-ops { grid-area: ops; } .prod-fila .pf-fab { grid-area: fab; }
.prod-fila .campo, .prod-fila input { width: 100%; min-width: 0; }
@media (min-width: 1100px) { .item.prod-fila { grid-template-areas: "nombre precio tacho" "desc ops ops" "fab fab fab"; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) auto; } .prod-fila .pf-ops { grid-column: 2 / 4; } }

/* Importar contactos */
.cuadro-importados { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; }
.cuadro-importados p { margin: 2px 0 0; }
.imp-resultado { display: grid; gap: 8px; }
.imp-resultado:empty { display: none; }
.imp-resultado p { margin: 0; }
.imp-resultado progress { width: 100%; height: 14px; }
.imp-resultado .error, .form .error { color: var(--bad); background: var(--bad-bg); border-radius: 10px; padding: 8px 10px; }
.imp-resultado .aviso-amarillo { color: var(--warn); background: var(--warn-bg); border-radius: 10px; padding: 8px 10px; }
.imp-resultado details ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Tablero: lo urgente primero y "Lo que hizo Lubo este mes" ---------- */
.urgente h2 { display: inline-flex; align-items: center; gap: 8px; }
.punto-rojo { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); flex: none; }
.urgente .alerta { box-shadow: var(--sombra); }
.urgente .alerta.bad { border-left-color: var(--red); }
.alerta.todo-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.alerta.todo-ok b { color: var(--ok); }
.mes-lubo { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--blue); }
.mes-lubo > * { margin-inline: 18px; }
.mes-lubo > :last-child { margin-bottom: 16px; }
.mes-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding-top: 16px; }
.mes-h h2 { margin-top: 2px; }
.mes-chip { font: 700 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); background: var(--red); border-radius: 999px; padding: 4px 12px; }
.mes-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.mes-num { display: flex; flex-direction: column; gap: 2px; background: var(--info-bg); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.mes-num b { font: 600 30px/1.05 var(--f-display); color: var(--blue); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mes-num span { font-weight: 700; font-size: 14px; color: var(--ink); }
.mes-num small { color: var(--muted); font-size: 12.5px; }
.mes-num[data-mes="solas"], .mes-num[data-mes="cobrado"], .mes-num[data-mes="vendido"], .mes-num[data-mes="cerrado"] { background: var(--ok-bg); } .mes-num[data-mes="solas"] b, .mes-num[data-mes="cobrado"] b, .mes-num[data-mes="vendido"] b, .mes-num[data-mes="cerrado"] b { color: var(--ok); }
.mes-num[hidden] { display: none; }
.mes-num[data-mes="vendido"] b, .mes-num[data-mes="cerrado"] b, .mes-num[data-mes="cobrado"] b { font-size: 25px; line-height: 1.15; }
.mes-num[data-mes="fuera"] b { color: var(--red); } .mes-num[data-mes="fuera"] { background: var(--red-bg); }
.mes-num[data-mes="ahorro"] { background: var(--blue); } .mes-num[data-mes="ahorro"] b, .mes-num[data-mes="ahorro"] span, .mes-num[data-mes="ahorro"] small { color: var(--blue-ink); }
.mes-lubo .tabla-wrap { border-radius: 12px; }
@media (max-width: 420px) { .mes-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mes-num b { font-size: 24px; } .mes-num span { font-size: 13px; } }
/* Tarjetas y botones con un poco de profundidad */
.kpi, .card { box-shadow: var(--sombra); }
.links a.activo { box-shadow: inset 3px 0 0 var(--red); }

/* ---------- Celular y tablet (al final, así le gana a las reglas de arriba) ---------- */
/* Celular y tablet en vertical: menú abajo */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .nav { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: 6px 4px; padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); flex-direction: row; gap: 0; }
  .marca, .pie { display: none; }
  .links { flex-direction: row; width: 100%; justify-content: space-around; gap: 2px; }
  .links a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.1; padding: 6px 2px; position: relative; text-align: center; }
  .links a > span:not(.badge) { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
  .badge { position: absolute; top: 0; right: 10%; margin: 0; }
  main { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .btn-opciones { display: grid; }
  .vista-h > div:first-of-type { padding-right: 52px; }
  .vista-h > .btn-opciones { position: absolute; top: 0; right: 0; }
  .app.con-barra { grid-template-rows: auto minmax(0, 1fr) auto; }
  .app.con-barra .barra-admin { order: 0; }
  .app.con-barra main { order: 1; }
  .app.con-barra .nav { order: 2; }
  #toasts { bottom: 84px; }
  .kpi { padding: 10px 12px; } .kpi b { font-size: 28px; }
  .links a.activo { box-shadow: inset 0 -3px 0 var(--red); }
}
@media (max-width: 380px) and (orientation: portrait) { .links a { font-size: 10px; padding: 6px 1px; } .links a svg { width: 19px; height: 19px; } }

/* Celular acostado (pantalla baja): menú angosto a la izquierda, así queda casi toda la altura para trabajar */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .app.con-barra { grid-template-rows: auto minmax(0, 1fr); }
  .nav { padding: 6px 4px; padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .marca, .pie { display: none; }
  .links { gap: 2px; }
  .links a { flex-direction: column; gap: 2px; font-size: 10.5px; line-height: 1.1; padding: 6px 2px; text-align: center; position: relative; }
  .links a > span:not(.badge) { max-width: 100%; overflow-wrap: anywhere; }
  .badge { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 11px; padding: 0 6px; }
  main { padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: 24px; padding-left: 14px; padding-right: max(14px, env(safe-area-inset-right, 0px)); gap: 14px; }
  .btn-opciones { display: grid; width: 38px; height: 38px; }
  .vista-h > div:first-of-type { padding-right: 48px; }
  .vista-h > .btn-opciones { position: absolute; top: 0; right: 0; }
  .barra-admin { flex-wrap: nowrap; padding-top: max(4px, env(safe-area-inset-top, 0px)); padding-bottom: 4px; font-size: 13px; }
  .barra-admin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-admin .btn { padding: 5px 12px; font-size: 13px; }
  h1 { font-size: 24px; }
  .kpi { padding: 10px 12px; } .kpi b { font-size: 26px; }
}


/* ---------- Avisos: rojo = para revisar, verde = ya revisado (al tocarlo y entrar) ---------- */
/* Sin amarillo: --warn es rojo. Un aviso de "Para atender ahora" queda verde apenas alguien lo toca (aunque no se haya cambiado nada). */
.alerta.revisable { box-shadow: var(--sombra); }
.urgente .alerta.pendiente, .alerta.revisable.pendiente { border-left-color: var(--red); background: var(--red-bg); cursor: pointer; }
.alerta.revisable.pendiente b { color: var(--bad); }
.alerta.revisable.revisado { border-left-color: var(--ok); background: var(--ok-bg); cursor: pointer; }
.alerta.revisable.revisado > span:first-child { color: var(--ink); }
.marca-revisado { display: inline-block; font: 800 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ok); margin-right: 6px; }
.alerta.revisado .btn { background: transparent; color: var(--ok); border-color: var(--ok); }
.alerta.pendiente .btn { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.pill.ok-cuenta { background: var(--ok-bg); color: var(--ok); }

/* ---------- Informe del mes ---------- */
.modal.modal-informe { width: min(860px, calc(100vw - 32px)); }
.informe-hoja { display: flex; flex-direction: column; gap: 14px; }
.informe-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 3px solid var(--red); padding-bottom: 10px; }
.informe-cab h2 { text-transform: none; letter-spacing: 0; font-size: 24px; font-weight: 600; margin: 2px 0; }
.informe-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 20px; }
.informe-detalle h3 { margin: 0 0 4px; font: 700 14px var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.informe-detalle ol { margin: 0; padding-left: 20px; }
.informe-detalle p { margin: 0; }
.mes-num small.sube { color: var(--ok); font-weight: 800; } .mes-num small.baja { color: var(--bad); font-weight: 800; }
.mes-num[data-mes="vendido"] { background: var(--ok-bg); } .mes-num[data-mes="vendido"] b { color: var(--ok); }
.mes-num[data-mes="vendido"] b { font-size: clamp(20px, 2.2vw, 26px); white-space: nowrap; overflow-wrap: normal; }
/* Imprimir / guardar PDF: solo el informe, en colores claros aunque el panel esté en oscuro.
   OJO: si se cambian los colores claros de :root (arriba de todo), copiarlos también acá. */
@media print {
  :root, :root[data-tema="oscuro"] {
  --bg: #F3F6FC; --surface: #FFFFFF; --surface-2: #E8EEF9; --ink: #0B1B3F; --muted: #53617D; --line: #D3DCEC;
  --blue: #1D46C8; --blue-ink: #FFFFFF; --red: #D3202F; --red-ink: #FFFFFF; --red-bg: #FDE6E8;
  --chat: #EAF0FA; --b-in: #FFFFFF; --b-out: #D9E4FB; --b-persona: #FCE4E7;
  --banda: #0B1B3F; --banda-ink: #FFFFFF;
  --paper: #FFFFFF; --paper-ink: #111111;
  --info: #1D46C8; --info-bg: #E1E9FB; --warn: #C21B2A; --warn-bg: #FDE4E6; --warn-line: #D3202F;
  --ok: #1D6A3D; --ok-bg: #DDF2E4; --bad: #C21B2A; --bad-bg: #FDE4E6;
  --sombra: 0 1px 2px rgb(11 27 63 / .06), 0 4px 14px -8px rgb(11 27 63 / .18);
    color-scheme: light; }
  body.imprimiendo-informe > *:not(.modal-fondo), body.imprimiendo-informe .modal-fondo:not(:has(.modal-informe)) { display: none !important; }
  body.imprimiendo-informe, body.imprimiendo-informe .modal, body.imprimiendo-informe .modal-c { background: var(--surface); }
  body.imprimiendo-informe .modal-fondo { position: static; background: none; padding: 0; display: block; }
  body.imprimiendo-informe .modal { width: 100% !important; max-height: none; border: 0; box-shadow: none; overflow: visible; }
  body.imprimiendo-informe .modal-h, body.imprimiendo-informe .modal-a, body.imprimiendo-informe .no-imprimir { display: none !important; }
  body.imprimiendo-informe .modal-c { overflow: visible; padding: 0; }
  body.imprimiendo-informe .mes-num { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimiendo-informe .informe-cab, body.imprimiendo-informe .mes-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 14mm; }
}

/* Errores del sistema (admin) */
.error-detalle { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 8px; margin: 6px 0 0; }
/* Chats en celular: las herramientas del equipo en una sola línea, solo con íconos */
@media (max-width: 600px) {
  .chat-herr { padding: 6px 12px; flex-wrap: nowrap; overflow-x: auto; }
  .chat-herr .txt { display: none; }
  .chat-herr select { max-width: 140px; min-width: 112px; flex: none; } .chat-herr .pill { flex: none; }
  .composer { padding: 8px; gap: 6px; }
  .composer .modos .segmentos button { padding: 4px 9px; font-size: 12.5px; }
}
/* "¿Guardo esta respuesta para la próxima vez?" dentro del chat (lib/aprender.js) */
.oferta-guardar { margin: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--blue); display: flex; flex-direction: column; gap: 8px; }
.oferta-guardar .cita { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Celular angosto: el filtro de anuncios queda solo con el 📣 (así la barra de filtros entra en un renglón) */
@media (max-width: 420px) { .txt-anuncios { display: none; } }