/* ══════════════════════════════════════════════════════════════════
   Grupo La Habana · CRM
   Sistema visual: superficie clara, mucho aire, sombras de una sola
   capa suave y tipografía de interfaz (Inter / SF). El color NO lo
   pone el panel: lo pone el negocio que se esté mirando —cada uno
   trae el suyo y su logotipo—, y entra con cuentagotas, en acentos
   y cabeceras, nunca como fondo entero.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --fondo:#F7F6F3;          /* hueso cálido, no gris azulado */
  --panel:#FFFFFF;
  --panel-2:#F6F5F2;
  --hover:#F9F8F6;
  --linea:#E9E6E0;
  --linea-suave:#F1EFEA;

  --texto:#17181B;
  --texto-2:#5F6169;
  --texto-3:#96979E;
  --tinta:#17181B;          /* botón principal y chip activo: negro de tinta */

  /* Lo pisa cada negocio (ver [data-neg]) */
  --marca:#28313F;
  --marca-suave:#EEF0F4;
  --marca-txt:#FFFFFF;

  --lounge:#B07E2B;
  --hemingway:#6E5B3A;
  --kohala:#30493F;
  --coral:#EE7265;

  --ok:#0B8F5E;      --ok-bg:#E7F6EF;
  --aviso:#B5710A;   --aviso-bg:#FDF3E2;
  --malo:#C5372C;    --malo-bg:#FCEDEB;
  --neutro:#5A6575;  --neutro-bg:#F1F3F7;

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

  --r:16px; --r2:12px; --r3:9px;
  --sombra:0 1px 2px rgba(23,24,27,.04), 0 1px 1px rgba(23,24,27,.03);
  --sombra-media:0 1px 2px rgba(23,24,27,.06), 0 8px 20px -12px rgba(23,24,27,.16);
  --sombra-alta:0 16px 44px -12px rgba(23,24,27,.24);
  --barra:222px;
}

[data-neg="lounge"]    { --marca:#B07E2B; --marca-suave:#FBF4E7 }
[data-neg="hemingway"] { --marca:#6E5B3A; --marca-suave:#F4F1EB }
[data-neg="kohala"]    { --marca:#30493F; --marca-suave:#E9F0EB }

/* Modo oscuro — el gris muy oscuro de macOS, no negro puro */
:root[data-tema="noche"]{
  --fondo:#0C0E12;
  --panel:#15181E;
  --panel-2:#1A1E25;
  --hover:#1E222A;
  --linea:#252A33;
  --linea-suave:#1E222A;
  --texto:#F2F4F7;
  --texto-2:#A2AAB8;
  --texto-3:#79818F;
  --marca:#C9D1DC; --marca-suave:#1E222A; --marca-txt:#0C0E12;
  --ok:#3DD08C;     --ok-bg:#12291F;
  --aviso:#E7A93F;  --aviso-bg:#2A2113;
  --malo:#F07168;   --malo-bg:#2C1917;
  --neutro:#A2AAB8; --neutro-bg:#1E222A;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sombra-alta:0 20px 50px -16px rgba(0,0,0,.75);
}
:root[data-tema="noche"]{ --lounge:#E0B45F; --hemingway:#A98C5C; --kohala:#5FAF85; --coral:#F08A7E }
:root[data-tema="noche"][data-neg="lounge"]    { --marca:#E3B96B; --marca-suave:#231D12; --marca-txt:#12100A }
:root[data-tema="noche"][data-neg="hemingway"] { --marca:#CBAE79; --marca-suave:#211C14; --marca-txt:#12100A }
:root[data-tema="noche"][data-neg="kohala"]    { --marca:#6FBF94; --marca-suave:#122019; --marca-txt:#08150F }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:14.5px; line-height:1.5;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.021em}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--marca); outline-offset:2px; border-radius:8px}
.num{font-variant-numeric:tabular-nums}

/* ── Estructura ──────────────────────────────────────────────────── */
.app{display:grid; grid-template-columns:var(--barra) 1fr; min-height:100vh}
.app > *{min-width:0}

/* ── Barra lateral ───────────────────────────────────────────────── */
.lat{
  background:var(--fondo); border-right:1px solid var(--linea);
  display:flex; flex-direction:column; gap:22px; padding:20px 12px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* El logotipo del grupo YA viene con alfa: el negro vive dentro del círculo y
   fuera es transparente, así que va suelto, sin placa.
   OJO: `sips -Z` aplana el alfa al reducir. Las copias de marcas/ se generan
   con scratchpad/reducir.py, que promedia premultiplicado por alfa. */
.marca{padding:0 4px}
.marca img{width:100%; max-width:158px; display:block}
.marca-nom{font-size:18px; font-weight:650; letter-spacing:-.03em; line-height:1.12; margin:0}


.nav{display:flex; flex-direction:column; gap:1px}
.nav-tit{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); padding:0 10px 8px; margin:0}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:8px 10px; border-radius:var(--r3);
  color:var(--texto-2); font-size:14px; font-weight:450; transition:background .15s, color .15s;
}
.nav button:hover{background:var(--hover); color:var(--texto)}
.nav button[aria-current="page"]{
  background:var(--panel); color:var(--texto); font-weight:550;
  border:1px solid var(--linea); box-shadow:var(--sombra); padding:7px 9px;
}
.nav button[aria-current="page"] svg{color:var(--marca)}
.nav svg{width:17px; height:17px; flex:none; stroke-width:1.8; opacity:.9}
.nav .cuenta{
  margin-left:auto; font-size:11.5px; font-weight:550; min-width:20px; text-align:center;
  background:var(--neutro-bg); color:var(--texto-2); border-radius:20px; padding:1px 7px;
}
.nav button[aria-current="page"] .cuenta{background:var(--marca); color:var(--marca-txt)}

.lat-pie{margin-top:auto; display:flex; flex-direction:column; gap:14px}
.lema{
  display:flex; gap:9px; align-items:flex-start; margin:0 0 2px; padding:0 10px;
  font-size:12.5px; line-height:1.4; color:var(--marca); font-weight:450;
}
.lema svg{width:17px; height:17px; flex:none; margin-top:1px; opacity:.85}
.nav.secundaria button{font-size:13.5px; color:var(--texto-3)}
.cuenta-pie{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--r2);
  padding:8px 10px; box-shadow:var(--sombra); transition:background .15s;
}
.cuenta-pie:hover{background:var(--hover)}
.cuenta-pie .av{
  width:29px; height:29px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--marca); color:var(--marca-txt); font-size:12px; font-weight:600;
}
.cuenta-pie .quien{font-size:12.5px; font-weight:550; line-height:1.25; flex:1; min-width:0}
.cuenta-pie .quien small{display:block; font-size:11px; font-weight:400; color:var(--texto-3)}
.cuenta-pie svg{width:14px; height:14px; color:var(--texto-3); flex:none}
.sello{
  font-size:11.5px; line-height:1.4; color:var(--texto-3); margin:0;
  border:1px dashed var(--linea); border-radius:var(--r2); padding:9px 11px;
}
.sello b{color:var(--texto); font-weight:600}

/* ── Cabecera ────────────────────────────────────────────────────── */
.cab{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:12px; padding:11px 24px; flex-wrap:wrap;
}

/* selector de negocio — control segmentado, cada uno con SU logotipo */
.negocios{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--panel);
  border:1px solid var(--linea); border-radius:30px; padding:5px 13px 5px 6px;
  font-size:13px; font-weight:500; color:var(--texto-2); white-space:nowrap;
  box-shadow:var(--sombra); transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{color:var(--texto); border-color:var(--texto-3)}
/* el activo va en tinta, como en la referencia: destaca sin depender del color */
.chip[aria-pressed="true"]{background:var(--tinta); color:#fff; border-color:var(--tinta)}
:root[data-tema="noche"] .chip[aria-pressed="true"]{background:var(--texto); color:var(--fondo)}
/* En el selector va el EMBLEMA de cada marca (el logotipo entero lleva texto y
   a este tamaño no se lee). "Todo el grupo" apila los tres. */
.chip .emb{width:20px; height:20px; object-fit:contain; display:block; flex:none}
.chip .emb.grupo{width:21px; height:21px}
.chip{padding:5px 12px 5px 8px}

.cab-der{margin-left:auto; display:flex; align-items:center; gap:8px}
.buscar{
  display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--linea);
  border-radius:11px; padding:0 8px 0 12px; height:36px; width:290px;
  box-shadow:var(--sombra); transition:width .22s cubic-bezier(.32,.72,0,1), border-color .15s, box-shadow .15s;
}
.buscar:hover{border-color:var(--texto-3)}
.buscar:focus-within{
  width:330px; border-color:var(--marca);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--marca) 13%, transparent);
}
.buscar kbd{
  font:inherit; font-size:10.5px; font-weight:600; color:var(--texto-3); letter-spacing:.02em;
  background:var(--panel-2); border:1px solid var(--linea); border-bottom-width:2px;
  border-radius:6px; padding:2px 6px; flex:none; transition:opacity .15s;
}
.buscar:focus-within kbd{opacity:0}
.buscar:focus-within{border-color:var(--marca); box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 14%, transparent)}
.buscar svg{color:var(--texto-3); flex:none}
.buscar input{background:none; border:0; color:var(--texto); font:inherit; font-size:13.5px; width:100%; outline:none}
.buscar input::placeholder{color:var(--texto-3)}
.icono-btn{
  background:var(--panel); border:1px solid var(--linea); border-radius:11px;
  width:36px; height:36px; display:grid; place-items:center; color:var(--texto-2);
  box-shadow:var(--sombra); transition:background .15s, color .15s, border-color .15s;
}
.icono-btn:hover{background:var(--hover); color:var(--texto); border-color:var(--texto-3)}
.icono-btn svg{width:16px; height:16px; stroke-width:1.9}
.yo{display:flex; align-items:center}
.yo .av{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--marca-txt);
  /* el avatar toma el color del negocio que se está mirando, como el resto */
  background:linear-gradient(145deg, color-mix(in srgb, var(--marca) 82%, #fff), var(--marca));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--marca) 26%, transparent), var(--sombra);
  cursor:pointer; transition:transform .12s;
}
.yo .av:hover{transform:translateY(-1px)}
.yo span{font-size:13px; font-weight:500; line-height:1.3}
.yo small{display:block; color:var(--texto-3); font-size:11.5px; font-weight:400}

/* ── Contenido ───────────────────────────────────────────────────── */
.cuerpo{padding:22px 24px 64px; max-width:1560px}

/* banda de identidad del negocio: su logotipo, su color, sus datos */
.identidad{
  display:flex; align-items:center; gap:16px; margin-bottom:20px; padding:16px 20px;
  background:var(--marca-suave); border:1px solid var(--linea); border-radius:var(--r);
  position:relative; overflow:hidden;
}
.identidad::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--marca)}
.identidad .logo{height:46px; width:auto; max-width:190px; object-fit:contain; display:block; flex:none}
/* Los tres logotipos tienen proporciones muy distintas (el del Lounge es
   apaisado y el de Kohala redondo): se igualan por ALTO dentro de una caja
   común, si no uno pisa a los otros dos. */
.identidad.grupo{padding:12px 16px; gap:14px}
.identidad .logo-grupo{height:66px; width:auto; flex:none; display:block}
.identidad .tres{display:flex; align-items:stretch; gap:6px; flex-wrap:wrap}
.marca-uno{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:1px solid transparent; border-radius:var(--r2); padding:8px 16px;
  transition:background .15s, border-color .15s;
}
.marca-uno:hover{background:var(--panel); border-color:var(--linea)}
.marca-uno img{height:46px; width:auto; max-width:168px; object-fit:contain; display:block}
.marca-uno span{font-size:11.5px; font-weight:500; color:var(--texto-2)}
.identidad h1{font-size:1.32rem}
.identidad p{margin:2px 0 0; color:var(--texto-2); font-size:13px}
.identidad .meta{margin-left:auto; display:flex; gap:26px; flex-wrap:wrap; text-align:right}
.identidad .meta b{display:block; font-size:13.5px; font-weight:600}
.identidad .meta span{font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3)}

.tit{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.tit h1{font-size:1.5rem; line-height:1.2}
.tit p{margin:3px 0 0; color:var(--texto-2); font-size:13.5px}
.tit .der{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.btn{
  background:var(--marca); color:var(--marca-txt); border:0; border-radius:var(--r3);
  padding:8px 14px; font-size:13.5px; font-weight:550; display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 1px 2px rgba(12,20,37,.1); transition:filter .15s, transform .06s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(.5px)}
.btn.fino{background:var(--panel); color:var(--texto); border:1px solid var(--linea); box-shadow:0 1px 2px rgba(12,20,37,.05)}
.btn.fino:hover{background:var(--hover); filter:none}
.btn svg{width:15px; height:15px; stroke-width:2}

/* Igual que los ítems de flex, una celda de grid nace con min-width:auto y no
   encoge por debajo de su contenido: la gráfica de 14 columnas empujaba la
   rejilla 8px fuera del móvil. */
.rej{display:grid; gap:13px}
.rej > *{min-width:0}
.rej.c4{grid-template-columns:repeat(4,1fr); align-items:start}
.rej.c3{grid-template-columns:repeat(3,1fr)}
.rej.c2{grid-template-columns:repeat(2,1fr)}
.rej.ancho-izq{grid-template-columns:var(--col-a) var(--col-b); align-items:stretch}
/* Las dos filas del resumen usan las MISMAS columnas: con 1.62/1 arriba y 1/1
   abajo, los bordes no caían en la misma vertical y el panel se veía torcido. */
:root{--col-a:1.62fr; --col-b:1fr}

.tarj{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--r);
  padding:18px; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
/* la gráfica llena la tarjeta cuando ésta se estira para igualar a su vecina */
.tarj > .graf-caja{flex:1; min-height:188px}
.graf-zona, .graf{height:100%}
.graf-y{height:100%}
.tarj h2{font-size:.97rem; font-weight:600; display:flex; align-items:center; gap:8px}
.tarj-cab{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.tarj-cab .der{margin-left:auto; font-size:12.5px; color:var(--texto-3)}

.cifra{
  display:flex; flex-direction:row; align-items:flex-start; gap:13px;
  text-align:left; width:100%; transition:border-color .15s, box-shadow .15s;
}
button.cifra:hover{border-color:var(--texto-3); box-shadow:var(--sombra-media)}
.cifra .ico{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--panel-2); color:var(--texto-2);
}
.cifra .ico svg{width:17px; height:17px; stroke-width:1.7}
/* columna explícita: como <span> suelto heredaba interlineado y la tarjeta
   se iba a 204px de alto con 80px de contenido */
.cifra-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
/* OJO: no llamarla .cuerpo — el <main> del panel ya usa esa clase y le metía
   su padding de 22px/64px al texto de la tarjeta (la dejaba en 203px de alto) */
.cifra .et{font-size:12.5px; font-weight:500; color:var(--texto-2); margin:0}
.cifra .n{font-size:1.8rem; font-weight:650; letter-spacing:-.035em; line-height:1.2; margin:2px 0 1px}
.cifra .pie{font-size:12.5px; color:var(--texto-3); margin:0}
.cifra .chev{width:15px; height:15px; flex:none; color:var(--texto-3); margin-top:2px; stroke-width:2}
.cifra .pie b{color:var(--ok); font-weight:550}
.cifra .pie b.baja{color:var(--malo)}

/* etiquetas de estado — pastilla con fondo tintado, sin borde */
.eti{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500;
  padding:2px 9px; border-radius:20px; white-space:nowrap;
  background:var(--neutro-bg); color:var(--neutro);
}
.eti::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.eti.ok{background:var(--ok-bg); color:var(--ok)}
.eti.pend{background:var(--aviso-bg); color:var(--aviso)}
.eti.mal{background:var(--malo-bg); color:var(--malo)}
.eti.neutra{background:var(--neutro-bg); color:var(--neutro)}
.eti.oro,.eti.vip{background:var(--marca-suave); color:var(--marca); font-weight:600}
.eti.simple::before{display:none}

.pt{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--texto-2); white-space:nowrap}
.pt i{width:7px; height:7px; border-radius:3px; flex:none; font-style:normal}
.pt[data-n="lounge"] i{background:var(--lounge)} .pt[data-n="hemingway"] i{background:var(--hemingway)}
.pt[data-n="kohala"] i{background:var(--kohala)}

/* ── Tablas ──────────────────────────────────────────────────────── */
.tabla{width:100%; border-collapse:collapse; font-size:13.5px}
.tabla th{
  text-align:left; font-weight:550; font-size:12px; color:var(--texto-3);
  padding:0 12px 9px; border-bottom:1px solid var(--linea); white-space:nowrap;
}
.tabla td{padding:11px 12px; border-bottom:1px solid var(--linea-suave); vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .13s}
.tabla tbody tr:hover{background:var(--hover)}
.tabla .nom{font-weight:550}
.tabla .sub{display:block; font-size:12.5px; color:var(--texto-3); margin-top:1px}
.tabla .der{text-align:right}
.hora{font-weight:600; font-variant-numeric:tabular-nums; font-size:13.5px}

.vacio{padding:36px 14px; text-align:center; color:var(--texto-3); font-size:13.5px}
.vacio svg{width:24px; height:24px; opacity:.55; display:block; margin:0 auto 10px; stroke-width:1.6}

/* ── Gráfica ─────────────────────────────────────────────────────── */
/* alto MÍNIMO, no fijo: la tarjeta se estira para igualar a su vecina y el eje
   crecía con ella mientras las barras se quedaban cortas */
.graf{display:flex; align-items:flex-end; gap:6px; height:100%; min-height:188px; padding-top:8px}
/* min-width:0 — con 14 columnas, el ancho del rótulo del día ("Ma") hacía de
   suelo y la tarjeta se salía 8px en el móvil */
.graf .col{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; height:100%; position:relative}
.graf .seg{border-radius:4px; min-height:2px; transition:height .5s cubic-bezier(.22,1,.36,1)}
.graf .seg.lounge{background:var(--lounge)} .graf .seg.hemingway{background:var(--hemingway)}
.graf .seg.kohala{background:var(--kohala)}
.graf .dia{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:11px; color:var(--texto-3)}
.graf-pie{display:flex; gap:16px; margin-top:29px; flex-wrap:wrap; align-items:center}
.leyenda{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--texto-2)}
.leyenda i{width:9px; height:9px; border-radius:3px; font-style:normal}

/* display:block explícito — se usa también como <span> dentro de celdas, y en
   línea la altura no se aplica: la barra desaparecía */
.prog{display:block; height:6px; border-radius:6px; background:var(--linea); overflow:hidden; margin-top:7px}
.prog i{display:block; height:100%; border-radius:6px; background:var(--marca); transition:width .6s cubic-bezier(.22,1,.36,1)}
.prog i.lleno{background:var(--malo)} .prog i.alto{background:var(--aviso)}

/* ── Ficha de cliente ────────────────────────────────────────────── */
.velo{position:fixed; inset:0; background:rgba(12,20,37,.32); backdrop-filter:blur(3px); z-index:40}
.velo[hidden]{display:none}
.ficha{
  position:fixed; top:0; right:0; bottom:0; width:min(432px,100%); z-index:50;
  background:var(--panel); border-left:1px solid var(--linea); box-shadow:var(--sombra-alta);
  padding:22px; overflow-y:auto; animation:entra .28s cubic-bezier(.32,.72,0,1);
}
.ficha[hidden]{display:none}
@keyframes entra{from{transform:translateX(30px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .ficha{animation:none} .graf .seg,.prog i{transition:none} }
.ficha-cab{display:flex; align-items:flex-start; gap:13px; margin-bottom:16px}
.ficha-cab .av{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--marca-suave); color:var(--marca); font-size:1.02rem; font-weight:600;
}
.ficha-cab h2{font-size:1.14rem}
.ficha-cab .cerrar{
  margin-left:auto; background:var(--panel-2); border:1px solid var(--linea); border-radius:8px;
  width:28px; height:28px; color:var(--texto-2); font-size:17px; line-height:1; padding:0;
}
.ficha-cab .cerrar:hover{background:var(--hover); color:var(--texto)}
.dato{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--linea-suave); font-size:13.5px}
.dato span{color:var(--texto-2)}
.dato b{font-weight:550; text-align:right}
.bloque-tit{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); margin:20px 0 9px}
.etiquetas{display:flex; flex-wrap:wrap; gap:6px}
.etiquetas span{font-size:12px; padding:3px 10px; border-radius:20px; background:var(--neutro-bg); color:var(--texto-2)}
.visitas{display:grid; gap:9px}
.visita{display:flex; align-items:center; gap:10px; font-size:13px}
.visita .barra{flex:1; height:7px; border-radius:6px; background:var(--linea); overflow:hidden}
.visita .barra i{display:block; height:100%; border-radius:6px}
.visita .n{font-variant-numeric:tabular-nums; color:var(--texto-2); min-width:26px; text-align:right}

/* ── Eventos ─────────────────────────────────────────────────────── */
.evento{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra);
  padding:17px; display:flex; flex-direction:column; gap:13px; position:relative; overflow:hidden;
}
.evento::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--hemingway)}
.evento[data-n="lounge"]::before{background:var(--lounge)}
.fecha-caja{
  display:grid; place-items:center; width:50px; height:54px; flex:none; border-radius:var(--r2);
  background:var(--panel-2); border:1px solid var(--linea); line-height:1.1;
}
.fecha-caja b{font-size:1.24rem; font-weight:600; letter-spacing:-.02em}
.fecha-caja small{font-size:10.5px; font-weight:550; text-transform:uppercase; color:var(--texto-3)}
.evento h3{font-size:1rem}
.evento .dj{font-size:12.5px; color:var(--texto-2); margin:3px 0 0}
.evento-datos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.evento-datos b{display:block; font-size:1.22rem; font-weight:600; letter-spacing:-.025em; line-height:1.15}
.evento-datos span{color:var(--texto-3); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase}

/* ── Campañas ────────────────────────────────────────────────────── */
.campana{background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); padding:17px; display:grid; gap:12px}
.campana .texto{
  background:var(--panel-2); border:1px solid var(--linea-suave); border-radius:var(--r2);
  padding:13px 15px; font-size:13px; color:var(--texto-2); white-space:pre-wrap; line-height:1.55;
}
.campana-res{display:flex; gap:24px; flex-wrap:wrap}
.campana-res b{display:block; font-size:1.2rem; font-weight:600; letter-spacing:-.025em}
.campana-res span{color:var(--texto-3); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase}

.segmento{
  display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--linea);
  border-radius:var(--r); background:var(--panel); width:100%; text-align:left; box-shadow:var(--sombra);
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
.segmento:hover{border-color:var(--marca); box-shadow:0 2px 4px rgba(12,20,37,.06), 0 10px 22px -12px rgba(12,20,37,.2)}
.segmento:active{transform:translateY(1px)}
.segmento .n{font-size:1.55rem; font-weight:600; letter-spacing:-.03em; min-width:42px; color:var(--marca)}
.segmento p{margin:0; font-size:12.5px; color:var(--texto-3)}
.segmento strong{display:block; font-size:13.5px; font-weight:550; color:var(--texto); margin-bottom:1px}

/* ── Filtros ─────────────────────────────────────────────────────── */
.filtros{display:flex; gap:3px; flex-wrap:wrap; margin-bottom:16px; background:var(--panel-2); border:1px solid var(--linea); border-radius:11px; padding:3px; width:fit-content}
.filtro{background:none; border:0; border-radius:8px; padding:6px 13px; font-size:13px; font-weight:500; color:var(--texto-2); transition:background .15s, color .15s}
.filtro:hover{color:var(--texto)}
.filtro[aria-pressed="true"]{background:var(--panel); color:var(--texto); font-weight:550; box-shadow:0 1px 2px rgba(12,20,37,.09)}


/* ── Gráfica con eje y rejilla ───────────────────────────────────── */
.graf-caja{display:flex; gap:12px}
.graf-y{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  font-size:11px; color:var(--texto-3); font-variant-numeric:tabular-nums; padding-bottom:20px; flex:none;
}
.graf-zona{flex:1; min-width:0; position:relative; display:flex; flex-direction:column}
.graf-rejilla{position:absolute; inset:0 0 20px 0; display:flex; flex-direction:column; justify-content:space-between}
.graf-rejilla i{display:block; height:1px; background:var(--linea-suave)}
.graf .col{cursor:default}
.graf .col:hover .seg{filter:brightness(1.06)}
.globo{
  position:absolute; z-index:5; background:var(--panel); border:1px solid var(--linea);
  border-radius:10px; box-shadow:var(--sombra-media); padding:8px 11px; font-size:12px;
  pointer-events:none; opacity:0; transform:translate(-50%,-6px); transition:opacity .12s; white-space:nowrap;
}
.globo.se-ve{opacity:1}
.globo b{display:block; font-size:13.5px; font-weight:600; margin-top:2px}
.globo .pt{font-size:11.5px}
.rango{
  display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--linea);
  border-radius:9px; padding:5px 10px; font-size:12.5px; font-weight:500; color:var(--texto-2); box-shadow:var(--sombra);
}
.rango:hover{color:var(--texto)}
.rango svg{width:13px; height:13px; stroke-width:2; color:var(--texto-3)}
.leyenda i{border-radius:50%}

/* enlace "ver todo" de las cabeceras */
.mas{
  display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:4px 6px;
  font-size:12.5px; font-weight:500; color:var(--texto-2); border-radius:7px;
}
.mas:hover{background:var(--hover); color:var(--texto)}
.mas svg{width:13px; height:13px; stroke-width:2}
.mas.resto{width:100%; justify-content:center; margin-top:10px; padding:8px; border:1px dashed var(--linea)}

/* menú de fila */
.puntos{
  background:none; border:0; border-radius:7px; width:26px; height:26px; color:var(--texto-3);
  display:grid; place-items:center; opacity:0; transition:opacity .13s, background .13s;
}
tr:hover .puntos, .fila:hover .puntos{opacity:1}
.puntos:hover{background:var(--hover); color:var(--texto)}
.puntos svg{width:15px; height:15px}

/* ── Listas del resumen ──────────────────────────────────────────── */
/* cabecera de turno: separa comida, cena y madrugada dentro del mismo día */
.turno{
  display:flex; align-items:center; gap:9px; margin:14px 0 4px;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-3);
}
.turno:first-of-type{margin-top:2px}
.turno span{flex:none; color:var(--texto-2)}
.turno i{flex:1; height:1px; background:var(--linea); display:block}
.turno b{font-weight:600; color:var(--texto-2)}

/* pastilla con el número de personas */
.pax{
  display:inline-flex; align-items:center; gap:4px; flex:none; min-width:42px;
  justify-content:center; padding:3px 8px; border-radius:20px; font-size:12px;
  font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--panel-2); color:var(--texto-2); border:1px solid var(--linea-suave);
}
.pax svg{width:12px; height:12px; stroke-width:1.9; opacity:.75}

/* la que entra ahora, y las que ya han pasado */
.fila.proxima{background:var(--marca-suave)}
.fila.proxima .h{color:var(--marca)}
.fila.proxima:hover{background:var(--marca-suave); filter:brightness(.98)}
.fila.ida{opacity:.55}
.fila.ida:hover{opacity:1}

.fila{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:9px; margin:0 -9px; border-radius:10px; background:none; border:0;
  border-bottom:1px solid var(--linea-suave); transition:background .14s;
}
.fila:hover{background:var(--hover)}
.fila:last-child{border-bottom:0}
.fila .h{
  font-size:13px; font-weight:600; color:var(--texto); font-variant-numeric:tabular-nums;
  min-width:44px; flex:none; letter-spacing:-.01em;
}
.fila .qué{flex:1; min-width:0}
.fila .qué strong{display:block; font-size:13.5px; font-weight:550; line-height:1.3}
.fila .eti{flex:none; min-width:84px; justify-content:center}
.fila .qué span{
  font-size:12px; color:var(--texto-3); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* el local va dentro del subtítulo, como un punto de color antes del nombre:
   en columna aparte robaba ancho y partía el texto en dos líneas */
.fila .qué .pin{
  display:inline-block; width:6px; height:6px; border-radius:2px; font-style:normal;
  margin-right:4px; vertical-align:middle;
}
.fila .qué .pin[data-n="lounge"]{background:var(--lounge)}
.fila .qué .pin[data-n="hemingway"]{background:var(--hemingway)}
.fila .qué .pin[data-n="kohala"]{background:var(--kohala)}

/* Avisos — cada uno es una fila pulsable que lleva a su sección. El título y
   la hora comparten línea para que el ojo baje en vertical por las horas, y el
   detalle va debajo en gris. */
.aviso{
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; border-radius:10px; padding:9px 9px 10px;
  margin:0 -9px; transition:background .14s;
}
.aviso + .aviso{border-top:1px solid var(--linea-suave)}
.aviso:hover{background:var(--hover)}
.aviso .ico{
  width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--panel-2); color:var(--texto-2); margin-top:1px;
}
.aviso .ico svg{width:15px; height:15px; stroke-width:1.8}
.aviso.mal .ico{background:var(--malo-bg); color:var(--malo)}
.aviso.pend .ico{background:var(--aviso-bg); color:var(--aviso)}
.aviso.oro .ico{background:var(--marca-suave); color:var(--marca)}
.aviso.ok .ico{background:var(--ok-bg); color:var(--ok)}
.aviso .txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.aviso .linea{display:flex; align-items:baseline; gap:10px}
.aviso .linea strong{font-size:13.5px; font-weight:600; line-height:1.35; letter-spacing:-.008em}
.aviso.mal .linea strong{color:var(--malo)}
.aviso .cuando{
  margin-left:auto; flex:none; font-size:11px; font-weight:500; color:var(--texto-3);
  font-variant-numeric:tabular-nums;
}
.aviso .detalle{font-size:12.5px; color:var(--texto-2); line-height:1.45}

/* evento en el resumen */
.ev-fila{display:flex; align-items:center; gap:13px; padding:10px 0; border-bottom:1px solid var(--linea-suave)}
.ev-fila:last-child{border-bottom:0}
.ev-fecha{
  display:grid; place-items:center; width:42px; flex:none; line-height:1.1;
  border-right:1px solid var(--linea); padding-right:11px;
}
.ev-fecha b{font-size:1.1rem; font-weight:650; letter-spacing:-.03em}
.ev-fecha small{font-size:9.5px; font-weight:550; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3)}
.ev-fila .der{text-align:right; flex:none}
.ev-fila .der b{display:block; font-size:1.05rem; font-weight:650; letter-spacing:-.03em}
.ev-fila .der span{font-size:10.5px; font-weight:500; letter-spacing:.04em; color:var(--texto-3)}

/* ── Responsive ──────────────────────────────────────────────────── */
.abre-menu{display:none}
@media (max-width:1240px){
  .rej.c4{grid-template-columns:repeat(2,1fr)}
  .rej.ancho-izq{grid-template-columns:1fr}
  .rej.c3{grid-template-columns:repeat(2,1fr)}
  .identidad .meta{gap:18px}
}
@media (max-width:980px){
  :root{--barra:0px}
  .app{grid-template-columns:1fr}
  .lat{
    position:fixed; left:0; top:0; bottom:0; width:264px; z-index:60;
    transform:translateX(-102%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  }
  .lat.abierta{transform:none; box-shadow:var(--sombra-alta)}
  .abre-menu{display:grid}
  .cab{padding:10px 16px}
  .cuerpo{padding:18px 16px 60px}
  .buscar{min-width:0; flex:1}
  .identidad{flex-wrap:wrap}
  .identidad .meta{margin-left:0; flex-basis:100%; text-align:left}
}
@media (max-width:720px){
  .rej.c4{grid-template-columns:repeat(2,1fr); gap:10px}
  .rej.c3,.rej.c2{grid-template-columns:1fr}
  .tarj{padding:15px}
  .cifra .n{font-size:1.6rem}
  .tit h1{font-size:1.32rem}
  /* dos filas: arriba menú + buscador + cuenta, debajo los negocios */
  .cab{gap:9px; padding:10px 14px}
  .abre-menu{order:1}
  .cab-der{order:2; margin-left:0; flex:1; gap:8px; min-width:0}
  .buscar{flex:1; min-width:0}
  .negocios{order:3; flex-basis:100%; overflow-x:auto; scrollbar-width:none; min-width:0}
  .negocios::-webkit-scrollbar{display:none}
  .negocios .chip{flex:none}
  .yo span{display:none}
  .yo{padding-left:0; border-left:0; margin-left:0}
  .identidad{padding:14px; gap:12px}
  .graf{gap:3px}
  .graf-caja{gap:8px}
  .graf-y{font-size:10px}
  .graf .dia{font-size:9.5px}
  .identidad .logo{height:38px}
  .filtros{width:100%}
  .filtro{flex:1}
  .tabla thead{display:none}
  .tabla tr{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; padding:12px 0; border-bottom:1px solid var(--linea-suave)}
  .tabla td{border:0; padding:2px 0}
  .tabla td[data-col]::before{
    content:attr(data-col); font-size:11px; font-weight:550; color:var(--texto-3); display:block; margin-bottom:1px;
  }
  .tabla td.tira{grid-column:1 / -1}
  .tabla .der{text-align:left}
}