/* ============================================================
   The Nail Boss · estilos de la web.
   Tokens y vocabulario de clases tomados tal cual del prototipo (prototipo/index.html):
   los módulos escriben HTML con estas clases (.head .card .btn .badge .field .drawer…).
   Un solo tema, claro: la marca vive en crema. Base crema, acción frambuesa, barra en tinta,
   un sticker por pantalla como máximo.
   ============================================================ */
:root {
  color-scheme: light;
  --tnb-cream: #FDF9F1; --tnb-cream-surface: #FFFFF4; --tnb-white: #FFFFFF;
  --tnb-ink: #1C1C1C; --tnb-graphite: #272727; --tnb-gray: #8D8D8D; --tnb-border: #EDE6DA;
  --tnb-pink: #EC94B4; --tnb-blush: #F8D8E4; --tnb-raspberry: #BD3E71;
  --tnb-lilac: #BAA3CE; --tnb-sky: #A0C8EC; --tnb-cobalt: #006CB0; --tnb-cobalt-light: #7FB0DA; --tnb-lime: #B4CC64;
  --ok-bg: #EEF3DA; --ok-tx: #4A5A1E; --info-bg: #E3EFFA; --info-tx: #00548A;
  --warn-bg: #FBEBD3; --warn-tx: #7A4A0C; --err-bg: #F9DDE6; --err-tx: #9C2457;
  --f-display: 'Gloock', Georgia, serif;
  --f-ui: 'Avenir', 'Nunito Sans', 'Open Sans', system-ui, sans-serif;
  --f-hand: 'Kalam', 'Comic Sans MS', cursive;
  --r-ctl: 12px; --r-card: 20px; --r-pill: 999px;
  --sh-card: 0 2px 8px rgba(28,28,28,.06); --sh-float: 0 12px 32px rgba(28,28,28,.12);
  --sh-sticker: 4px 4px 0 var(--tnb-pink);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--tnb-cream); }
body { margin: 0; background: var(--tnb-cream); color: var(--tnb-ink); font: 400 15px/22px var(--f-ui); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
img { max-width: 100%; }
h1, h2 { font-family: var(--f-display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; line-height: 40px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font: 700 18px/26px var(--f-ui); margin: 0; }
p { margin: 0; }
a { color: var(--tnb-raspberry); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible, tr:focus-visible { outline: 3px solid var(--tnb-blush); outline-offset: 2px; }
.label { font: 700 11px/16px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--tnb-gray); }
.hand { font: 400 16px/22px var(--f-hand); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tnb-gray); }
.error { color: var(--err-tx); font-size: 14px; min-height: 1em; }
.error:empty { display: none; }
.ok-texto { color: var(--ok-tx); font-size: 14px; }
.peligro { color: var(--err-tx); }
.enlace { border: 0; background: none; padding: 0; color: var(--tnb-graphite); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.enlace.peligro { color: var(--err-tx); }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.espacio { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--tnb-ink); color: var(--tnb-cream); padding: 20px 14px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: inherit; text-decoration: none; }
.brand img { width: 52px; height: auto; flex: none; }
.brand b { font: 400 19px/22px var(--f-display); display: block; }
.brand small { display: block; font: 700 10px/14px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tnb-pink); overflow-wrap: anywhere; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--tnb-cream); border-radius: var(--r-ctl); font-weight: 600; text-align: left; text-decoration: none; }
.nav a:hover { background: rgba(253,249,241,.08); }
.nav a.is-active { background: var(--tnb-pink); color: var(--tnb-ink); }
.nav svg { width: 20px; height: 20px; flex: none; }
.nav .ico-texto { width: 20px; text-align: center; flex: none; }
.nav .count { margin-left: auto; background: var(--tnb-raspberry); color: #fff; font: 700 11px/18px var(--f-ui); padding: 0 7px; border-radius: var(--r-pill); }
.nav a.is-active .count { background: var(--tnb-ink); }
.side-foot { margin-top: auto; font-size: 13px; line-height: 18px; color: #CFC8BC; padding: 0 6px; overflow-wrap: anywhere; }
.side-foot b { color: var(--tnb-cream); display: block; }
.app.suelto { grid-template-columns: minmax(0, 1fr); }
.app.suelto .side, .app.suelto .topbar { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 10px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--tnb-border); background: var(--tnb-cream); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.topbar .yo { font-weight: 700; font-size: 14px; }
.topbar select { width: auto; max-width: 220px; }
.view { padding-block: 28px 64px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 24px; max-width: 1240px; width: 100%; min-width: 0; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; justify-content: space-between; }
.head > div { min-width: 0; }
.head p { color: var(--tnb-graphite); margin-top: 4px; max-width: 70ch; }
.head-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Franjas de arriba (súper admin, suscripción, módulos) */
.franja, #banner .aviso { padding: 10px 24px; padding-left: max(24px, env(safe-area-inset-left, 0px)); font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--tnb-border); background: var(--warn-bg); color: var(--warn-tx); }
.franja a, .franja .enlace, #banner .aviso a { color: inherit; }
.aviso { background: var(--warn-bg); color: var(--warn-tx); border-radius: var(--r-ctl); padding: 10px 14px; font-weight: 600; font-size: 14px; }
#banner .aviso { border-radius: 0; }
.franja-admin { background: var(--tnb-lilac); color: var(--tnb-ink); }
.franja-warn { background: var(--warn-bg); color: var(--warn-tx); }
.franja-err { background: var(--err-bg); color: var(--err-tx); }
.franja-info { background: var(--info-bg); color: var(--info-tx); }
.franja-ok { background: var(--ok-bg); color: var(--ok-tx); }

/* ---------- componentes ---------- */
.card { background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 20px; min-width: 0; }
.btn { border-radius: var(--r-ctl); font-weight: 700; padding: 10px 18px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; color: var(--tnb-ink); background: var(--tnb-white); line-height: 22px; }
.btn-primary { background: var(--tnb-raspberry); color: #fff; }
.btn-primary:hover { background: #A5335F; }
.btn-secondary { background: var(--tnb-ink); color: var(--tnb-cream); }
.btn-secondary:hover { background: var(--tnb-graphite); }
.btn-ghost { background: transparent; border-color: var(--tnb-ink); }
.btn-ghost:hover { background: rgba(28,28,28,.04); }
.btn-ghost.peligro { border-color: var(--err-tx); color: var(--err-tx); }
.btn-sm { padding: 6px 12px; font-size: 13px; line-height: 18px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 2px 10px; font: 700 12px/18px var(--f-ui); white-space: nowrap; background: var(--tnb-border); color: var(--tnb-graphite); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.b-ok { background: var(--ok-bg); color: var(--ok-tx); }
.b-info { background: var(--info-bg); color: var(--info-tx); }
.b-warn { background: var(--warn-bg); color: var(--warn-tx); }
.b-err { background: var(--err-bg); color: var(--err-tx); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--tnb-blush); font-size: 13px; font-weight: 600; white-space: nowrap; }
.input, select.input, textarea.input { width: 100%; background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: var(--r-ctl); padding: 10px 14px; font: inherit; color: var(--tnb-ink); min-width: 0; }
.input:focus { outline: none; border-color: var(--tnb-raspberry); box-shadow: 0 0 0 3px var(--tnb-blush); }
.input-sm { padding: 6px 10px; font-size: 14px; width: auto; }
.input-xs { padding: 2px 6px; width: 64px; display: inline-block; font-size: 14px; }
textarea.input { resize: vertical; }
/* Controles sin clase (los que pinte un módulo) se ven igual que .input */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=date], input[type=time], input[type=search], select, textarea {
  font: inherit; color: var(--tnb-ink); background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: var(--r-ctl); padding: 8px 12px; max-width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--tnb-raspberry); width: 16px; height: 16px; margin: 0; flex: none; }
input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--tnb-border); border-radius: var(--r-ctl); background: var(--tnb-white); flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-weight: 700; font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; cursor: pointer; }
.check > input { margin-top: 2px; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--tnb-gray); font-weight: 700; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.empty .hand { font-size: 20px; line-height: 28px; }
.clicable { cursor: pointer; }
.clicable:hover td { background: var(--tnb-cream); }
.is-off { opacity: .55; }
details > summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.persona { border: 1px solid var(--tnb-border); border-radius: 16px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.horario-dia { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.horario-dia .input-sm { width: 100%; }
.dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dias label { position: relative; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--tnb-border); border-radius: var(--r-pill); padding: 4px 10px; font-size: 13px; font-weight: 600; background: var(--tnb-cream); cursor: pointer; }
.dias label:has(input:checked) { background: var(--tnb-ink); color: var(--tnb-cream); border-color: var(--tnb-ink); }
.dias input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------- Hoy ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.kpis-chicos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .big { font: 400 40px/48px var(--f-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpis-chicos .big { font-size: 28px; line-height: 36px; }
.kpi .big small { font: 600 16px/20px var(--f-ui); }
.kpi .sub { font-size: 13px; line-height: 20px; color: var(--tnb-graphite); }
.t-b-ok { color: var(--ok-tx); } .t-b-warn { color: var(--warn-tx); } .t-b-err { color: var(--err-tx); }
.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.todo { display: flex; flex-direction: column; }
.todo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--tnb-border); }
.todo h2 + .todo-row { border-top: 0; }
.todo-row p.muted { font-size: 13px; line-height: 20px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 168px; padding-top: 12px; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar i { display: block; width: 100%; max-width: 36px; min-height: 4px; border-radius: 8px 8px 4px 4px; background: var(--tnb-blush); }
.bar.is-today i { background: var(--tnb-raspberry); }
.bar span { font-size: 12px; color: var(--tnb-gray); font-weight: 700; }
.bar em { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Agenda ---------- */
.agenda-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--tnb-graphite); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.legend i.i-pend { outline: 2px dashed var(--tnb-ink); outline-offset: -2px; background: #fff; }
.pendientes { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 6px; }
.pendiente { flex: 0 0 auto; width: min(280px, 80vw); border: 2px dashed var(--tnb-ink); background: var(--tnb-cream); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cal-wrap { overflow-x: auto; background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.cal { display: grid; grid-template-columns: 64px repeat(var(--cols), minmax(170px, 1fr)); min-width: calc(64px + var(--cols) * 170px); }
.cal-h { padding: 14px 12px; border-bottom: 1px solid var(--tnb-border); display: flex; align-items: center; gap: 10px; font-weight: 700; position: sticky; top: 0; background: var(--tnb-white); z-index: 4; min-width: 0; }
.cal-h small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--tnb-gray); }
.ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--f-ui); color: var(--tnb-ink); flex: none; }
.hours, .col { position: relative; }
.hours div { position: absolute; left: 0; right: 0; height: 64px; padding: 2px 8px 0 0; text-align: right; font-size: 12px; color: var(--tnb-gray); font-variant-numeric: tabular-nums; }
.col { border-left: 1px solid var(--tnb-border); cursor: copy; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--fila) * 4 - 1px), var(--tnb-border) calc(var(--fila) * 4 - 1px) calc(var(--fila) * 4)); }
.cal-fuera { position: absolute; left: 0; right: 0; background: #F7F2E8; pointer-events: none; }
.now { position: absolute; left: 0; right: 0; height: 2px; background: var(--tnb-raspberry); z-index: 2; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--tnb-raspberry); }
.appt { position: absolute; left: 6px; right: 6px; border-radius: 12px; padding: 6px 10px; border: 0; text-align: left; color: var(--tnb-ink); overflow: hidden; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; cursor: pointer; z-index: 1; }
.appt:hover { box-shadow: var(--sh-float); z-index: 3; }
.appt b { font-size: 14px; }
.appt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.pending { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px); outline: 2px dashed var(--tnb-ink); outline-offset: -2px; }
.appt.st-no_show { opacity: .5; text-decoration: line-through; }
.appt.st-completada { opacity: .7; }
.appt .tag { margin-top: auto; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.cal-bloqueo { position: absolute; left: 6px; right: 6px; border: 0; border-radius: 12px; padding: 4px 10px; font-size: 12px; text-align: left; color: var(--tnb-graphite); background: repeating-linear-gradient(45deg, #F1EBE0 0 6px, #E9E2D5 6px 12px); overflow: hidden; z-index: 1; }

/* ---------- Bandeja ---------- */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; height: calc(100vh - 210px); min-height: 520px; }
.threads { border-right: 1px solid var(--tnb-border); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.threads-filter { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--tnb-border); flex-wrap: wrap; }
.threads-filter button { border: 1px solid var(--tnb-border); background: var(--tnb-cream); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; font-weight: 700; }
.threads-filter button.is-active { background: var(--tnb-ink); color: var(--tnb-cream); border-color: var(--tnb-ink); }
.threads-buscar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--tnb-border); }
.threads-buscar .input-sm { width: 100%; }
.threads-buscar .fila .input-sm { flex: 1 1 140px; }
.items { overflow-y: auto; flex: 1; min-height: 0; }
.thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--tnb-border); background: transparent; text-align: left; align-items: start; width: 100%; }
.thread:hover { background: var(--tnb-cream); }
.thread.is-active { background: #FDF0F5; }
.thread b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread p { font-size: 13px; line-height: 18px; color: var(--tnb-graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .chips { margin-top: 6px; gap: 4px; }
.thread .chips:empty { display: none; }
.thread .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--tnb-gray); }
.thread .count { background: var(--tnb-raspberry); color: #fff; font: 700 11px/18px var(--f-ui); padding: 0 7px; border-radius: var(--r-pill); }
.thread .min { min-width: 0; }
.chan { width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; font: 800 10px/1 var(--f-ui); vertical-align: -3px; margin-right: 6px; flex: none; }
.chan.wa { background: var(--ok-bg); color: var(--ok-tx); }
.chan.ig { background: #EFE7F6; color: #5B3F7A; }
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat > .empty { margin: auto; }
.chat-h { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--tnb-border); }
.chat-h > div { min-width: 0; }
.chat-h .stats { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chat-h .volver { display: none; }
.msgs { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--tnb-cream); overflow-y: auto; min-height: 0; }
.msg { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: block; font-size: 11px; color: var(--tnb-gray); margin-top: 4px; white-space: normal; }
.msg small .enlace { font-size: 11px; color: var(--tnb-gray); }
.msg.in { background: var(--tnb-white); border: 1px solid var(--tnb-border); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.bot { background: #EFE7F6; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.staff { background: var(--tnb-blush); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.sistema { align-self: center; background: none; color: var(--tnb-gray); font-size: 12px; padding: 2px; max-width: 100%; text-align: center; }
.msg .who { font: 700 11px/16px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tnb-graphite); white-space: normal; }
.proposal { align-self: stretch; background: var(--tnb-white); border: 1px solid var(--tnb-border); border-radius: 16px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; box-shadow: var(--sh-sticker); }
.proposal ~ .proposal { box-shadow: none; } /* un sticker por pantalla */
.proposal .what { flex: 1 1 240px; min-width: 0; }
.aviso-platica { align-self: stretch; background: var(--err-bg); color: var(--err-tx); border-radius: 16px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.aviso-platica .label { color: inherit; }
.compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--tnb-border); flex-wrap: wrap; }
.compose .input { flex: 1 1 200px; width: auto; }
.compose textarea.input { resize: none; min-height: 44px; max-height: 160px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; }
.quick button { border: 1px dashed var(--tnb-gray); background: transparent; border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; }

/* ---------- Clientas y tablas ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card.table-wrap { padding: 8px 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tnb-border); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--tnb-border); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.search { max-width: 320px; }
.tabla-precios td { padding: 6px; }
.tabla-precios .input-sm { width: 100%; min-width: 90px; }
.fila-nueva td { background: var(--tnb-cream); }
.cita-fila { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--tnb-border); }
.cita-fila p { font-size: 13px; }
.horas td { padding: 3px 8px; }
.barra-h { height: 8px; border-radius: 4px; background: var(--tnb-pink); min-width: 2px; }

/* ---------- Canales ---------- */
.canal { border: 1px solid var(--tnb-border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--tnb-cream-surface); min-width: 0; }
.canal b { overflow-wrap: anywhere; }
.qr { width: 240px; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; border: 12px solid #fff; border-radius: 16px; box-shadow: var(--sh-card); align-self: flex-start; }

/* ---------- Promociones (las pinta el módulo alta-y-promos) ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.promo { display: grid; grid-template-columns: 170px minmax(0, 1fr); padding: 0; overflow: hidden; }
.promo-data { padding: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; }
.promo-big { font: 400 48px/56px var(--f-display); }
.promo-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.promo-offer { background: var(--tnb-cream); border-radius: var(--r-ctl); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 520px) { .promo { grid-template-columns: 1fr; } }

/* ---------- Asistente ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--tnb-cream); border: 1px solid var(--tnb-border); border-radius: var(--r-ctl); max-width: 100%; }
.seg button, .seg label { border: 0; background: transparent; border-radius: 9px; padding: 8px 12px; font-weight: 700; font-size: 13px; line-height: 18px; cursor: pointer; position: relative; }
.seg button.is-active, .seg label:has(input:checked) { background: var(--tnb-ink); color: var(--tnb-cream); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--tnb-blush); outline-offset: 1px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--tnb-border); }
.note:first-child { border-top: 0; }
.note-acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13px; }
.test { display: flex; flex-direction: column; gap: 10px; background: var(--tnb-cream); border-radius: 16px; padding: 14px; min-height: 260px; max-height: 480px; overflow-y: auto; }
.test .msg { max-width: 88%; }

/* ---------- Configura tu salón (lo pinta alta-y-promos) ---------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.welcome { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.welcome img { width: 260px; max-width: 100%; }
.progress { height: 10px; background: var(--tnb-border); border-radius: var(--r-pill); overflow: hidden; width: 100%; }
.progress i { display: block; height: 100%; background: var(--tnb-raspberry); border-radius: var(--r-pill); }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--tnb-border); }
.step:first-child { border-top: 0; }
.dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--tnb-ink); font-variant-numeric: tabular-nums; }
.step.done .dot { background: var(--tnb-lime); border-color: var(--tnb-lime); }
.step.done h3 { text-decoration: line-through; text-decoration-color: var(--tnb-gray); }
.step p { font-size: 13px; line-height: 20px; color: var(--tnb-graphite); }

/* ---------- Planes (los pinta cobro-mp) ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan.is-hero { box-shadow: var(--sh-sticker), var(--sh-card); border-color: var(--tnb-ink); }
.plan .price { font: 400 40px/48px var(--f-display); font-variant-numeric: tabular-nums; }
.plan .price small { font: 600 14px/20px var(--f-ui); color: var(--tnb-gray); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plan li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; border-radius: 3px; background: var(--tnb-lime); }
.plan .btn { margin-top: auto; justify-content: center; }
.costs td:first-child { color: var(--tnb-graphite); }

/* ---------- Manicurista · Mi día ---------- */
.mine { display: flex; flex-direction: column; gap: 14px; max-width: 560px; width: 100%; }
.mine-card { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.mine-card .stripe { height: 100%; }
.mine-card .body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mine-card .row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.mine-card .time { font: 400 24px/32px var(--f-display); font-variant-numeric: tabular-nums; }
.mine-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mine-card .actions .btn { flex: 1 1 140px; justify-content: center; padding: 14px; font-size: 16px; }
.mine-card.is-done { opacity: .6; }

/* ---------- Cajón lateral y toast ---------- */
.drawer-bg { position: fixed; inset: 0; background: rgba(28,28,28,.28); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--tnb-cream-surface); z-index: 21; box-shadow: var(--sh-float); padding: 24px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain; }
.drawer .x { margin-left: auto; border: 0; background: transparent; font-size: 28px; line-height: 1; padding: 4px 8px; flex: none; }
.drawer-cuerpo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--tnb-ink); color: var(--tnb-cream); padding: 12px 20px; border-radius: var(--r-ctl); font-weight: 700; z-index: 30; box-shadow: var(--sh-float); max-width: calc(100vw - 32px); width: max-content; text-align: center; }

/* ---------- Bienvenida: póster ---------- */
.ws { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 32px; padding-block: 24px 40px; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); background: var(--tnb-cream); overflow: hidden; }
.ws-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.ws-top .label { color: var(--tnb-ink); }
.ws-top .label b { color: var(--tnb-raspberry); }
.ws-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; max-width: 1360px; width: 100%; margin-inline: auto; }
.ws-logo { position: relative; padding: 48px 6% 40px 0; }
.ws-logo .mark { width: 100%; max-width: 820px; display: block; filter: drop-shadow(0 18px 30px rgba(28,28,28,.10)); }
.ws-hello { position: absolute; top: 0; left: 2%; font: 700 clamp(30px, 4.4vw, 60px)/1 var(--f-hand); color: var(--tnb-raspberry); transform: rotate(-8deg); transform-origin: left bottom; }
.ws-seal { position: absolute; right: -2%; bottom: -4%; width: clamp(110px, 17vw, 230px); }
.ws-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }
.tape { display: inline-block; background: var(--tnb-lilac); color: var(--tnb-ink); font: 700 clamp(16px, 1.6vw, 21px)/1.2 var(--f-hand); text-transform: uppercase; letter-spacing: .04em; padding: 8px 20px 6px; transform: rotate(-3deg); }
.ws-copy h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.01em; }
.ws-copy h1 em { font-style: normal; color: var(--tnb-raspberry); }
.ws-copy > p { font-size: 17px; line-height: 26px; color: var(--tnb-graphite); max-width: 34ch; }
.ws-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ws-ext { display: contents; }
.ws-ext > .card, .ws-ext > p, .ws-ext > div { flex: 1 1 100%; } /* tarjeta de invitación o error de un módulo */
.ws-cta .btn-primary { padding: 16px 28px; font-size: 17px; box-shadow: 4px 4px 0 var(--tnb-ink); border: 2px solid var(--tnb-ink); }
.ws-cta .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tnb-ink); }
.ws-cta .btn-ghost { padding: 14px 20px; border-width: 2px; }
.ws-nota { font-size: 14px; color: var(--tnb-graphite); }
.ws-login { width: min(400px, 100%); gap: 14px; }
.ws-login .enlace { align-self: center; font-size: 14px; }
.ws-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1360px; width: 100%; margin-inline: auto; }
.blk { border: 2px solid var(--tnb-ink); border-radius: var(--r-card); padding: 18px 20px; box-shadow: 4px 4px 0 var(--tnb-ink); display: flex; flex-direction: column; gap: 4px; color: var(--tnb-ink); min-width: 0; }
.blk h3 { font: 400 26px/32px var(--f-display); }
.blk p { font-size: 14px; line-height: 20px; }

/* ---------- animaciones (solo si la persona no pidió menos movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ws-logo .mark { animation: stamp .7s cubic-bezier(.2, 1.4, .4, 1) both; }
  .ws-hello { animation: hello .6s .35s ease-out both; }
  .ws-seal { animation: spin 48s linear infinite; }
  .tape { animation: tape .5s .2s ease-out both; }
  .blk { transition: transform .15s ease, box-shadow .15s ease; }
  .blk:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tnb-ink); }
  .drawer { animation: slide .22s ease-out; }
  .drawer-bg { animation: fundido .22s ease-out; }
  .toast { animation: pop .2s ease-out; }
  @keyframes stamp { from { transform: scale(.9) rotate(-2deg); } }
  @keyframes hello { from { transform: rotate(-14deg) translateY(10px); } }
  @keyframes tape { from { transform: rotate(-3deg) translateX(-16px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes slide { from { transform: translateX(24px); opacity: .4; } }
  @keyframes fundido { from { opacity: 0; } }
  @keyframes pop { from { transform: translate(-50%, 8px); opacity: 0; } }
}

/* ---------- pantallas medianas y teléfono ---------- */
@media (max-width: 1000px) {
  .ws-stage { grid-template-columns: minmax(0, 1fr); }
  .ws-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .setup { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .threads { border-right: 0; }
  .items { max-height: 60vh; }
  .inbox.con-chat .threads { display: none; }
  .inbox:not(.con-chat) .chat { display: none; }
  .inbox .chat { height: calc(100vh - 220px); min-height: 460px; }
  .chat-h .volver { display: inline-flex; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); z-index: 10; gap: 0; overflow: visible; }
  .brand, .side-foot { display: none; }
  .nav { flex-direction: row; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav a { flex-direction: column; gap: 2px; font-size: 11px; line-height: 14px; padding: 6px 8px; flex: 1 0 64px; align-items: center; text-align: center; position: relative; white-space: nowrap; }
  .nav .count { position: absolute; top: 2px; right: 10px; margin: 0; }
  .view { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: 20px; gap: 20px; }
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .franja { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 16px; }
  .msg { max-width: 88%; }
  h1 { font-size: 28px; line-height: 36px; }
  .kpi .big { font-size: 32px; line-height: 40px; }
  .card { padding: 16px; }
  .search { max-width: 100%; width: 100%; }
  .head-acciones { width: 100%; }
  .todo-row { grid-template-columns: auto minmax(0, 1fr); }
  .todo-row > :last-child { grid-column: 2; justify-self: start; }
  .note { grid-template-columns: auto minmax(0, 1fr); }
  .note-acciones { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; }
  .kv { grid-template-columns: 96px minmax(0, 1fr); }
  .inbox .chat { height: calc(100vh - 230px); }
}
@media (max-width: 520px) {
  .ws { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); gap: 24px; }
  .ws-band { grid-template-columns: minmax(0, 1fr); }
  .ws-logo { padding: 36px 0 28px; }
  .ws-seal { right: 0; }
  .ws-cta { width: 100%; }
  .ws-cta .btn { flex: 1 1 100%; white-space: normal; }
  .week { gap: 6px; }
  .btn { white-space: normal; text-align: center; }
  .btn-sm { white-space: nowrap; }
  .step { grid-template-columns: 32px minmax(0, 1fr); }
  .step > :last-child:not(div) { grid-column: 2; justify-self: start; }
}

/* ---------- página de venta (debajo del póster de bienvenida) ---------- */
.ws-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ws-nav a { color: var(--tnb-ink); text-decoration: none; }
.ws-nav a:hover { color: var(--tnb-raspberry); }
.landing { max-width: 1360px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 96px; padding-top: 96px; }
.ld { display: grid; gap: 40px 64px; align-items: center; }
.ld h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.ld-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ld-copy p { font-size: 17px; line-height: 27px; color: var(--tnb-graphite); max-width: 58ch; }
.ld-head { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.ld-head p { color: var(--tnb-graphite); font-size: 17px; }
.ld-sticker { position: absolute; width: clamp(120px, 14vw, 190px); }
.tape.sky { background: var(--tnb-sky); }
.tape.pink { background: var(--tnb-pink); }
.ia-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--tnb-ink); color: var(--tnb-cream); border-radius: var(--r-pill); padding: 8px 16px; font: 800 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; align-self: flex-start; }
.ia-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--tnb-lime); box-shadow: 0 0 0 4px rgba(180,204,100,.35); }

.ld-ia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ld-chat { position: relative; padding: 32px 0; }
.chat-demo { background: #fff; border: 1px solid var(--tnb-border); border-radius: var(--r-card); box-shadow: var(--sh-float); padding: 22px; display: flex; flex-direction: column; gap: 12px; background-image: url(/assets/marca/fondo-lila.jpg); background-size: cover; }
.msg-demo { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 21px; background: #fff; }
.msg-demo small { display: block; font: 800 10px/14px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.msg-demo.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-demo.bot { align-self: flex-end; background: var(--tnb-ink); color: var(--tnb-cream); border-bottom-right-radius: 4px; }
.msg-demo.ok { align-self: flex-end; background: var(--tnb-lime); border: 2px solid var(--tnb-ink); box-shadow: 4px 4px 0 var(--tnb-ink); font-weight: 700; }
.msg-demo.ok small { margin: 4px 0 0; opacity: .8; }
.ld-chat .ld-sticker { right: -20px; bottom: -10px; transform: rotate(-8deg); }
.ld-pasos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ld-pasos li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--tnb-border); border-radius: var(--r-card); padding: 12px 16px; }
.ld-pasos b { font: 400 34px/1 var(--f-display); color: var(--tnb-raspberry); text-align: center; }
.ld-pasos span { font-weight: 700; }
.ld-pasos small { display: block; font-weight: 400; color: var(--tnb-graphite); font-size: 14px; line-height: 20px; }

.ld-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.aud { border: 2px solid var(--tnb-ink); border-radius: var(--r-card); overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--tnb-ink); display: flex; flex-direction: column; }
.aud-foto { aspect-ratio: 16 / 9; overflow: hidden; }
.aud-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aud-txt { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aud-txt h3 { font: 400 30px/36px var(--f-display); }
.aud-txt p { color: var(--tnb-graphite); line-height: 24px; }

.ld-somos { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.somos-foto { position: relative; }
.somos-foto > img:first-child { width: 100%; border-radius: var(--r-card); border: 2px solid var(--tnb-ink); box-shadow: 8px 8px 0 var(--tnb-pink); display: block; }
.somos-sticker { left: -24px; bottom: -24px; transform: rotate(-8deg); }
.somos-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.somos-datos div { background: var(--tnb-blush); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.somos-datos b { font: 400 34px/40px var(--f-display); font-variant-numeric: tabular-nums; }
.somos-datos span { font-size: 13px; line-height: 18px; color: var(--tnb-graphite); }

.ld-planes { grid-template-columns: 1fr; }
.planes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan-ld { background: #fff; border: 1px solid var(--tnb-border); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-card); }
.plan-ld.is-hero { border: 2px solid var(--tnb-ink); box-shadow: 6px 6px 0 var(--tnb-pink); }
.plan-ld h3 { font: 400 28px/34px var(--f-display); }
.plan-ld .precio { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.plan-ld .precio b { font: 400 48px/52px var(--f-display); }
.plan-ld .precio span { font: 700 20px/1 var(--f-ui); }
.plan-ld .precio small { font: 600 14px/20px var(--f-ui); color: var(--tnb-gray); margin-left: 4px; }
.plan-ld > p { color: var(--tnb-graphite); font-size: 15px; }
.plan-ld ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.plan-ld li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.plan-ld li::before { content: ""; width: 10px; height: 10px; margin-top: 5px; border-radius: 3px; background: var(--tnb-lime); }
.plan-ld .btn { margin-top: auto; justify-content: center; }
.plan-ld .badge { align-self: flex-start; }
.ld-nota { text-align: center; color: var(--tnb-raspberry); font-size: 18px; }

.ld-faq { grid-template-columns: 1fr; }
.faq { max-width: 820px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--tnb-border); border-radius: var(--r-card); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--f-display); color: var(--tnb-raspberry); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--tnb-graphite); line-height: 24px; }

.ld-cierre { position: relative; grid-template-columns: 1fr; text-align: center; justify-items: center; background: var(--tnb-blush); border-radius: var(--r-card); padding: 56px 24px; gap: 14px; }
.ld-cierre h2 { font-size: clamp(36px, 5vw, 60px); }
.ld-cierre p { color: var(--tnb-graphite); font-size: 17px; }
.cierre-sticker { right: 24px; top: -30px; transform: rotate(10deg); }
.ld-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tnb-graphite); padding: 24px 0 8px; border-top: 1px solid var(--tnb-border); }
.ld-foot a { color: inherit; }

@media (max-width: 1000px) {
  .ld-ia, .ld-somos { grid-template-columns: 1fr; }
  .planes-grid { grid-template-columns: 1fr; }
  .ld-dos { grid-template-columns: 1fr; }
  .landing { gap: 64px; padding-top: 64px; }
}
@media (max-width: 520px) {
  .somos-datos { grid-template-columns: 1fr; }
  .ws-nav { display: none; }
}

/* ---------- video de 20 segundos ---------- */
.ld-video { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.video-marco { width: min(420px, 100%); margin-inline: auto; border: 2px solid var(--tnb-ink); border-radius: var(--r-card); overflow: hidden; box-shadow: 8px 8px 0 var(--tnb-pink); background: var(--tnb-cream); }
.video-marco video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 1000px) { .ld-video { grid-template-columns: 1fr; } }

/* ---------- Entrena a tu agente (módulo entrenamiento) ---------- */
.setup.entrenar { grid-template-columns: minmax(0, 1fr); max-width: 880px; gap: 16px; }
.entrenar .welcome { gap: 12px; }
.entrenar .welcome .field { max-width: 280px; }
.entrenar #entrenar-paso { display: flex; flex-direction: column; gap: 16px; }
.entrenar #entrenar-paso h2 { margin-top: 2px; }
.entrenar .entrenar-pie { justify-content: space-between; }
.entrenar [data-guardado] { font-size: 13px; font-weight: 600; color: var(--tnb-gray); margin-inline: auto; }
.entrenar button.step { width: 100%; background: none; border: 0; border-top: 1px solid var(--tnb-border); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.entrenar button.step:first-child { border-top: 0; }
.entrenar .entrenar-resumen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.entrenar .entrenar-cierre { align-items: center; text-align: center; }
.entrenar .entrenar-pct { font: 400 56px/1 var(--f-display); }
.entrenar .entrenar-sticker { width: 150px; max-width: 60%; transform: rotate(-6deg); }
.pasos { display: flex; flex-wrap: wrap; gap: 8px; }
.pasos .dot { background: var(--tnb-white); color: var(--tnb-ink); cursor: pointer; padding: 0; font: 800 14px/1 var(--f-ui); }
.pasos .dot.done { background: var(--tnb-lime); border-color: var(--tnb-lime); }
.pasos .dot.is-active { background: var(--tnb-ink); border-color: var(--tnb-ink); color: var(--tnb-cream); }
@media (max-width: 720px) {
  .entrenar .entrenar-resumen { grid-template-columns: minmax(0, 1fr); }
  .pasos { gap: 6px; }
  .pasos .dot { width: 30px; height: 30px; }
}

/* ---------- página de venta: los 9 pasos de entrenamiento ---------- */
.ld-entrena { grid-template-columns: 1fr; }
.pasos-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pasos-grid li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; background: #fff; border: 1px solid var(--tnb-border); border-radius: var(--r-card); padding: 16px 18px; }
.pasos-grid li b { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--tnb-pink); display: grid; place-items: center; font: 400 20px/1 var(--f-display); }
.pasos-grid li span { font-weight: 700; }
.pasos-grid li small { font-size: 13px; line-height: 19px; color: var(--tnb-graphite); }
.pasos-grid li.is-hero { border: 2px solid var(--tnb-ink); box-shadow: 4px 4px 0 var(--tnb-raspberry); }
.pasos-grid li.is-hero b { background: var(--tnb-raspberry); color: #fff; }
@media (max-width: 1000px) { .pasos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pasos-grid { grid-template-columns: 1fr; } }

/* ---------- reporte diario ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tnb-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font: 700 14px/20px var(--f-ui); color: var(--tnb-gray); white-space: nowrap; }
.tab:hover { color: var(--tnb-ink); }
.tab.is-active { color: var(--tnb-ink); border-bottom-color: var(--tnb-ink); }
.reporte-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; background: var(--tnb-cream-surface); border-style: dashed; border-color: var(--tnb-pink); }
.reporte-franja .hand { font-size: 20px; line-height: 28px; flex: none; }
.reporte-franja p:not(.hand) { flex: 1 1 320px; color: var(--tnb-graphite); }
.reporte-suc { display: flex; flex-direction: column; gap: 20px; }
.reporte-suc .kpi.card { background: var(--tnb-cream); box-shadow: none; padding: 14px 16px; }
.reporte-seccion { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--tnb-border); padding-top: 16px; }
.reporte-suc > .reporte-seccion:first-child, .reporte-suc > h2 + .kpis + .reporte-seccion { border-top: 0; padding-top: 0; }
.reporte-seccion .todo-row:first-of-type { border-top: 0; }
.reporte-tiempos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 24px; }
.reporte-tiempos > div { display: flex; flex-direction: column; gap: 4px; }
.reporte-tiempos b { font: 400 24px/32px var(--f-display); }
.reporte-estados { display: flex; flex-wrap: wrap; gap: 8px; }
.reporte-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.reporte-lista li { line-height: 24px; }
.reporte-comentarios { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.reporte-ayer { display: flex; flex-direction: column; gap: 12px; }
.reporte-ayer .kpis-chicos .big { font-size: 24px; line-height: 32px; }
.reporte-ajustes { max-width: 720px; }