/* Smart Calendar · identidad «Cercano» de la familia Smart. Color del producto: miel #A16207. */
@font-face { font-family: Inter; src: url(/static/fonts/inter-variable-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Sora; src: url(/static/fonts/sora-variable-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #FBF6EE; --superficie: #FFFFFF; --superficie-2: #F5EEE3; --texto: #2A211C; --texto-2: #6B5E55; --borde: #E7DCCD;
  --boton: #C2410C; --boton-hover: #9A3412; --boton-texto: #FFFFFF; --marca: #F25C2A;
  --producto: #A16207; --producto-tinte: #FDF3D7; --producto-texto: #7A4A05;
  --ok: #15803D; --ok-tinte: #DCFCE7; --aviso: #B45309; --aviso-tinte: #FEF3C7; --error: #B91C1C; --error-tinte: #FEE2E2;
  --info: #1D4ED8; --info-tinte: #DBEAFE; --apagado: #78716C; --apagado-tinte: #F0EBE4;
  --radio: 14px; --radio-s: 9px; --sombra: 0 1px 2px rgb(42 33 28 / 6%), 0 4px 16px rgb(42 33 28 / 6%);
  --foco: 0 0 0 3px rgb(194 65 12 / 35%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #171310; --superficie: #211B17; --superficie-2: #2B241F; --texto: #F4EDE4; --texto-2: #BDAFA3; --borde: #3A312A;
    --boton: #EA580C; --boton-hover: #F97316; --producto: #E9A23B; --producto-tinte: #3A2A0E; --producto-texto: #F3C878;
    --ok-tinte: #12321E; --ok: #4ADE80; --aviso-tinte: #3A2A0B; --aviso: #FBBF24; --error-tinte: #3B1414; --error: #F87171;
    --info-tinte: #172554; --info: #93C5FD; --apagado-tinte: #2B2622; --apagado: #A8A29E; color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 Inter, system-ui, sans-serif; }
h1, h2, h3, .titulo { font-family: Sora, Inter, sans-serif; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; } a { color: var(--boton); text-underline-offset: 2px; } a:hover { color: var(--boton-hover); }
img, svg { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 14px; border-radius: 8px; z-index: 99; }
.saltar:focus { left: 8px; }
.suave { color: var(--texto-2); } .chico { font-size: .875rem; } .grande { font-size: 1.15rem; }
.oculto, [hidden] { display: none !important; }

/* ---------- botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: .55em 1.15em; border-radius: 999px;
  border: 1px solid transparent; font: 600 .95rem/1 Inter, sans-serif; cursor: pointer; text-decoration: none; background: var(--boton); color: var(--boton-texto); }
.btn:hover { background: var(--boton-hover); color: var(--boton-texto); }
.btn.sec { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.btn.sec:hover { background: var(--superficie-2); }
.btn.fantasma { background: transparent; color: var(--texto); }
.btn.fantasma:hover { background: var(--superficie-2); }
.btn.peligro { background: var(--error); }
.btn.chico { min-height: 36px; padding: .4em .9em; font-size: .875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- tarjetas y grillas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta h2 { display: flex; align-items: center; gap: .5rem; }
.grilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cifra { font: 700 1.9rem/1.1 Sora, sans-serif; }
.cifra small { font: 500 .85rem Inter, sans-serif; color: var(--texto-2); display: block; margin-top: .3rem; }
.pila > * + * { margin-top: .75rem; }
.fila { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }

/* ---------- formularios */
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 .3rem; }
.campo { margin-bottom: .9rem; }
.ayuda { font-size: .85rem; color: var(--texto-2); margin-top: .25rem; font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=search], input[type=url], input[type=datetime-local], select, textarea {
  width: 100%; min-height: 44px; padding: .55em .8em; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie);
  color: var(--texto); font: inherit; }
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--boton); }
input[aria-invalid="true"] { border-color: var(--error); }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.casilla input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--boton); }
.form-fila { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .3rem; }

/* ---------- avisos e insignias */
.aviso { border-radius: var(--radio-s); padding: .75rem 1rem; margin: 0 0 1rem; background: var(--info-tinte); color: var(--texto); border-left: 4px solid var(--info); }
.aviso.ok { background: var(--ok-tinte); border-color: var(--ok); } .aviso.alerta { background: var(--aviso-tinte); border-color: var(--aviso); }
.aviso.error { background: var(--error-tinte); border-color: var(--error); } .aviso.demo { background: var(--producto-tinte); border-color: var(--producto); }
.insignia { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--apagado-tinte); color: var(--apagado); white-space: nowrap; }
.insignia.ok, .e-confirmada, .e-completada, .p-pagado { background: var(--ok-tinte); color: var(--ok); }
.insignia.aviso, .e-solicitada, .p-por_cobrar, .p-enviado { background: var(--aviso-tinte); color: var(--aviso); }
.insignia.error, .e-inasistencia, .p-rechazado, .p-error { background: var(--error-tinte); color: var(--error); }
.insignia.info, .e-llego, .e-en_atencion { background: var(--info-tinte); color: var(--info); }
.insignia.producto { background: var(--producto-tinte); color: var(--producto-texto); }
.e-cancelada { text-decoration: line-through; }

/* ---------- tablas (se apilan en el teléfono) */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .6rem .55rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); font-weight: 600; }
tbody tr:hover { background: var(--superficie-2); }
@media (max-width: 720px) {
  table.apilada thead { display: none; }
  table.apilada tr { display: block; border: 1px solid var(--borde); border-radius: var(--radio-s); margin-bottom: .6rem; padding: .4rem .6rem; background: var(--superficie); }
  table.apilada td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; }
  table.apilada td::before { content: attr(data-t); font-weight: 600; color: var(--texto-2); font-size: .85rem; }
  table.apilada tr[hidden] { display: none; }
}
.vacio { text-align: center; padding: 2rem 1rem; color: var(--texto-2); }
.vacio .titulo { color: var(--texto); font-size: 1.05rem; }

/* ---------- estructura del sitio comercial */
.sitio-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 4vw, 2.5rem); max-width: 1180px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font: 700 1.25rem Sora, sans-serif; color: var(--texto); text-decoration: none; }
.logo svg { width: 34px; height: 34px; } .logo b { color: var(--producto); font-weight: 700; }
.nav-sitio { display: flex; gap: .2rem; align-items: center; flex-wrap: wrap; }
.nav-sitio a { color: var(--texto); text-decoration: none; padding: .5rem .75rem; border-radius: 999px; font-weight: 500; }
.nav-sitio a:hover { background: var(--superficie-2); }
.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.heroe { padding: clamp(2rem, 6vw, 5rem) 0 2.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: center; }
.heroe h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.heroe .bajada { font-size: 1.15rem; color: var(--texto-2); max-width: 36em; }
.seccion { padding: 2.5rem 0; }
.rubros { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rubro { display: block; text-decoration: none; color: var(--texto); }
.rubro:hover { border-color: var(--producto); }
.precio { font: 700 2rem Sora, sans-serif; } .precio small { font: 500 .9rem Inter; color: var(--texto-2); }
.plan.destacado { border: 2px solid var(--producto); }
.sitio-pie { border-top: 1px solid var(--borde); margin-top: 3rem; padding: 1.5rem 0 2.5rem; font-size: .875rem; color: var(--texto-2); }
.maqueta-chat { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 1rem; box-shadow: var(--sombra); }

/* ---------- panel del negocio */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral { background: var(--texto); color: #F4EDE4; padding: 1rem .7rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .logo { color: #fff; padding: .2rem .5rem 1rem; } .lateral .logo b { color: #F3C878; }
.lateral nav a { display: flex; align-items: center; gap: .65rem; color: #E8DED3; text-decoration: none; padding: .6rem .7rem; border-radius: 10px; font-weight: 500; font-size: .95rem; }
.lateral nav a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.lateral nav a[aria-current="page"] { background: rgb(243 200 120 / 18%); color: #fff; }
.lateral nav svg { width: 20px; height: 20px; flex: none; opacity: .9; }
.lateral .negocio-sel { width: 100%; margin: 0 0 .8rem; background: rgb(255 255 255 / 8%); color: #fff; border-color: rgb(255 255 255 / 15%); }
.lateral .negocio-sel option { color: #000; }
.principal { min-width: 0; }
.barra { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding: .7rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--borde);
  background: var(--fondo); position: sticky; top: 0; z-index: 5; }
.barra .menu-btn { display: none; }
.contenido { padding: 1.3rem clamp(1rem, 3vw, 2rem) 4rem; max-width: 1280px; }
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.cabeza h1 { margin: 0; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 270px; transform: translateX(-100%); transition: transform .2s; z-index: 30; }
  .app.menu-abierto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 35%); }
  .barra .menu-btn { display: inline-flex; }
}

/* ---------- agenda */
.agenda-controles { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.agenda { display: grid; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: auto; position: relative; }
.agenda .col-horas { position: sticky; left: 0; background: var(--superficie); z-index: 2; border-right: 1px solid var(--borde); }
.agenda .hora { height: 48px; font-size: .75rem; color: var(--texto-2); padding: 2px 6px; border-top: 1px solid var(--borde); }
.agenda .columna { position: relative; min-width: 150px; border-right: 1px solid var(--borde); }
.agenda .cab-col { position: sticky; top: 0; background: var(--superficie-2); padding: .45rem .6rem; font-weight: 600; font-size: .88rem; border-bottom: 1px solid var(--borde); z-index: 1; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .franja { height: 48px; border-top: 1px dashed var(--borde); }
.agenda .franja.cerrado { background: repeating-linear-gradient(45deg, var(--superficie-2), var(--superficie-2) 6px, transparent 6px, transparent 12px); }
.bloque-cita { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 7px; font-size: .8rem; line-height: 1.25; overflow: hidden;
  background: var(--producto-tinte); border-left: 4px solid var(--producto); color: var(--texto); text-decoration: none; }
.bloque-cita:hover { filter: brightness(.97); color: var(--texto); }
.bloque-cita.e-solicitada { border-left-color: var(--aviso); background: var(--aviso-tinte); }
.bloque-cita.e-llego, .bloque-cita.e-en_atencion { border-left-color: var(--info); background: var(--info-tinte); }
.bloque-cita.e-completada { border-left-color: var(--ok); background: var(--ok-tinte); }
.bloque-cita.e-inasistencia { border-left-color: var(--error); background: var(--error-tinte); }
.bloque-cita.bloqueo { background: var(--apagado-tinte); border-left-color: var(--apagado); color: var(--texto-2); }
.bloque-cita.prueba { outline: 2px dashed var(--producto); }
.ahora-linea { position: absolute; left: 0; right: 0; height: 2px; background: var(--boton); z-index: 1; }
.lista-dia .item { display: grid; grid-template-columns: 70px 1fr auto; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); align-items: start; }
.lista-dia .item .h { font: 700 1rem Sora; }

/* ---------- pasos (alta y reserva pública) */
.pasos { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.2rem; flex-wrap: wrap; }
.pasos li { flex: 1 1 120px; padding: .5rem .7rem; border-radius: 10px; background: var(--superficie-2); font-size: .85rem; color: var(--texto-2); }
.pasos li[aria-current="step"] { background: var(--producto-tinte); color: var(--producto-texto); font-weight: 600; }
.pasos li.hecho { color: var(--ok); }
.opciones { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.opcion { display: block; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .8rem 1rem;
  cursor: pointer; font: inherit; color: var(--texto); }
.opcion:hover { border-color: var(--producto); }
.opcion[aria-pressed="true"], .opcion.elegida { border: 2px solid var(--producto); background: var(--producto-tinte); }
.opcion .nombre { font-weight: 600; display: block; } .opcion .det { font-size: .87rem; color: var(--texto-2); }
.horas { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.horas .opcion { text-align: center; padding: .6rem .4rem; }
.dias { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
.dias .opcion { flex: 0 0 76px; text-align: center; scroll-snap-align: start; padding: .55rem .3rem; }
.dias .opcion .n { font: 700 1.2rem Sora; display: block; }
.publico-cab { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.publico-cab .contenedor { display: flex; gap: 1rem; align-items: center; padding-top: 1rem; padding-bottom: 1rem; }
.avatar { width: 56px; height: 56px; border-radius: 16px; background: var(--producto-tinte); color: var(--producto-texto); display: grid; place-items: center; font: 700 1.4rem Sora; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.resumen-reserva { position: sticky; bottom: 0; background: var(--superficie); border-top: 1px solid var(--borde); padding: .75rem 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }

/* ---------- asistente (chat) */
.chat { display: flex; flex-direction: column; height: min(72vh, 680px); }
.chat .mensajes { flex: 1; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .6rem; }
.burbuja { max-width: min(85%, 560px); padding: .65rem .9rem; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; }
.burbuja.usuario { align-self: flex-end; background: var(--producto-tinte); border-bottom-right-radius: 4px; }
.burbuja.asistente { align-self: flex-start; background: var(--superficie-2); border-bottom-left-radius: 4px; }
.burbuja .acciones { margin-top: .6rem; }
.chat form { display: flex; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--borde); }
.chat form textarea { min-height: 48px; height: 48px; }
.grabando { animation: pulso 1s infinite; } @keyframes pulso { 50% { opacity: .5; } }
.escribiendo::after { content: "…"; animation: pulso 1s infinite; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- consola */
.consola .lateral { background: #1F2937; } .consola .lateral .logo b { color: #FCD34D; }
.impacto-4 { border-left: 4px solid var(--error); } .impacto-3 { border-left: 4px solid var(--aviso); } .impacto-2 { border-left: 4px solid var(--info); } .impacto-1 { border-left: 4px solid var(--apagado); }

dialog { border: 0; border-radius: var(--radio); padding: 1.2rem; max-width: min(560px, 94vw); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
dialog::backdrop { background: rgb(0 0 0 / 40%); }
.cargando { opacity: .6; pointer-events: none; }
details summary { cursor: pointer; font-weight: 600; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--superficie-2); border-radius: 6px; padding: .1em .35em; }
pre { padding: .8rem; overflow: auto; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 12px; }

/* utilidades (la CSP no permite estilos en línea: nada de style="") */
.angosto { max-width: 640px; padding-top: 3rem; } .medio { max-width: 880px; } .mt { margin-top: 1.5rem; } .mt-s { margin-top: .6rem; } .mb { margin-bottom: 1rem; }
.lat-texto { color: #E8DED3; padding: 0 .7rem; } .derecha { text-align: right; } .centro { text-align: center; } .ancho { width: 100%; }
.col-2 { grid-column: span 2; } .sin-margen { margin: 0; } .nowrap { white-space: nowrap; }