/* ===================================================================
   Belo ERP — estilos
   Paleta "tocador": tinta ciruela, papel rosado frío y el color de cada
   negocio (--marca) como esmalte. El color de marca cambia por negocio.
   =================================================================== */
:root {
  --tinta: #2a1b2e;
  --tinta-2: #4a3a4e;
  --suave: #75657a;
  --papel: #faf6f8;
  --blanco: #ffffff;
  --linea: #eadfeb;
  --linea-fuerte: #d6c6d8;
  --marca: #a8326e;
  --marca-claro: color-mix(in srgb, var(--marca) 12%, white);
  --marca-medio: color-mix(in srgb, var(--marca) 30%, white);
  --marca-oscuro: color-mix(in srgb, var(--marca) 75%, black);
  --ok: #2f7a55;
  --ok-claro: #e3f2ea;
  --alerta: #a5600f;
  --alerta-claro: #fbefdc;
  --error: #b42335;
  --error-claro: #fbe5e8;
  --r-chico: 8px;
  --r: 14px;
  --r-grande: 22px;
  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(42, 27, 46, .06), 0 8px 24px -12px rgba(42, 27, 46, .18);
  --ancho: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--fuente); font-size: 16px; line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; outline: none; }
img { max-width: 100%; display: block; }
a { color: var(--marca-oscuro); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
small, .chico { font-size: .85rem; }
.suave { color: var(--suave); }
.centro { text-align: center; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--marca-medio); outline-offset: 2px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.angosto { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.seccion { padding: 32px 0 56px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.pila > * + * { margin-top: 12px; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.separa { height: 1px; background: var(--linea); margin: 20px 0; border: 0; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
}
.barra .contenedor { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.marca-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.marca-logo img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.logo-belo { width: 30px; height: 30px; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.barra nav a.enlace { text-decoration: none; color: var(--tinta-2); padding: 8px 10px; border-radius: var(--r-chico); font-weight: 500; }
.barra nav a.enlace:hover { background: var(--marca-claro); }
.carrito-pastilla { position: relative; }
.carrito-pastilla b { position: absolute; top: -4px; right: -6px; background: var(--marca); color: #fff; border-radius: 99px; font-size: .7rem; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 640px) { .barra nav a.solo-escritorio { display: none; } }

/* ---------- Botones y formularios ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .95rem/1 var(--fuente); padding: 12px 18px; min-height: 44px;
  border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--marca); color: #fff; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--marca-oscuro); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.sec { background: var(--blanco); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn.sec:hover { border-color: var(--tinta-2); background: var(--blanco); }
.btn.fantasma { background: transparent; color: var(--tinta-2); padding: 8px 12px; min-height: 36px; }
.btn.fantasma:hover { background: var(--marca-claro); }
.btn.peligro { background: var(--error); }
.btn.peligro:hover { background: #8f1a29; }
.btn.chico { padding: 7px 12px; min-height: 34px; font-size: .85rem; }
.btn.bloque { width: 100%; }
.btn.tinta { background: var(--tinta); }
.btn.tinta:hover { background: #000; }

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.campo { margin-bottom: 14px; }
.campo .ayuda { font-weight: 400; color: var(--suave); font-size: .82rem; margin-top: 4px; }
input, select, textarea {
  width: 100%; font: 400 1rem var(--fuente); color: var(--tinta);
  padding: 11px 12px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); background: var(--blanco);
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-claro); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--marca); }
input[type=color] { padding: 2px; height: 44px; width: 64px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.dos-col { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .dos-col { grid-template-columns: 1fr; } }
.prefijo { display: flex; align-items: stretch; }
.prefijo span { padding: 11px 10px; border: 1.5px solid var(--linea-fuerte); border-right: 0; border-radius: var(--r-chico) 0 0 var(--r-chico); background: var(--papel); color: var(--suave); white-space: nowrap; }
.prefijo input { border-radius: 0 var(--r-chico) var(--r-chico) 0; }

/* ---------- Superficies ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px; }
.tarjeta.plana { border: 0; background: transparent; padding: 0; }
.tarjeta h3 { margin-bottom: 4px; }
.aviso { border-radius: var(--r); padding: 14px 16px; background: var(--marca-claro); border: 1px solid var(--marca-medio); }
.aviso.alerta { background: var(--alerta-claro); border-color: #efd3a8; }
.aviso.error { background: var(--error-claro); border-color: #f2bcc4; }
.aviso.ok { background: var(--ok-claro); border-color: #bfe0cd; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linea); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-claro); color: var(--ok); border-color: #bfe0cd; }
.etiqueta.alerta { background: var(--alerta-claro); color: var(--alerta); border-color: #efd3a8; }
.etiqueta.error { background: var(--error-claro); color: var(--error); border-color: #f2bcc4; }
.etiqueta.marca { background: var(--marca-claro); color: var(--marca-oscuro); border-color: var(--marca-medio); }
.vacio { text-align: center; padding: 40px 16px; color: var(--suave); border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r); }
.vacio .btn { margin-top: 12px; }

/* ---------- Página de inicio (plataforma) ---------- */
.portada { padding: 48px 0 40px; }
.portada .contenedor { display: grid; gap: 40px; grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 880px) { .portada .contenedor { grid-template-columns: 1fr; } }
.portada h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.03em; }
.portada .bajada { font-size: 1.15rem; color: var(--tinta-2); max-width: 34em; }
.portada .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.giros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.giros span { font-size: .85rem; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--linea-fuerte); color: var(--tinta-2); }

/* El objeto memorable: una "tarjeta de agenda" viva en la portada */
.agenda-viva { background: var(--tinta); color: #f3e9f4; border-radius: 28px; padding: 22px; position: relative; overflow: hidden; }
.agenda-viva::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 200px; height: 200px; border-radius: 50%; background: var(--marca); opacity: .35; filter: blur(30px); }
.agenda-viva .encabezado { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.agenda-viva h3 { color: #fff; margin: 0; }
.agenda-viva .dias { display: flex; gap: 6px; margin-bottom: 14px; }
.agenda-viva .dias span { flex: 1; text-align: center; padding: 8px 0; border-radius: 12px; background: rgba(255,255,255,.07); font-size: .8rem; }
.agenda-viva .dias span b { display: block; font-family: var(--display); font-size: 1.15rem; color: #fff; }
.agenda-viva .dias span.hoy { background: var(--marca); }
.agenda-viva .linea-cita { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .92rem; position: relative; z-index: 1; }
.agenda-viva .linea-cita .hora-txt { font-family: var(--display); font-weight: 700; color: #fff; }
.agenda-viva .linea-cita .estado { font-size: .75rem; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.agenda-viva .linea-cita.nueva { animation: entrar-cita .7s cubic-bezier(.2,.8,.2,1) 1s both; }
.agenda-viva .linea-cita.nueva .estado { background: var(--marca); color: #fff; }
@keyframes entrar-cita { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .agenda-viva .linea-cita.nueva { animation: none; } }

.video-demo { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: var(--r-grande); background: var(--tinta); }
.funciones { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.funciones h3 { font-size: 1.05rem; margin-bottom: 4px; }
.funciones p { color: var(--tinta-2); margin: 0; }
.funcion-icono { width: 36px; height: 36px; border-radius: 10px; background: var(--marca-claro); color: var(--marca-oscuro); display: grid; place-items: center; margin-bottom: 10px; }
.planes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 760px; }
.plan { border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-grande); padding: 24px; background: var(--blanco); }
.plan.destacado { border-color: var(--tinta); box-shadow: var(--sombra); }
.plan .precio { font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.plan .precio small { font-family: var(--fuente); font-size: .95rem; font-weight: 500; color: var(--suave); }
.pie { border-top: 1px solid var(--linea); padding: 28px 0; color: var(--suave); font-size: .9rem; }

/* ---------- Página pública del negocio ---------- */
.negocio-portada { height: 210px; background: var(--marca) center/cover; position: relative; }
.negocio-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,27,46,.55), transparent 60%); }
.negocio-cabecera { margin-top: -54px; position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.negocio-cabecera .logo { width: 104px; height: 104px; border-radius: 26px; border: 4px solid var(--papel); background: var(--marca) center/cover; display: grid; place-items: center; color: #fff; font-family: var(--display); font-size: 2.4rem; font-weight: 800; flex-shrink: 0; }
.negocio-cabecera h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }
.estrellas { color: #c98a00; letter-spacing: 1px; white-space: nowrap; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--linea); margin: 20px 0 22px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a, .pestanas button { padding: 12px 14px; text-decoration: none; color: var(--suave); font-weight: 600; white-space: nowrap; border: 0; background: none; border-bottom: 2.5px solid transparent; cursor: pointer; font-size: .95rem; font-family: var(--fuente); }
.pestanas .activa { color: var(--tinta); border-bottom-color: var(--marca); }

.servicio { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.servicio:last-child { border-bottom: 0; }
.servicio .info { flex: 1; min-width: 0; }
.servicio .precio { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.servicio .miniatura { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.categoria-titulo { margin: 26px 0 2px; font-size: 1rem; color: var(--suave); font-family: var(--fuente); font-weight: 600; }

.pro-tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.pro-tarjeta:hover { border-color: var(--marca-medio); }
.pro-tarjeta .foto { aspect-ratio: 4/3.4; background: var(--marca-claro) center/cover; display: grid; place-items: center; font-family: var(--display); font-size: 3rem; color: var(--marca); font-weight: 800; }
.pro-tarjeta .cuerpo { padding: 14px 16px 16px; }
.pro-tarjeta h3 { margin: 0 0 2px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--marca-claro) center/cover; display: inline-grid; place-items: center; color: var(--marca-oscuro); font-weight: 700; flex-shrink: 0; }
.avatar.grande { width: 120px; height: 120px; font-size: 2.6rem; font-family: var(--display); }
.galeria { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.galeria figure { margin: 0; position: relative; }
.galeria img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; width: 100%; cursor: zoom-in; }
.galeria figcaption { font-size: .8rem; color: var(--suave); margin-top: 4px; }
.galeria .quitar { position: absolute; top: 6px; right: 6px; }

.producto { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.producto .foto { aspect-ratio: 1; background: var(--papel) center/cover; }
.producto .cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.producto .cuerpo .btn { margin-top: auto; }
.producto .precio { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }

.promo { display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.promo .foto { background: var(--marca) center/cover; min-height: 120px; }
.promo .cuerpo { padding: 14px 14px 14px 0; }
.cupon { display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--marca); color: var(--marca-oscuro); background: var(--marca-claro); padding: 6px 12px; border-radius: 10px; font-weight: 700; letter-spacing: .04em; cursor: pointer; font-family: ui-monospace, Menlo, monospace; }

.resena { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.resena .respuesta { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--marca-medio); background: var(--blanco); border-radius: 0 10px 10px 0; font-size: .92rem; }

/* ---------- Reservar ---------- */
.pasos { display: flex; gap: 6px; margin-bottom: 20px; }
.pasos span { flex: 1; height: 4px; border-radius: 4px; background: var(--linea); }
.pasos span.hecho { background: var(--marca); }
.opcion { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--r); padding: 14px; cursor: pointer; font: inherit; color: inherit; margin-bottom: 10px; }
.opcion:hover { border-color: var(--marca-medio); }
.opcion.elegida { border-color: var(--marca); background: var(--marca-claro); }
.opcion .info { flex: 1; min-width: 0; }
.dias-tira { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scroll-snap-type: x mandatory; }
.dia { flex: 0 0 64px; scroll-snap-align: start; text-align: center; padding: 10px 0; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--blanco); cursor: pointer; font: inherit; color: inherit; }
.dia small { display: block; color: var(--suave); font-size: .75rem; text-transform: capitalize; }
.dia b { font-family: var(--display); font-size: 1.35rem; display: block; }
.dia.elegido { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.dia.elegido small { color: #e3d5e5; }
.dia:disabled { opacity: .35; cursor: default; }
/* Horarios como frascos de esmalte: el elemento con personalidad del producto */
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.hora { position: relative; padding: 14px 0 10px; border-radius: 12px 12px 18px 18px; border: 1.5px solid var(--linea-fuerte); background: var(--blanco); cursor: pointer; font: 600 .95rem var(--fuente); color: var(--tinta); }
.hora::before { content: ""; position: absolute; top: -1.5px; left: 50%; transform: translateX(-50%); width: 34%; height: 6px; border-radius: 0 0 4px 4px; background: var(--linea-fuerte); }
.hora:hover { border-color: var(--marca); }
.hora:hover::before { background: var(--marca); }
.hora.elegida { background: var(--marca); color: #fff; border-color: var(--marca); }
.hora.elegida::before { background: var(--marca-oscuro); }
.resumen-cita { display: grid; gap: 4px 12px; grid-template-columns: auto 1fr; font-size: .95rem; }
.resumen-cita dt { color: var(--suave); }
.resumen-cita dd { margin: 0; font-weight: 600; }
.miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.miniaturas img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.subir-caja { border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r); padding: 16px; text-align: center; color: var(--suave); cursor: pointer; display: block; font-weight: 500; }
.subir-caja:hover { border-color: var(--marca); color: var(--marca-oscuro); }

/* ---------- Carrito ---------- */
.linea-carrito { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.linea-carrito img, .linea-carrito .ph { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--papel); }
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--linea-fuerte); border-radius: 99px; }
.cantidad button { border: 0; background: none; width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; color: var(--tinta); }
.cantidad span { min-width: 22px; text-align: center; font-weight: 600; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-top: 12px; }
.totales .grande { font-family: var(--display); font-size: 1.4rem; font-weight: 800; }

/* ---------- Panel del negocio ---------- */
.panel { display: grid; grid-template-columns: 236px 1fr; min-height: calc(100vh - 61px); }
.panel-menu { border-right: 1px solid var(--linea); padding: 18px 12px; background: var(--blanco); position: sticky; top: 61px; height: calc(100vh - 61px); overflow-y: auto; }
.panel-menu .negocio-actual { display: flex; gap: 10px; align-items: center; padding: 4px 8px 16px; border-bottom: 1px solid var(--linea); margin-bottom: 10px; }
.panel-menu .negocio-actual .mini-logo { width: 38px; height: 38px; border-radius: 11px; background: var(--marca) center/cover; color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--display); flex-shrink: 0; }
.panel-menu .negocio-actual b { display: block; line-height: 1.2; }
.panel-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.panel-menu a:hover { background: var(--papel); }
.panel-menu a.activa { background: var(--marca-claro); color: var(--marca-oscuro); font-weight: 700; }
.panel-menu .grupo { margin: 14px 10px 4px; font-size: .78rem; color: var(--suave); font-weight: 600; }
.panel-contenido { padding: 24px 28px 64px; min-width: 0; }
.panel-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-titulo h1 { font-size: 1.7rem; margin: 0; }
.icono { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
  .panel-menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 25; border-right: 0; border-top: 1px solid var(--linea); padding: 6px; display: flex; overflow-x: auto; gap: 2px; }
  .panel-menu .negocio-actual, .panel-menu .grupo { display: none; }
  .panel-menu a { flex-direction: column; gap: 2px; font-size: .7rem; padding: 6px 10px; white-space: nowrap; }
  .panel-contenido { padding: 18px 16px 96px; }
}
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; }
.kpi span { color: var(--suave); font-size: .85rem; }
.kpi b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }

.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-weight: 600; color: var(--suave); background: var(--papel); font-size: .82rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: var(--papel); }

/* Agenda del día */
.agenda { display: grid; gap: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow-x: auto; }
.agenda-cols { display: grid; min-width: max-content; }
.agenda-col-titulo { position: sticky; top: 0; background: var(--papel); padding: 10px; font-weight: 700; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.agenda-horas { font-size: .75rem; color: var(--suave); text-align: right; padding-right: 6px; }
.agenda-celda { border-left: 1px solid var(--linea); position: relative; }
.agenda-linea { border-top: 1px solid var(--linea); }
.bloque-cita { position: absolute; left: 4px; right: 4px; border-radius: 10px; padding: 6px 8px; font-size: .8rem; line-height: 1.25; overflow: hidden; cursor: pointer; background: var(--marca-claro); border-left: 4px solid var(--marca); color: var(--tinta); text-align: left; border-top: 0; border-right: 0; border-bottom: 0; font-family: var(--fuente); }
.bloque-cita b { display: block; }
.bloque-cita.pendiente { background: var(--alerta-claro); border-left-color: var(--alerta); }
.bloque-cita.completada { background: var(--ok-claro); border-left-color: var(--ok); }
.bloque-cita.no_asistio { background: #eee; border-left-color: #999; text-decoration: line-through; }
.bloque-bloqueo { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #f3edf3, #f3edf3 6px, #e9e0ea 6px, #e9e0ea 12px); font-size: .75rem; color: var(--suave); padding: 4px 6px; }
.lista-citas .cita-fila { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linea); background: var(--blanco); }
.lista-citas .cita-fila:first-child { border-radius: var(--r) var(--r) 0 0; }
.lista-citas .cita-fila:last-child { border-bottom: 0; border-radius: 0 0 var(--r) var(--r); }
.lista-citas { border: 1px solid var(--linea); border-radius: var(--r); }
.lista-citas .hora-grande { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

.barras { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 10px 0 0; }
.barras div { flex: 1; background: var(--marca); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.barras div:hover { background: var(--marca-oscuro); }
.barras-ejes { display: flex; gap: 3px; font-size: .68rem; color: var(--suave); }
.barras-ejes span { flex: 1; text-align: center; }

.colores { display: flex; gap: 8px; flex-wrap: wrap; }
.colores button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--linea-fuerte); cursor: pointer; }
.colores button.elegido { box-shadow: 0 0 0 2.5px var(--tinta); }

/* ---------- Modal y toasts ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(42, 27, 46, .45); z-index: 60; display: grid; place-items: center; padding: 16px; animation: aparecer .15s; }
.modal { background: var(--blanco); border-radius: var(--r-grande); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; box-shadow: var(--sombra); }
.modal.ancho { max-width: 760px; }
.modal-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-cabeza h2 { font-size: 1.35rem; margin: 0; }
.modal-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 560px) { .modal-fondo { place-items: end center; padding: 0; } .modal { border-radius: var(--r-grande) var(--r-grande) 0 0; max-height: 92vh; } }
@keyframes aparecer { from { opacity: 0; } }
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--sombra); font-weight: 500; animation: aparecer .2s; }
.toast.error { background: var(--error); }
.toast.ok { background: var(--ok); }
@media (max-width: 900px) { body.en-panel #toasts { bottom: 84px; } }
.visor { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 90; display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.visor img { max-height: 90vh; border-radius: 12px; }

.spinner { width: 28px; height: 28px; border: 3px solid var(--linea); border-top-color: var(--marca); border-radius: 50%; animation: girar .8s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }
.cargando-pagina { display: grid; place-items: center; padding: 80px 0; }
.btn .spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }

/* Autenticación */
.auth-caja { max-width: 440px; margin: 40px auto; padding: 0 16px; }
.auth-caja .tarjeta { padding: 26px; }
.selector-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.selector-tipo button { padding: 12px; border-radius: var(--r); border: 1.5px solid var(--linea-fuerte); background: var(--blanco); cursor: pointer; font: 600 .92rem var(--fuente); color: var(--tinta-2); text-align: left; }
.selector-tipo button small { display: block; font-weight: 400; color: var(--suave); }
.selector-tipo button.elegido { border-color: var(--marca); background: var(--marca-claro); color: var(--tinta); }

@media print {
  .barra, .panel-menu, .no-imprimir, #toasts { display: none !important; }
  .panel { display: block; }
  body { background: #fff; }
}

/* Nombre del negocio siempre debajo de la portada (legible sobre fondo claro) */
.negocio-cabecera { align-items: flex-start; }
.negocio-cabecera > div:not(.logo) { padding-top: 62px; }
@media (max-width: 640px) { .negocio-cabecera > .fila { padding-top: 0 !important; width: 100%; } .negocio-cabecera > .fila .btn { flex: 1; } }

/* Precio original tachado y comparativa */
.plan .precio-antes { color: var(--suave); font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin-bottom: -4px; }
.plan .precio-antes s { text-decoration-thickness: 2px; }
.comparativa { max-width: 760px; margin-top: 12px; }
.comparativa tr.destacada td { background: color-mix(in srgb, var(--marca) 9%, transparent); }
.selector-idioma { width: auto; padding: 4px 8px; font-size: .85rem; border-radius: 10px; margin-left: 6px; background: transparent; }