:root {
  --ink: #141613; --ink-2: #1f221d; --ink-3: #2d312a; --ink-muted: #a6aba0;
  --paper: #f5f6f2; --surface: #ffffff; --wash: #eceee8; --wash-2: #e3e6df; --tinte: #fafbf8;
  --lateral: #eef0eb;
  --text: #141613; --muted: #5b6058; --subtle: #767b72;
  --line: #e1e4dc; --line-strong: #cdd2c7;
  --accent: #2e5e4e; --accent-deep: #23493d; --accent-soft: #e6efe9; --accent-line: #c4dacd; --mint: #9bd3b4;
  --danger: #9a3b26; --danger-deep: #7f2f1e; --danger-soft: #f6e7e2; --danger-line: #ebc9bf;
  --warn: #7a5512; --warn-soft: #fbf1d9; --warn-line: #ecd9a8; --warn-dot: #c08a1e;
  --info: #2f4f6f; --info-soft: #e7eef5;
  --wally-soft: #e5f4ec; --wally-text: #1f5a41; --wally-deep: #173a2f; --wally-sub: #3b5a4f;
  --on-accent: #fff; --on-danger: #fff; --borde-hover: #bfbcb0; --anillo: rgba(46, 94, 78, .16);
  --hover-suave: rgba(0, 0, 0, .06); --urgente: #fffcf3; --fondo-modal: rgba(18, 18, 16, .42);
  color-scheme: light;
  --radius-s: 6px; --radius: 8px; --radius-l: 12px;
  --shadow-1: 0 1px 2px rgba(18, 18, 16, .05);
  --shadow-2: 0 8px 24px -6px rgba(18, 18, 16, .18), 0 2px 6px rgba(18, 18, 16, .06);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-ancho: 232px;
  --fuente-datos: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fuente-wally: Fredoka, Geist, ui-sans-serif, system-ui, sans-serif;
}
/* Modo oscuro: sigue al sistema salvo que la persona elija claro u oscuro en el menú (data-tema en <html>).
   Solo en pantalla: al imprimir (el comprobante) siempre sale claro. */
@media screen and (prefers-color-scheme: dark) { 
:root:not([data-tema="claro"]) { 
  --ink: #e8ebe4; --ink-2: #d9ddd4; --ink-3: #c5cabf; --ink-muted: #5b6058;
  --paper: #121411; --surface: #1a1d19; --wash: #161915; --wash-2: #22261f; --tinte: #1e221c;
  --lateral: #161915;
  --text: #e8ebe4; --muted: #a3a99e; --subtle: #868c81;
  --line: #2b302a; --line-strong: #3b4138;
  --accent: #6fb596; --accent-deep: #8fd0b2; --accent-soft: #1d3329; --accent-line: #2f5242; --mint: #9bd3b4;
  --danger: #e08a74; --danger-deep: #f0a592; --danger-soft: #3a211b; --danger-line: #5a3027;
  --warn: #e3b55a; --warn-soft: #33290f; --warn-line: #54431b; --warn-dot: #d39b2c;
  --info: #8fb3d6; --info-soft: #1c2733;
  --wally-soft: #1b3127; --wally-text: #9bd3b4; --wally-deep: #cfeadb; --wally-sub: #9fc2b2;
  --on-accent: #0f1f18; --on-danger: #2a120c; --borde-hover: #4a5146; --anillo: rgba(111, 181, 150, .25);
  --hover-suave: rgba(255, 255, 255, .08); --urgente: #241f12; --fondo-modal: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  color-scheme: dark; }
:root:not([data-tema="claro"]) .acceso-marca, :root:not([data-tema="claro"]) .avatar.wally { --ink: #141613; --paper: #f5f6f2; }
:root:not([data-tema="claro"]) .icono-wally.oscuro .globo { fill: #9bd3b4; }
:root:not([data-tema="claro"]) .icono-wally.oscuro .tallo { stroke: #9bd3b4; }
:root:not([data-tema="claro"]) .icono-wally.oscuro .ojo { fill: #141613; }
:root:not([data-tema="claro"]) .boton-tema .a-oscuro { display: none; }
:root:not([data-tema="claro"]) .boton-tema .a-claro { display: inline-flex; }
:root:not([data-tema="claro"]) .icono-wally.oscuro .pupila, :root:not([data-tema="claro"]) .icono-wally.oscuro .antena { fill: #9bd3b4; } }
@media screen { 
:root[data-tema="oscuro"] { 
  --ink: #e8ebe4; --ink-2: #d9ddd4; --ink-3: #c5cabf; --ink-muted: #5b6058;
  --paper: #121411; --surface: #1a1d19; --wash: #161915; --wash-2: #22261f; --tinte: #1e221c;
  --lateral: #161915;
  --text: #e8ebe4; --muted: #a3a99e; --subtle: #868c81;
  --line: #2b302a; --line-strong: #3b4138;
  --accent: #6fb596; --accent-deep: #8fd0b2; --accent-soft: #1d3329; --accent-line: #2f5242; --mint: #9bd3b4;
  --danger: #e08a74; --danger-deep: #f0a592; --danger-soft: #3a211b; --danger-line: #5a3027;
  --warn: #e3b55a; --warn-soft: #33290f; --warn-line: #54431b; --warn-dot: #d39b2c;
  --info: #8fb3d6; --info-soft: #1c2733;
  --wally-soft: #1b3127; --wally-text: #9bd3b4; --wally-deep: #cfeadb; --wally-sub: #9fc2b2;
  --on-accent: #0f1f18; --on-danger: #2a120c; --borde-hover: #4a5146; --anillo: rgba(111, 181, 150, .25);
  --hover-suave: rgba(255, 255, 255, .08); --urgente: #241f12; --fondo-modal: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  color-scheme: dark; }
:root[data-tema="oscuro"] .acceso-marca, :root[data-tema="oscuro"] .avatar.wally { --ink: #141613; --paper: #f5f6f2; }
:root[data-tema="oscuro"] .icono-wally.oscuro .globo { fill: #9bd3b4; }
:root[data-tema="oscuro"] .icono-wally.oscuro .tallo { stroke: #9bd3b4; }
:root[data-tema="oscuro"] .icono-wally.oscuro .ojo { fill: #141613; }
:root[data-tema="oscuro"] .boton-tema .a-oscuro { display: none; }
:root[data-tema="oscuro"] .boton-tema .a-claro { display: inline-flex; }
:root[data-tema="oscuro"] .icono-wally.oscuro .pupila, :root[data-tema="oscuro"] .icono-wally.oscuro .antena { fill: #9bd3b4; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 14.5px/1.5 Geist, ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--accent); }
::selection { background: var(--mint); color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 14.5px; line-height: 1.35; letter-spacing: -.01em; }
p { margin: 0; }
.num, td.num, .dato { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fuente-datos); font-size: .92em; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 13px; }
.tenue { color: var(--subtle); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: var(--radius); }
.saltar:focus { top: 12px; color: var(--paper); }
svg.icono { width: 16px; height: 16px; flex: none; stroke-width: 1.85; }

/* ── Estructura ─────────────────────────────────────────── */
/* Menú lateral claro (como una libreta al costado) y el contenido sobre papel. En el celular, barra de arriba con la
   marca y barra de abajo con los destinos de todos los días. */
.marco { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-content: start; }
@media (min-width: 960px) { .marco { grid-template-columns: var(--nav-ancho) minmax(0, 1fr); } }
.lateral { background: var(--lateral); color: var(--text); border-right: 1px solid var(--line); }
@media (min-width: 960px) { .lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.lateral-interior { display: flex; flex-direction: column; min-height: 100%; padding: 12px 10px; gap: 2px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; color: var(--text); text-decoration: none; }
.marca:hover { color: var(--text); }
.marca-nombre { font: 600 16px/1.1 var(--fuente-wally); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Logo: el globo de Wally y "wally" en Fredoka. Al pasar el mouse, Wally parpadea. */
.logo-wally { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.logo-texto { font: 600 22px/1 var(--fuente-wally); letter-spacing: -.01em; padding-bottom: 2px; }
.logo-wally.claro { color: var(--paper); } .logo-wally.oscuro { color: var(--ink); }
.icono-wally { flex: none; overflow: visible; }
.icono-wally .ojos { transform-origin: 50% 52%; transform-box: view-box; }
a:hover .icono-wally .ojos, .icono-wally.parpadea .ojos { animation: parpadeo .32s var(--ease); }
@keyframes parpadeo { 45% { transform: scaleY(.12); } }

/* Negocio actual. Para LelliDev es un selector (como los espacios de trabajo de Notion) */
.negocio-actual { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius); min-width: 0; }
.negocio-actual .inicial { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-weight: 600; font-size: 12px; flex: none; }
.negocio-actual .inicial.lelli { background: var(--ink); }
.negocio-actual .que { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.negocio-actual strong { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.negocio-actual .estado-wally { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.estado-wally::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--accent-soft); }
.estado-wally.apagado::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.selector-negocio { position: relative; }
.selector-negocio > summary { list-style: none; cursor: pointer; }
.selector-negocio > summary::-webkit-details-marker { display: none; }
.selector-negocio > summary:hover .negocio-actual, .selector-negocio[open] > summary .negocio-actual { background: var(--wash-2); }
.selector-negocio > summary svg.icono { color: var(--subtle); width: 14px; height: 14px; }
.selector-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 60vh; overflow-y: auto; }
.selector-lista form { display: contents; }
.selector-lista .opcion-negocio { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-s);
  font-size: 13.5px; color: var(--text); cursor: pointer; text-decoration: none; }
.selector-lista .opcion-negocio:hover { background: var(--wash); }
.selector-lista .opcion-negocio:focus-visible { box-shadow: var(--focus); }
.selector-lista .opcion-negocio[aria-current="true"] { font-weight: 600; }
.selector-lista .opcion-negocio .tenue { margin-left: auto; font-size: 12px; }
.selector-lista hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Búsqueda: ⌘K la enfoca (lo agrega el script del panel) */
.buscador { position: relative; margin: 6px 0 10px; }
.buscador svg.icono { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--subtle); width: 15px; height: 15px; pointer-events: none; }
.buscador input { min-height: 32px; padding: 5px 40px 5px 30px; font-size: 13.5px; border-color: var(--line); background: var(--surface); }
.buscador .tecla { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (pointer: coarse) { .buscador .tecla { display: none; } }

.nav-grupo { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.nav-titulo { font-size: 11.5px; font-weight: 500; color: var(--subtle); padding: 8px 8px 4px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius); color: var(--muted);
  text-decoration: none; font-size: 13.5px; transition: background-color .15s var(--ease), color .15s var(--ease); }
.nav-item svg.icono { color: var(--subtle); width: 15px; height: 15px; transition: color .15s var(--ease); }
.nav-item:hover { background: var(--wash-2); color: var(--text); }
.nav-item.activa { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.nav-item.activa svg.icono { color: var(--accent); }
.contador { margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn);
  font: 600 11px/1 var(--fuente-datos); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.contador.suave { background: transparent; color: var(--subtle); }
.lateral-pie { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 1px; }
.lateral button.nav-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: var(--radius); color: var(--muted); font-size: 13.5px; cursor: pointer; width: 100%; }
.lateral button.nav-item:hover { background: var(--wash-2); color: var(--text); }
.lateral button.nav-item:focus-visible { box-shadow: var(--focus); }
.lateral-pie form { display: contents; }
.firma-lellidev { font-size: 12px; color: var(--subtle); padding: 8px 8px 2px; }
.firma-lellidev a { color: var(--muted); font-weight: 500; }
.firma-lellidev a:hover { color: var(--accent); }
/* Logo de LelliDev, como en lellidev.com: Space Grotesk y el punto verde */
.firma-lellidev .logo-lellidev { font: 500 1.15em/1 "Space Grotesk", Geist, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; }
.firma-lellidev .logo-lellidev .punto { color: var(--accent); }

/* LelliDev viendo un negocio: franja fina arriba del contenido */
.franja-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 16px; font-size: 13px; background: var(--ink); color: var(--paper);
  margin: -24px -16px 20px; }
@media (min-width: 720px) { .franja-admin { margin: -32px -32px 24px; padding: 7px 32px; } }
.contenido.pantalla .franja-admin { margin: 0; }
.franja-admin button { display: inline-flex; align-items: center; gap: 4px; }
.franja-admin button svg.icono { width: 14px; height: 14px; }
.franja-admin form { margin-left: auto; }
.franja-admin button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.franja-admin button:focus-visible { box-shadow: 0 0 0 2px var(--mint); border-radius: 4px; }

/* Barra de arriba en pantallas chicas */
.barra-movil { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--lateral); border-bottom: 1px solid var(--line); }
.barra-movil .marca { padding: 0; min-width: 0; }
@media (min-width: 960px) { .barra-movil, .barra-abajo { display: none !important; } }
@media (max-width: 959px) {
  .lateral { position: sticky; top: 0; z-index: 30; border-right: 0; }
  .lateral > .lateral-interior { display: none; }
}
/* Barra de abajo en el celular: los destinos de todos los días a un toque, y "Más" abre el menú completo (sin JavaScript) */
.barra-abajo { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.barra-abajo > a, .barra-abajo > details > summary { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center;
  font-size: 11px; color: var(--subtle); text-decoration: none; position: relative; border-radius: var(--radius); list-style: none; cursor: pointer; }
.barra-abajo > details > summary::-webkit-details-marker { display: none; }
.barra-abajo svg.icono { width: 21px; height: 21px; }
.barra-abajo > a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.barra-abajo .contador { position: absolute; top: 2px; left: calc(50% + 4px); height: 17px; min-width: 17px; padding: 0 4px; background: var(--warn-dot); color: #fff; }
.barra-abajo > details[open] > summary { color: var(--accent); }
.barra-abajo > details > .lateral-interior { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 140px);
  overflow-y: auto; background: var(--lateral); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); padding: 12px 12px 16px; min-height: 0; }
.barra-abajo .lateral-interior .marca, .barra-abajo .lateral-interior .buscador { display: none; }
@media (max-width: 959px) { .contenido:not(.pantalla) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

.contenido { min-width: 0; padding: 24px 16px 72px; }
@media (min-width: 720px) { .contenido { padding: 32px 32px 80px; } }
.contenido-interior { max-width: 1180px; margin: 0 auto; }
.contenido-interior.angosto { max-width: 760px; }

/* Ajustes: navegación propia al costado (arriba y con desplazamiento en el celular) */
.con-ajustes { display: grid; gap: 20px 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .con-ajustes { grid-template-columns: 200px minmax(0, 1fr); } .nav-ajustes { position: sticky; top: 24px; } }
.nav-ajustes { display: flex; flex-direction: column; gap: 1px; }
.nav-ajustes .nav-titulo { padding-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.boton-tema .a-claro { display: none; }
@media (max-width: 1099px) {
  .nav-ajustes { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; margin: 0 -4px; }
  .nav-ajustes .nav-titulo { display: contents; }
  .nav-ajustes .nav-titulo > span { display: none; }
  .nav-ajustes .boton-tema { order: 99; margin-left: auto; }
  .nav-ajustes .nav-item { white-space: nowrap; }
}
.ajustes-cuerpo { min-width: 0; }
.ajustes-cuerpo.angosto { max-width: 760px; }

/* Encabezado de página: migas, título, descripción y acciones */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.encabezado-texto { min-width: 0; flex: 1 1 320px; }
.encabezado-texto .sub { margin-top: 6px; font-size: 14px; max-width: 70ch; }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.migas a { color: var(--muted); text-decoration: none; }
.migas a:hover { color: var(--text); text-decoration: underline; }
.migas svg.icono { width: 14px; height: 14px; color: var(--subtle); }

/* ── Botones ────────────────────────────────────────────── */
.btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-borde: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 500;
  line-height: 20px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--btn-borde); background: var(--btn-bg);
  color: var(--btn-fg); cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.btn:hover { --btn-bg: var(--wash); color: var(--btn-fg); }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primario { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-borde: var(--accent); box-shadow: var(--shadow-1); }
.btn-primario:hover { --btn-bg: var(--accent-deep); --btn-borde: var(--accent-deep); }
.btn-oscuro { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-borde: var(--ink); }
.btn-oscuro:hover { --btn-bg: var(--ink-3); --btn-borde: var(--ink-3); }
.btn-peligro { --btn-fg: var(--danger); --btn-borde: var(--danger-line); }
.btn-peligro:hover { --btn-bg: var(--danger-soft); --btn-borde: var(--danger); }
.btn-peligro-lleno { --btn-bg: var(--danger); --btn-fg: var(--on-danger); --btn-borde: var(--danger); }
.btn-peligro-lleno:hover { --btn-bg: var(--danger-deep); --btn-borde: var(--danger-deep); }
.btn-fantasma { --btn-borde: transparent; --btn-bg: transparent; color: var(--muted); }
.btn-fantasma:hover { --btn-bg: var(--wash); color: var(--text); }
.btn-chico { font-size: 13px; padding: 4px 10px; gap: 6px; }
.btn-chico svg.icono { width: 14px; height: 14px; }
.btn-icono { padding: 7px; }
.btn.cargando { color: transparent !important; position: relative; pointer-events: none; }
.btn.cargando::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--btn-fg);
  border-right-color: transparent; animation: girar .6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grupo-botones > form { display: contents; }

/* Control segmentado: vistas y filtros */
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--wash); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; overflow-x: auto; }
.segmentado a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); }
.segmentado a:hover { color: var(--text); }
.segmentado a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.segmentado .contador { margin-left: 2px; height: 18px; min-width: 18px; font-size: 11px; background: var(--wash-2); color: var(--muted); }
.segmentado a[aria-current="page"] .contador { background: var(--accent-soft); color: var(--accent-deep); }
.segmentado .contador.urgente { background: var(--warn-soft); color: var(--warn); }

.herramientas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.herramientas form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Insignias de estado ────────────────────────────────── */
.insignia { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 18px; padding: 1px 8px;
  border-radius: 999px; background: var(--wash); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.insignia.sin-punto::before { display: none; }
.insignia.ok { background: var(--accent-soft); color: var(--accent-deep); }
.insignia.alerta { background: var(--danger-soft); color: var(--danger); }
.insignia.atencion { background: var(--warn-soft); color: var(--warn); }
.insignia.atencion::before { background: var(--warn-dot); opacity: 1; }
.insignia.info { background: var(--info-soft); color: var(--info); }
/* Lo hizo Wally: menta */
.insignia.wally { background: var(--wally-soft); color: var(--wally-text); }
.insignia.wally::before { background: var(--mint); opacity: 1; box-shadow: 0 0 0 1px var(--wally-text) inset; }
.insignia.tachada { text-decoration: line-through; }
.insignias { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Superficies ────────────────────────────────────────── */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.tarjeta-cuerpo { padding: 20px; }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.tarjeta-cabecera .sub { margin-top: 2px; }
.tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px;
  border-top: 1px solid var(--line); background: var(--tinte); border-radius: 0 0 var(--radius-l) var(--radius-l); }
.tarjeta-pie .sub { flex: 1 1 240px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila-l { display: flex; flex-direction: column; gap: 32px; }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.columnas { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) { .columnas { grid-template-columns: minmax(0, 1fr) 340px; } .columnas > .lado { position: sticky; top: 24px; } }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 12px; }
.titulo-seccion .sub { font-size: 13px; }

/* Lista de datos (detalle de pedido, cliente) */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Indicadores */
.indicadores { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Las líneas entre indicadores son sombras: las que caen sobre el borde exterior quedan recortadas */
.indicador { padding: 16px 18px; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.indicador .etiqueta-ind { font-size: 13px; color: var(--muted); }
.indicador .dato { font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin-top: 4px; }
.indicador .detalle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.variacion { font-weight: 500; font-variant-numeric: tabular-nums; }
.variacion.sube { color: var(--wally-text); }
.variacion.baja { color: var(--warn); }
.variacion .tenue { font-weight: 400; }

/* Filas de lista (inicio, ficha del cliente): avatar o dato, texto y un estado a la derecha */
.filas { list-style: none; margin: 0; padding: 0; }
.filas li + li { border-top: 1px solid var(--line); }
.filas a, .filas .fila-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 20px;
  color: inherit; text-decoration: none; transition: background-color .12s var(--ease); }
.filas a:hover { background: var(--tinte); }
.filas a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
.filas .avatar { width: 32px; height: 32px; font-size: 12px; }
.fila-texto { display: flex; flex-direction: column; min-width: 0; }
.fila-texto strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hora-fila { color: var(--muted); font-size: 13px; min-width: 42px; }
.texto-espera { color: var(--warn); }
.pasos-puesta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pasos-puesta li { display: flex; gap: 10px; align-items: center; }
.pasos-puesta .marca-paso { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.pasos-puesta li.hecho .marca-paso { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pasos-puesta li.hecho .marca-paso svg.icono { width: 11px; height: 11px; stroke-width: 3; }
.pasos-puesta li.hecho > span:last-child { color: var(--subtle); text-decoration: line-through; }

/* Barra de guardado: queda pegada abajo mientras se edita un formulario largo */
.barra-guardar { position: sticky; bottom: 0; z-index: 5; }
@media (max-width: 959px) { .barra-guardar { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } }

/* Automatizaciones: una fila por regla, con su estado */
.reglas { list-style: none; margin: 0; padding: 0; }
.regla { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 20px; }
.regla + .regla { border-top: 1px solid var(--line); }
.regla-icono { width: 34px; height: 34px; border-radius: 9px; background: var(--wash); color: var(--subtle); display: grid; place-items: center; }
.regla-icono.prendida { background: var(--wally-soft); color: var(--wally-text); }
.regla-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regla-texto strong { font-weight: 500; }
.regla-hace { color: var(--muted); font-weight: 400; }
.regla-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.regla-form .btn { margin-top: 27px; }
.regla-form .campo { flex: 0 1 auto; }
.regla-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 599px) { .regla { grid-template-columns: auto minmax(0, 1fr); } .regla-estado { grid-column: 2; flex-direction: row; align-items: center; } }

/* ── Tablas ─────────────────────────────────────────────── */
.tabla-envoltura { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--tinte); padding-top: 9px; padding-bottom: 9px; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr { transition: background-color .12s var(--ease); }
table.interactiva tbody tr:hover { background: var(--tinte); }
/* Filas que llevan al detalle: se puede tocar en cualquier parte de la fila (el link de la primera celda sigue para teclado) */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--accent-soft) !important; }
tr[data-href]:hover .celda-principal { color: var(--accent-deep); }
tr[data-href]:active { background: var(--accent-line) !important; }
td.chevron { width: 1%; padding-left: 0; color: var(--subtle); text-align: right; }
tr[data-href]:hover td.chevron { color: var(--accent); }
tr[data-href] td.chevron svg.icono { transition: transform .15s var(--ease); }
tr[data-href]:hover td.chevron svg.icono { transform: translateX(2px); }
@media (max-width: 719px) { td.chevron { display: none !important; } }
th.num, td.num { text-align: right; white-space: nowrap; }
td.acciones-fila { text-align: right; white-space: nowrap; width: 1%; }
td.acciones-fila .grupo-botones { justify-content: flex-end; flex-wrap: nowrap; }
tr.grupo-fila th { background: var(--wash); font-size: 13px; font-weight: 600; color: var(--text); padding-top: 8px; padding-bottom: 8px; }
tr.grupo-fila th a { color: inherit; text-decoration: none; }
tr.total td { font-weight: 600; background: var(--tinte); }
tr.apagada td { color: var(--subtle); }
.celda-principal { font-weight: 500; color: var(--text); text-decoration: none; }
a.celda-principal:hover { color: var(--accent); text-decoration: underline; }
.celda-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.recorte { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* En el celular, cada fila es una tarjeta con la etiqueta de cada dato */
@media (max-width: 719px) {
  table.adaptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.adaptable, table.adaptable tbody, table.adaptable tr, table.adaptable td { display: block; width: 100%; }
  table.adaptable tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.adaptable tbody tr:last-child { border-bottom: 0; }
  table.adaptable td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; text-align: right; }
  table.adaptable td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
  table.adaptable td.principal { display: block; text-align: left; padding-bottom: 6px; }
  table.adaptable td.acciones-fila { width: 100%; padding-top: 10px; display: block; }
  table.adaptable td.acciones-fila .grupo-botones { justify-content: flex-start; flex-wrap: wrap; }
  table.adaptable tr.grupo-fila { padding: 0; } table.adaptable tr.grupo-fila th { display: block; }
  table.adaptable td.vacia { display: none; }
}

/* ── Formularios ────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .etiqueta-campo { font-size: 13.5px; font-weight: 500; color: var(--text); }
.campo .ayuda { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.campos { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campos.dos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.formulario { display: flex; flex-direction: column; gap: 18px; }
input, select, textarea { font: inherit; font-size: 14.5px; color: var(--text); width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); min-height: 38px; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--borde-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--anillo); }
input:disabled, select:disabled, textarea:disabled { background: var(--wash); color: var(--muted); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f5e58' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--accent); flex: none; cursor: pointer; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }
.control-corto { max-width: 200px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.opcion .sub { display: block; margin-top: 1px; }
.opciones { display: flex; flex-direction: column; gap: 12px; }
.opciones.en-linea { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ficha-opcion { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13.5px; cursor: pointer; background: var(--surface); }
.ficha-opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.ficha-opcion input { margin: 0; }
/* Ajustes: descripción a la izquierda, campos a la derecha */
.ajuste { display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); padding: 24px 0; border-top: 1px solid var(--line); }
.ajuste:first-of-type { border-top: 0; padding-top: 0; }
.ajuste:last-of-type { padding-bottom: 0; }
@media (min-width: 900px) { .ajuste { grid-template-columns: 280px minmax(0, 1fr); } }
.ajuste-texto h2 { font-size: 15.5px; }
.ajuste-texto p { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.ajuste-texto p + p { margin-top: 8px; }
.desplegable { border-top: 1px solid var(--line); }
.desplegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-weight: 500; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease); }
.desplegable[open] > summary::after { transform: rotate(-135deg); }
.desplegable > summary:hover { background: var(--tinte); }
.desplegable-cuerpo { padding: 4px 20px 20px; }
details.tarjeta.desplegable { border-top: 1px solid var(--line); }
details.tarjeta.desplegable > summary { border-radius: var(--radius-l); }

/* ── Avisos ─────────────────────────────────────────────── */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent-deep); font-size: 14px; }
.aviso svg.icono { margin-top: 2px; }
.aviso a { color: inherit; font-weight: 500; }
.aviso .aviso-texto { flex: 1; min-width: 0; }
.aviso.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.aviso.atencion { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.aviso.neutro { background: var(--wash); color: var(--text); border-color: var(--line); }
.avisos-pagina { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.toast { position: fixed; z-index: 60; right: 16px; bottom: 16px; left: 16px; margin: 0 auto; max-width: 420px; box-shadow: var(--shadow-2);
  animation: entrar .28s var(--ease); }
@media (min-width: 720px) { .toast { left: auto; right: 24px; bottom: 24px; } }
.toast.saliendo { animation: salir .2s var(--ease) forwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
@keyframes salir { to { opacity: 0; transform: translateY(8px); } }
.toast button { all: unset; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: inherit; opacity: .7; }
.toast button:hover { opacity: 1; background: var(--hover-suave); }
.toast.en-vivo { align-items: center; }
.toast.en-vivo a { margin-left: 6px; }
.toast.en-vivo button { font-size: 18px; line-height: 1; }

/* Estado vacío */
.vacio { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vacio-icono { width: 44px; height: 44px; border-radius: 12px; background: var(--wash); display: grid; place-items: center; color: var(--muted); margin-bottom: 6px; }
.vacio-icono svg.icono { width: 20px; height: 20px; }
.vacio h3 { font-size: 17px; line-height: 1.3; }
.vacio-icono.marca { background: transparent; width: 64px; height: 64px; margin-bottom: 2px; }
.vacio p { color: var(--muted); font-size: 14px; max-width: 46ch; }
.vacio .grupo-botones { margin-top: 10px; justify-content: center; }

/* Barra de progreso */
.barra { height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barra.atencion > span { background: var(--warn-dot); } .barra.alerta > span { background: var(--danger); }

/* ── Conversaciones ─────────────────────────────────────── */
.bandeja { list-style: none; margin: 0; padding: 0; }
.bandeja li + li { border-top: 1px solid var(--line); }
/* Solo el enlace que ocupa la fila entera: un botón adentro de una fila (Editar en Conocimiento) queda como botón */
.bandeja > li > a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 18px; text-decoration: none; color: inherit;
  transition: background-color .12s var(--ease); }
.bandeja > li > a:hover { background: var(--tinte); }
.bandeja > li > a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
.bandeja .avatar { grid-row: span 2; }
.bandeja .nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja .hora { font-size: 12.5px; color: var(--muted); white-space: nowrap; text-align: right; }
.bandeja .vista-previa { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja .estado { grid-column: 3; justify-self: end; }
.bandeja > li.urgente > a { background: var(--urgente); }
.bandeja > li.urgente > a:hover { background: var(--warn-soft); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--wash-2); color: var(--muted); display: grid; place-items: center;
  font-weight: 600; font-size: 14px; letter-spacing: -.01em; flex: none; }
.avatar.urgente { background: var(--warn-soft); color: var(--warn); }
.avatar.grande { width: 48px; height: 48px; font-size: 16px; }

.conversacion { display: flex; flex-direction: column; min-height: 0; }
.conversacion-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); }
.mensajes { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--wash); max-height: min(64vh, 720px); min-height: 280px;
  overflow-y: auto; overscroll-behavior: contain; }
.separador-dia { align-self: center; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; margin: 8px 0; }
.burbuja { max-width: min(78%, 560px); padding: 8px 12px 6px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px;
  box-shadow: var(--shadow-1); }
.burbuja .meta { display: flex; gap: 6px; justify-content: flex-end; font-size: 11.5px; margin-top: 2px; opacity: .72; white-space: nowrap; }
.burbuja.cliente { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.burbuja.bot { align-self: flex-end; background: var(--wally-soft); color: var(--wally-deep); border-bottom-right-radius: 4px; }
.burbuja.equipo { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.burbuja.sistema { align-self: center; background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; text-align: center; }
.burbuja.nueva { animation: entrar .3s var(--ease); }
/* Wally escribiendo: los tres puntos de la web, uno tras otro */
.escribiendo { align-self: flex-end; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 12px; border-bottom-right-radius: 4px;
  background: var(--accent-soft); box-shadow: var(--shadow-1); animation: entrar .25s var(--ease); }
.escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: rebote 1s infinite; }
.escribiendo span:nth-child(2) { animation-delay: .15s; } .escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Avatar de Wally en el encabezado de la conversación */
.avatar.wally { background: var(--ink); }
.redactor { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.redactor textarea { min-height: 44px; max-height: 240px; resize: none; }
.redactor .pie-redactor { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
@media (pointer: coarse) { .atajo { display: none; } }
.tecla { font: 500 11.5px/1 Geist, sans-serif; padding: 2px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); }

/* ── Pantalla de chats (como WhatsApp Web) ──────────────── */
/* El alto es del main y no del interior: así la franja de LelliDev, si está, no empuja el chat fuera de la pantalla */
.contenido.pantalla { padding: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.contenido.pantalla > .contenido-interior { max-width: none; width: 100%; flex: 1; min-height: 0; }
@media (max-width: 959px) { .contenido.pantalla { height: calc(100vh - 114px); height: calc(100dvh - 114px - env(safe-area-inset-bottom, 0px)); } }
.wa { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 100%; background: var(--surface); }
.wa.solo { grid-template-columns: minmax(0, 1fr); }
.wa-ficha { display: none; }
@media (min-width: 1280px) {
  .wa.con-ficha { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 280px; }
  .wa-ficha { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-left: 1px solid var(--line); background: var(--surface);
    overflow-y: auto; min-height: 0; font-size: 13.5px; }
  .wa-ficha .datos { font-size: 13.5px; }
  .wa-ficha .btn { align-self: flex-start; }
}
.nota-equipo { background: var(--wash); border-radius: var(--radius); padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.wa-lista-cabecera { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.wa-lista-cabecera h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.wa-lista-cabecera .segmentado { align-self: stretch; }
.wa-lista-cabecera .segmentado a { flex: 1; justify-content: center; padding: 5px 8px; }
.wa-lista-items { flex: 1; min-height: 0; overflow-y: auto; }
.wa-lista-items .bandeja > li > a { padding: 12px 16px; }
.bandeja > li.activa > a, .bandeja > li.activa > a:hover { background: var(--accent-soft); }
.bandeja li.activa .nombre { color: var(--accent-deep); }
.wa-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wash); }
.wa-chat-cabecera { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); }
.wa-chat-cabecera .quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-chat-cabecera .quien strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-cabecera .quien .sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-volver { display: none; }
.wa-franja { margin: 0; padding: 8px 16px; font-size: 13px; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--warn-line); }
.wa-chat .mensajes { flex: 1; min-height: 0; max-height: none; padding: 20px clamp(16px, 4vw, 56px); }
.wa-chat .redactor { background: var(--surface); }
.wa-chat .redactor textarea { min-height: 42px; }
.wa-vacio { margin: auto; max-width: 380px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wa-vacio h2 { font-size: 19px; line-height: 1.25; margin-top: 6px; }
.wa-vacio .btn { margin-top: 6px; }
.avatar.wally { display: grid; place-items: center; background: var(--ink); }
@media (max-width: 899px) {
  .wa { grid-template-columns: minmax(0, 1fr); }
  .wa[data-abierta="si"] .wa-lista, .wa[data-abierta="no"] .wa-chat { display: none; }
  .wa-volver { display: inline-flex; margin-left: -6px; }
  .wa-chat-cabecera { gap: 10px; padding: 8px 12px; }
  .solo-ancho { display: none; }
}
/* Chat de prueba: el administrador es el cliente (a la derecha) y Wally responde a la izquierda */
.burbuja.yo { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.burbuja.wally { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.escribiendo.izquierda { align-self: flex-start; background: var(--surface); border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }
.paso-prueba { align-self: flex-start; margin: 0 0 0 4px; padding: 2px 0 2px 10px; border-left: 1px solid var(--accent); font-size: 12.5px;
  color: var(--accent-deep); max-width: 80%; }
.paso-prueba span { color: var(--muted); }
.paso-prueba.error { color: var(--danger); border-left-color: var(--danger); }
.qr-pago { margin: 10px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: normal; }
.qr-pago svg { width: 200px; height: 200px; border-radius: 8px; border: 1px solid var(--line); }
.qr-pago figcaption { font-size: 12.5px; color: var(--muted); }
.prueba-inicio { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }

/* ── Agenda ─────────────────────────────────────────────── */
.navegador-fecha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.navegador-fecha h2 { margin: 0 6px; font-size: 17px; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden; }
.calendario-scroll { overflow-x: auto; border-radius: var(--radius-l); }
.calendario .celda { background: var(--surface); padding: 8px; min-height: 120px; font-size: 13px; display: flex; flex-direction: column; gap: 4px;
  color: inherit; text-decoration: none; min-width: 0; }
.calendario .celda-dia { font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.calendario .celda.hoy .celda-dia span.n { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 7px; }
.calendario .celda.fuera { background: var(--tinte); color: var(--subtle); }
.calendario .turno { display: block; padding: 4px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--wally-deep); text-decoration: none; font-size: 12.5px;
  line-height: 1.35; overflow: hidden; }
.calendario .turno:hover { background: var(--accent-line); }
.calendario .turno strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.calendario .turno .celda-sub { font-size: 11.5px; color: var(--wally-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario .turno.cancelada { background: var(--wash); color: var(--subtle); text-decoration: line-through; }
.calendario .turno.ausente { background: var(--danger-soft); color: var(--danger); }
.calendario .cabecera { background: var(--tinte); font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px; }
.calendario.mes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario.mes .celda { min-height: 92px; }
.calendario.mes a.celda:hover { background: var(--tinte); }
.calendario.mes .cantidad { margin-top: auto; }
@media (max-width: 599px) { .calendario.mes .celda { min-height: 60px; padding: 6px; } .calendario.mes .ancho { display: none; } }
.hora-turno { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Día de la agenda en columnas por profesional (solo en pantallas anchas; en el celular queda la lista) */
.grilla-dia-scroll { display: none; }
@media (min-width: 720px) { .grilla-dia-scroll { display: block; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); } }
.grilla-dia { display: grid; min-width: min-content; }
.grilla-cabecera { padding: 10px 12px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 2; }
.grilla-cabecera:first-child { border-left: 0; }
.grilla-cabecera .tenue { font-weight: 400; font-size: 12.5px; }
.grilla-horas { position: relative; }
.grilla-horas span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--subtle); background: var(--surface); }
.grilla-horas span:first-child { transform: none; top: 2px !important; }
.grilla-columna { position: relative; border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-repeat: repeat-y; }
.grilla-atiende { position: absolute; left: 0; right: 0; background: var(--tinte); z-index: 0; }
.grilla-columna { background-color: var(--wash); }
.bloque-turno { position: absolute; left: 5px; right: 5px; z-index: 1; border-radius: 7px; padding: 4px 8px; font-size: 12px; line-height: 1.3; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.bloque-turno strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloque-turno span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloque-turno.wally { background: var(--wally-soft); box-shadow: inset 3px 0 0 var(--mint); }
.bloque-turno.equipo { background: var(--wash-2); box-shadow: inset 3px 0 0 var(--ink-3); }
.bloque-turno.sena { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn-dot); }
.bloque-turno.ausente { opacity: .6; text-decoration: line-through; }
.bloque-turno:hover { filter: brightness(.97); }
.grilla-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 3; }
.grilla-ahora::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
tr:target { background: var(--warn-soft); }

/* ── Gráficos de métricas ───────────────────────────────── */
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: 8px; border-bottom: 1px solid var(--line-strong); position: relative; }
.grafico .columna { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; cursor: default; border-radius: 4px 4px 0 0; }
.grafico .columna:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.grafico .barra-dia { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 0; transition: background-color .12s var(--ease); }
.grafico .columna.vacia .barra-dia { background: var(--line); height: 2px !important; }
.grafico .pila-dia { display: flex; flex-direction: column-reverse; width: 100%; }
.grafico .pila-dia .barra-dia { border-radius: 0; }
.grafico .pila-dia .barra-dia:last-child { border-radius: 3px 3px 0 0; }
.grafico .barra-dia.equipo { background: var(--warn-dot); }
.grafico .columna:hover .barra-dia.equipo { background: var(--warn); }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.leyenda i.equipo { background: var(--warn-dot); }
.grafico .columna:hover .barra-dia, .grafico .columna.activa .barra-dia { background: var(--accent-deep); }
.grafico .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper);
  font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; pointer-events: none; display: none; box-shadow: var(--shadow-2); }
.grafico .columna:hover .tip, .grafico .columna:focus .tip, .grafico .columna.activa .tip { display: block; }
.eje { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
table.calor { font-size: 12px; }
table.calor th, table.calor td { padding: 4px; text-align: center; min-width: 28px; border-bottom: 2px solid var(--surface); border-right: 2px solid var(--surface); }
table.calor thead th { background: transparent; font-size: 11.5px; }
table.calor tbody th { background: transparent; font-weight: 500; color: var(--muted); text-align: left; }
table.calor td { border-radius: 4px; font-variant-numeric: tabular-nums; }
.embudo-paso + .embudo-paso { margin-top: 14px; }
.embudo-paso .entre { font-size: 14px; margin-bottom: 6px; }

/* ── Páginas sin sesión ─────────────────────────────────── */
/* Mitad de marca (tinta, la mascota con su resplandor verde, el lema) y mitad de formulario */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .acceso { grid-template-columns: minmax(380px, 5fr) 6fr; } }
@media (max-width: 899px) { .acceso { align-content: start; } }
.acceso-marca { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; display: flex; flex-direction: column;
  gap: 20px; padding: 24px; }
.acceso-marca .marca { padding: 0; }
.acceso-mascota { display: none; position: relative; align-self: center; margin: auto 0 8px; }
.acceso-mascota svg { position: relative; display: block; width: clamp(160px, 18vw, 220px); height: auto; animation: flotar 6s ease-in-out infinite; }
.acceso-mascota .resplandor { position: absolute; inset: -40px; border-radius: 50%; background: rgba(46, 94, 78, .45); filter: blur(48px); }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.acceso-lema { display: none; font: 600 30px/1.15 var(--fuente-wally); letter-spacing: -.01em; text-wrap: balance; max-width: 16ch; }
.acceso-ver-mas { display: none; align-self: flex-start; color: var(--mint); font-weight: 500; text-decoration: none; font-size: 15px;
  border-bottom: 1px solid rgba(155, 211, 180, .4); padding-bottom: 2px; }
.acceso-ver-mas:hover { border-bottom-color: var(--mint); }
.acceso-nuevo { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; }
.acceso-nuevo a { color: var(--accent); font-weight: 500; }
.acceso-marca .firma-lellidev { padding: 0; font-size: 13px; color: var(--ink-muted); }
.acceso-marca .firma-lellidev .logo-lellidev { color: var(--paper); }
.acceso-marca .firma-lellidev .logo-lellidev .punto { color: var(--mint); }
@media (min-width: 900px) {
  .acceso-marca { padding: 40px 48px; }
  .acceso-mascota, .acceso-lema, .acceso-ver-mas { display: block; }
  .acceso-lema { margin-top: auto; }
}
.acceso-contenido { display: grid; place-items: center; padding: 40px 16px; }
.acceso-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.acceso-caja h1 { font-size: 26px; }
.acceso-caja > .sub { margin-bottom: 18px; font-size: 14px; }

pre.prompt { white-space: pre-wrap; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; background: var(--wash); padding: 16px; border-radius: var(--radius);
  max-height: 480px; overflow: auto; margin: 0; }
.pin { font: 600 32px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .18em; padding: 16px 20px; background: var(--wash); border-radius: var(--radius);
  display: inline-block; }
ol.pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Diálogo de confirmación (lo arma el script del panel) */
dialog.confirmar { border: 0; padding: 0; border-radius: var(--radius-l); box-shadow: var(--shadow-2); max-width: min(420px, calc(100vw - 32px)); width: 100%;
  color: var(--text); }
dialog.confirmar::backdrop { background: var(--fondo-modal); }
dialog.confirmar[open] { animation: entrar .2s var(--ease); }
dialog.confirmar .tarjeta-cuerpo { display: flex; flex-direction: column; gap: 8px; }
dialog.confirmar .tarjeta-pie { justify-content: flex-end; }

/* Comprobante de pago: al imprimir sale solo el comprobante, sin la navegación del panel */
.comprobante header h2 { font-size: 20px; }
.comprobante table { width: 100%; }
@media print {
  .lateral, .barra-abajo, .franja-admin, .migas, .encabezado-acciones, .toast, .saltar { display: none !important; }
  .marco { display: block; }
  .contenido { padding: 0; }
  body { background: #fff; }
  .comprobante { border: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }