/* ==========================================================================
   Nancy Robles Studio — App de clientas (/app)
   Mismo papel, tinta y terracota del sitio; forma de app nativa: barra de
   arriba translucida, barra de pestañas abajo, hojas que suben con el dedo.
   ========================================================================== */
:root{
  --bg:#f3ece2; --bg-2:#ece1d2; --surface:#fbf6ee; --surface-2:#f0e5d4; --surface-3:#fffdf9;
  --ink:#2a1c12; --ink-soft:#5b4a3e; --ink-faint:#75634f; --ink-invert:#fdf7f0;
  --acento:#9d554c; --acento-hondo:#7d4139; --acento-tinte:#f3e0da; --rosa:#cf9c93;
  --oro:#9c7a35; --line:#e6d8c4; --line-soft:#f0e7d8;
  --ok:#3f6a4f; --ok-tinte:#e3eee5; --warn:#8a5610; --warn-tinte:#f6ead3; --mal:#a33f36; --mal-tinte:#f6dfdc;
  --vidrio:rgba(251,246,238,.78);
  --sombra-1:0 1px 2px rgba(120,88,58,.07), 0 8px 20px -12px rgba(108,78,50,.30);
  --sombra-2:0 2px 6px rgba(120,88,58,.08), 0 20px 40px -22px rgba(108,78,50,.42);
  --r-xl:24px; --r-lg:18px; --r-md:14px; --r-sm:11px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --top:calc(56px + env(safe-area-inset-top,0px));
  --tabs:calc(64px + env(safe-area-inset-bottom,0px));
  color-scheme:light;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); }
body{ font-family:var(--sans); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none; -webkit-text-size-adjust:100%; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
a{ color:var(--acento); }
[hidden]{ display:none !important; }
h1,h2,h3{ margin:0; font-weight:600; }
.serif{ font-family:var(--serif); }

/* ---------- Arranque ---------- */
#arranque{ position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px; transition:opacity .35s ease, visibility .35s; }
#arranque.fuera{ opacity:0; visibility:hidden; }
#arranque img{ width:132px; height:auto; }
.arr-barra{ width:120px; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.arr-barra span{ display:block; height:100%; width:40%; background:var(--acento); border-radius:3px; animation:arr 1.1s var(--ease) infinite; }
@keyframes arr{ from{ transform:translateX(-110%); } to{ transform:translateX(260%); } }

/* ---------- Botones y campos ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 22px;
  border:0; border-radius:999px; font-weight:600; font-size:1rem; cursor:pointer; user-select:none;
  transition:transform .12s ease, background .2s ease, opacity .2s; width:100%; }
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn-primario{ background:var(--acento); color:var(--ink-invert); box-shadow:0 10px 22px -12px rgba(125,65,57,.7); }
.btn-secundario{ background:var(--surface-2); color:var(--ink); }
.btn-borde{ background:transparent; color:var(--acento); box-shadow:inset 0 0 0 1.5px var(--acento); }
.btn-mal{ background:var(--mal-tinte); color:var(--mal); }
.btn-google{ background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line), var(--sombra-1); }
.btn-chico{ min-height:38px; padding:0 15px; font-size:.88rem; width:auto; }
.btn-mp{ background:#009ee3; color:#fff; box-shadow:0 10px 22px -12px rgba(0,120,190,.8); }
.lnk{ background:none; border:0; padding:6px 2px; color:var(--acento); font-weight:600; font-size:.9rem; cursor:pointer; }

.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.campo > span{ font-size:.8rem; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; }
.campo input,.campo textarea,.campo select{ width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface-2); border:1.5px solid transparent; border-radius:var(--r-md); padding:13px 15px;
  outline:none; transition:border-color .2s, background .2s; -webkit-appearance:none; appearance:none; }
.campo textarea{ min-height:90px; resize:vertical; }
.campo input:focus,.campo textarea:focus,.campo select:focus{ border-color:var(--acento); background:var(--surface-3); }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--ink-soft); margin:2px 0 14px; }
.check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--acento); flex-shrink:0; }
.msg-error{ min-height:1.2em; margin:0 0 10px; color:var(--mal); font-size:.88rem; }
.aviso{ background:var(--surface-2); border-radius:var(--r-md); padding:14px 16px; font-size:.92rem; margin-bottom:14px; line-height:1.5; }
.aviso.ok{ background:var(--ok-tinte); }
.aviso b{ display:block; margin-bottom:3px; }

/* ---------- Acceso ---------- */
.vista-acceso{ min-height:100%; padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:center; }
.acc-top{ text-align:center; max-width:360px; margin-bottom:22px; }
.acc-logo{ width:96px; height:auto; margin:0 auto 10px; }
.acc-top h1{ font-family:var(--serif); font-size:2.1rem; line-height:1.1; letter-spacing:-.01em; }
.acc-top p{ margin:8px 0 0; color:var(--ink-soft); font-size:.97rem; }
.acc-card{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-xl); padding:20px 18px 14px; box-shadow:var(--sombra-2); }
.seg{ display:grid; grid-template-columns:1fr 1fr; padding:4px; background:var(--surface-2); border-radius:999px; margin-bottom:16px; }
.seg button{ border:0; background:transparent; border-radius:999px; padding:10px 6px; font-weight:600; font-size:.93rem; color:var(--ink-soft); cursor:pointer; transition:background .25s var(--ease), color .2s; }
.seg button.on{ background:var(--surface-3); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sep{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink-faint); font-size:.78rem; font-weight:600; }
.sep::before,.sep::after{ content:""; flex:1; height:1px; background:var(--line); }
.acc-pie{ display:flex; justify-content:center; gap:18px; margin-top:6px; }
.acc-legal{ margin:18px 0 0; font-size:.85rem; color:var(--ink-faint); text-align:center; }

/* ---------- Estructura de app ---------- */
#vApp{ min-height:100%; }
.barra-top{ position:fixed; top:0; left:0; right:0; z-index:20; height:var(--top); padding:env(safe-area-inset-top,0px) 14px 0;
  display:flex; align-items:center; gap:10px; background:var(--vidrio);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent; transition:border-color .2s; }
.barra-top.borde{ border-bottom-color:rgba(90,66,48,.10); }
.bt-izq img{ width:34px; height:34px; object-fit:contain; }
.bt-titulo{ flex:1; font-family:var(--serif); font-size:1.42rem; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-der{ display:flex; align-items:center; gap:8px; }
.ico-btn{ position:relative; width:40px; height:40px; border:0; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ico-btn svg{ width:23px; height:23px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.avatar-btn{ width:36px; height:36px; border-radius:50%; border:0; padding:0; overflow:hidden; cursor:pointer;
  background:var(--acento-tinte); color:var(--acento-hondo); font-weight:600; font-size:.85rem; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.avatar-btn span{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.avatar-btn img{ width:100%; height:100%; object-fit:cover; }
.punto{ position:absolute; top:3px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--acento); color:#fff; font-size:.68rem; font-weight:600; display:flex; align-items:center; justify-content:center; font-style:normal; }

main#contenido{ padding:calc(var(--top) + 6px) 0 calc(var(--tabs) + 22px); }
.tab{ padding:0 16px; animation:tabEntra .28s var(--ease); }
@keyframes tabEntra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.barra-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:20; height:var(--tabs); padding:0 6px env(safe-area-inset-bottom,0px);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:var(--vidrio);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(90,66,48,.10); }
.barra-tabs button{ position:relative; border:0; background:none; height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-faint); font-size:.68rem; font-weight:500; cursor:pointer; user-select:none; }
.barra-tabs button svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease); }
.barra-tabs button:active svg{ transform:scale(.88); }
.barra-tabs button.on{ color:var(--acento); }
.barra-tabs button.on svg{ stroke-width:2; }
.barra-tabs .punto{ top:6px; right:calc(50% - 22px); min-width:10px; height:10px; padding:0; }
.tab-agendar i{ width:46px; height:46px; margin-top:-16px; border-radius:50%; background:var(--acento); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -8px rgba(125,65,57,.75), 0 0 0 4px var(--bg); transition:transform .15s ease; }
.tab-agendar i svg{ stroke:#fff !important; stroke-width:2.4 !important; }
.tab-agendar:active i{ transform:scale(.92); }
.barra-tabs .tab-agendar{ color:var(--acento); }

@media (min-width:700px){
  .tab{ max-width:640px; margin:0 auto; }
  .barra-tabs{ left:50%; right:auto; width:min(560px, 100%); transform:translateX(-50%); border-radius:22px 22px 0 0; border:1px solid rgba(90,66,48,.10); }
}

/* ---------- Tarjetas y listas ---------- */
.saludo{ margin:10px 2px 16px; }
.saludo small{ display:block; color:var(--ink-faint); font-size:.85rem; }
.saludo h2{ font-family:var(--serif); font-size:2rem; line-height:1.1; letter-spacing:-.015em; }
.card{ background:var(--surface); border-radius:var(--r-xl); padding:16px; box-shadow:var(--sombra-1); margin-bottom:14px; }
.card-titulo{ display:flex; align-items:center; justify-content:space-between; margin:22px 4px 10px; }
.card-titulo h3{ font-family:var(--serif); font-size:1.3rem; }
.card-titulo button{ border:0; background:none; color:var(--acento); font-weight:600; font-size:.88rem; cursor:pointer; }
.vacio{ text-align:center; color:var(--ink-faint); padding:26px 10px; font-size:.95rem; }
.vacio svg{ width:44px; height:44px; stroke:var(--rosa); fill:none; stroke-width:1.4; margin:0 auto 8px; display:block; }

.proxima{ background:linear-gradient(150deg, #a45d53 0%, #7d4139 100%); color:var(--ink-invert); border-radius:var(--r-xl); padding:18px; box-shadow:0 18px 34px -20px rgba(125,65,57,.9); margin-bottom:14px; }
.proxima small{ opacity:.82; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.proxima .px-fecha{ font-family:var(--serif); font-size:1.75rem; line-height:1.15; margin:6px 0 2px; }
.proxima .px-svc{ opacity:.92; }
.proxima .px-acc{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.proxima .px-acc .btn{ background:rgba(255,255,255,.18); color:#fff; }
.proxima .chip{ background:rgba(255,255,255,.2); color:#fff; }

.atajos{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.atajo{ background:var(--surface); border:0; border-radius:var(--r-lg); padding:15px 14px; text-align:left; box-shadow:var(--sombra-1); cursor:pointer; display:flex; flex-direction:column; gap:8px; }
.atajo:active{ transform:scale(.98); }
.atajo svg{ width:26px; height:26px; fill:none; stroke:var(--acento); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.atajo b{ font-weight:600; font-size:.98rem; }
.atajo small{ color:var(--ink-faint); font-size:.8rem; margin-top:-5px; }

.fila{ display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line-soft); }
.fila:last-child{ border-bottom:0; }
.fila .f-txt{ flex:1; min-width:0; }
.fila .f-txt b{ display:block; font-weight:600; }
.fila .f-txt small{ display:block; color:var(--ink-faint); font-size:.83rem; }
.fila .f-der{ text-align:right; font-weight:600; }
.fila-btn{ width:100%; background:none; border:0; text-align:left; cursor:pointer; }
.fila svg.flecha{ width:18px; height:18px; stroke:var(--ink-faint); fill:none; stroke-width:2; flex-shrink:0; }

.chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--surface-2); color:var(--ink-soft); white-space:nowrap; }
.chip.ok{ background:var(--ok-tinte); color:var(--ok); }
.chip.warn{ background:var(--warn-tinte); color:var(--warn); }
.chip.mal{ background:var(--mal-tinte); color:var(--mal); }
.chip.acento{ background:var(--acento-tinte); color:var(--acento-hondo); }

.chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips button{ flex-shrink:0; border:0; padding:9px 15px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-size:.88rem; font-weight:500; cursor:pointer; color:var(--ink-soft); }
.chips button.on{ background:var(--ink); color:var(--ink-invert); box-shadow:none; }

/* Citas */
.cita{ display:flex; gap:14px; align-items:flex-start; }
.cita-dia{ width:54px; flex-shrink:0; text-align:center; background:var(--acento-tinte); border-radius:var(--r-md); padding:7px 0; color:var(--acento-hondo); }
.cita-dia b{ display:block; font-family:var(--serif); font-size:1.6rem; line-height:1; }
.cita-dia small{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.cita-info{ flex:1; min-width:0; }
.cita-info b{ display:block; font-weight:600; }
.cita-info small{ display:block; color:var(--ink-faint); font-size:.85rem; }
.cita-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.cita-acc{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.cita.pasada .cita-dia{ background:var(--surface-2); color:var(--ink-soft); }

/* Tienda */
.prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:520px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
.prod{ background:var(--surface); border:0; padding:0; border-radius:var(--r-lg); overflow:hidden; text-align:left; box-shadow:var(--sombra-1); cursor:pointer; display:flex; flex-direction:column; }
.prod:active{ transform:scale(.985); }
.prod-img{ aspect-ratio:1/1; background:var(--surface-2); position:relative; }
.prod-img img{ width:100%; height:100%; object-fit:cover; }
.prod-img .chip{ position:absolute; top:8px; left:8px; }
.prod-txt{ padding:10px 12px 13px; display:flex; flex-direction:column; gap:3px; flex:1; }
.prod-txt b{ font-weight:600; font-size:.93rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.precio{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--ink); }
.precio s{ font-family:var(--sans); font-size:.8rem; color:var(--ink-faint); margin-left:6px; font-weight:400; }

/* Chat */
.chat{ display:flex; flex-direction:column; gap:6px; padding-bottom:84px; }
.chat-dia{ align-self:center; font-size:.74rem; color:var(--ink-faint); background:var(--surface-2); padding:4px 10px; border-radius:999px; margin:10px 0 4px; }
.burbuja{ max-width:80%; padding:9px 13px 7px; border-radius:20px; font-size:.97rem; line-height:1.4; word-wrap:break-word; white-space:pre-wrap; animation:bur .22s var(--ease); }
@keyframes bur{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.burbuja small{ display:block; font-size:.68rem; opacity:.7; margin-top:2px; text-align:right; }
.burbuja.mia{ align-self:flex-end; background:var(--acento); color:#fff; border-bottom-right-radius:6px; }
.burbuja.suya{ align-self:flex-start; background:var(--surface); box-shadow:var(--sombra-1); border-bottom-left-radius:6px; }
.burbuja.enviando{ opacity:.6; }
.chat-caja{ position:fixed; left:0; right:0; bottom:var(--tabs); z-index:19; padding:8px 12px; background:var(--vidrio);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid rgba(90,66,48,.08); display:flex; gap:8px; align-items:flex-end; }
@media (min-width:700px){ .chat-caja{ left:50%; right:auto; width:min(640px,100%); transform:translateX(-50%); } }
.chat-caja textarea{ flex:1; font:inherit; font-size:16px; border:0; border-radius:22px; padding:11px 16px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line);
  resize:none; max-height:120px; min-height:44px; outline:none; color:var(--ink); }
.chat-caja button{ width:44px; height:44px; flex-shrink:0; border-radius:50%; border:0; background:var(--acento); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.chat-caja button[disabled]{ opacity:.45; }
.chat-caja button svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chat-cabeza{ display:flex; align-items:center; gap:12px; padding:6px 2px 12px; }
.chat-cabeza .av{ width:46px; height:46px; border-radius:50%; background:var(--surface); box-shadow:var(--sombra-1); display:flex; align-items:center; justify-content:center; }
.chat-cabeza .av img{ width:34px; }
.chat-cabeza b{ display:block; }
.chat-cabeza small{ color:var(--ink-faint); font-size:.83rem; }

/* ---------- Hojas ---------- */
#velo{ position:fixed; inset:0; z-index:40; background:rgba(28,18,12,.38); opacity:0; transition:opacity .3s ease; }
#velo.ver{ opacity:1; }
.hoja{ position:fixed; left:0; right:0; bottom:0; z-index:41; max-height:calc(100% - env(safe-area-inset-top,0px) - 18px);
  background:var(--bg); border-radius:24px 24px 0 0; box-shadow:0 -12px 40px -14px rgba(40,24,14,.35);
  display:flex; flex-direction:column; transform:translateY(102%); transition:transform .42s var(--ease); will-change:transform; }
.hoja.alta{ height:calc(100% - env(safe-area-inset-top,0px) - 18px); }
.hoja.ver{ transform:translateY(0); }
.hoja.arrastrando{ transition:none; }
@media (min-width:700px){ .hoja{ left:50%; right:auto; width:min(560px,100%); margin-left:calc(min(560px,100%) / -2); } }
.hoja-asa{ padding:9px 0 4px; display:flex; justify-content:center; touch-action:none; cursor:grab; }
.hoja-asa span{ width:38px; height:5px; border-radius:3px; background:rgba(90,66,48,.25); }
.hoja-cabeza{ display:flex; align-items:center; gap:10px; padding:2px 16px 10px; touch-action:none; }
.hoja-cabeza h2{ flex:1; font-family:var(--serif); font-size:1.5rem; letter-spacing:-.01em; }
.hoja-cabeza .ico-btn{ background:var(--surface-2); width:34px; height:34px; }
.hoja-cabeza .ico-btn svg{ width:16px; height:16px; stroke-width:2.2; }
.hoja-cuerpo{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 16px 16px; }
.hoja-pie{ padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(90,66,48,.08); background:var(--vidrio);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); display:flex; gap:10px; align-items:center; }
.hoja-pie .pie-txt{ flex:1; min-width:0; }
.hoja-pie .pie-txt small{ display:block; color:var(--ink-faint); font-size:.8rem; }
.hoja-pie .pie-txt b{ font-weight:600; }
.hoja-pie .btn{ width:auto; flex-shrink:0; }

/* Pasos de agendar */
.pasos{ display:flex; gap:6px; padding:0 16px 10px; }
.pasos i{ flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .3s; }
.pasos i.on{ background:var(--acento); }
.svc{ display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:0; border-radius:var(--r-lg); padding:10px; margin-bottom:9px; text-align:left; cursor:pointer;
  box-shadow:var(--sombra-1); transition:box-shadow .2s, transform .12s; }
.svc:active{ transform:scale(.985); }
.svc img,.svc .svc-ph{ width:62px; height:62px; border-radius:var(--r-md); object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.svc .svc-txt{ flex:1; min-width:0; }
.svc .svc-txt b{ display:block; font-weight:600; }
.svc .svc-txt small{ display:block; color:var(--ink-faint); font-size:.82rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.svc .marca{ width:26px; height:26px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1.5px var(--line); display:flex; align-items:center; justify-content:center; }
.svc .marca svg{ width:15px; height:15px; stroke:#fff; stroke-width:3; fill:none; opacity:0; }
.svc.on{ box-shadow:inset 0 0 0 2px var(--acento), var(--sombra-1); }
.svc.on .marca{ background:var(--acento); box-shadow:none; }
.svc.on .marca svg{ opacity:1; }

.dias{ display:flex; gap:8px; overflow-x:auto; padding:4px 16px 12px; margin:0 -16px; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:16px; }
.dias::-webkit-scrollbar{ display:none; }
.dia{ flex-shrink:0; width:62px; border:0; border-radius:var(--r-lg); padding:9px 0 10px; background:var(--surface); box-shadow:var(--sombra-1); cursor:pointer; scroll-snap-align:start; text-align:center; }
.dia small{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600; }
.dia b{ display:block; font-family:var(--serif); font-size:1.55rem; line-height:1.1; }
.dia em{ display:block; font-style:normal; font-size:.68rem; color:var(--ink-faint); }
.dia.on{ background:var(--acento); color:#fff; }
.dia.on small,.dia.on em{ color:rgba(255,255,255,.85); }
.dia[disabled]{ opacity:.35; box-shadow:none; background:transparent; cursor:default; }
.mes-txt{ font-family:var(--serif); font-size:1.15rem; margin:4px 2px 6px; }
/* ---------- Calendario de mes completo (9 oct 2026) ---------- */
.cal{ margin:4px 0 6px; user-select:none; -webkit-user-select:none; }
.cal-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 12px; }
.cal-titulo{ font-family:var(--serif); font-size:1.3rem; font-weight:600; text-align:center; flex:1; }
.cal-flecha{ width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; background:var(--surface); box-shadow:var(--sombra-1);
  display:grid; place-items:center; cursor:pointer; }
.cal-flecha svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2; }
.cal-flecha[disabled]{ opacity:.3; box-shadow:none; cursor:default; }
.cal-sem,.cal-mes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal-sem{ margin-bottom:6px; }
.cal-sem span{ text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--ink-faint); }
.cal-mes.cargando .cal-d:not([disabled]){ opacity:.75; }
.cal-d{ position:relative; border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sombra-1); cursor:pointer;
  min-height:44px; aspect-ratio:1/1; max-height:58px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .15s var(--ease), background .15s; }
.cal-d b{ font-family:var(--serif); font-size:1.25rem; line-height:1; font-weight:600; }
.cal-d i{ display:block; width:5px; height:5px; border-radius:50%; margin-top:4px; background:transparent; }
.cal-d.pocos i{ background:var(--oro); }
.cal-d.hoy{ box-shadow:inset 0 0 0 2px var(--acento), var(--sombra-1); }
.cal-d.on{ background:var(--acento); color:#fff; }
.cal-d:not([disabled]):active{ transform:scale(.94); }
.cal-d:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.cal-d[disabled]{ background:transparent; box-shadow:none; cursor:default; color:var(--ink-faint); opacity:.45; }
.cal-d.cerrado[disabled] b{ text-decoration:line-through; text-decoration-thickness:1px; }
.cal-d.lleno[disabled]{ opacity:.55; }
.cal-d.lleno[disabled] i{ background:var(--ink-faint); }
.cal-leyenda{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:12px 2px 2px; font-size:.75rem; color:var(--ink-faint); }
.cal-leyenda span::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.cal-leyenda .ly-pocos::before{ background:var(--oro); }
.cal-leyenda .ly-lleno::before{ background:var(--ink-faint); }
.cal-leyenda .ly-cerrado::before{ background:transparent; box-shadow:inset 0 0 0 1px var(--ink-faint); }
.cal-limite{ display:block; margin:6px 2px 0; color:var(--ink-faint); font-size:.75rem; }
@media (min-width:700px){ .cal-mes,.cal-sem{ gap:8px; } .cal-d{ max-height:62px; } }

.horas{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (min-width:420px){ .horas{ grid-template-columns:repeat(4,1fr); } }
.hora{ border:0; border-radius:var(--r-md); padding:13px 0; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-weight:600; cursor:pointer; font-size:.98rem; }
.hora.on{ background:var(--acento); color:#fff; box-shadow:none; }
.esp-row{ display:flex; gap:10px; overflow-x:auto; padding:6px 16px 8px; margin:0 -16px; scrollbar-width:none; }
.esp{ flex-shrink:0; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:5px; width:72px; cursor:pointer; font-size:.78rem; color:var(--ink-soft); }
.esp span{ width:54px; height:54px; border-radius:50%; background:var(--surface-2); overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:600; box-shadow:inset 0 0 0 2px transparent; }
.esp span img{ width:100%; height:100%; object-fit:cover; }
.esp.on span{ box-shadow:inset 0 0 0 2px var(--acento), 0 0 0 2px var(--bg), 0 0 0 4px var(--acento); }
.esp.on{ color:var(--acento); font-weight:600; }
.resumen .fila b{ font-weight:500; }
.pago-op{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:var(--surface); border-radius:var(--r-lg); padding:14px; margin-bottom:9px; text-align:left; box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; }
.pago-op.on{ box-shadow:inset 0 0 0 2px var(--acento); background:var(--surface-3); }
.pago-op svg{ width:26px; height:26px; flex-shrink:0; fill:none; stroke:var(--acento); stroke-width:1.6; }
.pago-op b{ display:block; }
.pago-op small{ display:block; color:var(--ink-faint); font-size:.83rem; }
.listo{ text-align:center; padding:26px 6px 10px; }
.listo .ok-circ{ width:76px; height:76px; border-radius:50%; background:var(--ok-tinte); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; animation:pop .5s cubic-bezier(.34,1.56,.64,1); }
.listo .ok-circ svg{ width:38px; height:38px; stroke:var(--ok); stroke-width:2.4; fill:none; }
.listo .ok-circ.mal{ background:var(--mal-tinte); } .listo .ok-circ.mal svg{ stroke:var(--mal); }
.listo .ok-circ.espera{ background:var(--warn-tinte); } .listo .ok-circ.espera svg{ stroke:var(--warn); }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.listo h3{ font-family:var(--serif); font-size:1.7rem; }
.listo p{ color:var(--ink-soft); margin:8px 0 0; }

.cant{ display:inline-flex; align-items:center; background:var(--surface-2); border-radius:999px; }
.cant button{ width:34px; height:34px; border:0; background:none; font-size:1.2rem; cursor:pointer; color:var(--ink); }
.cant span{ min-width:22px; text-align:center; font-weight:600; }
.estrellas{ display:flex; gap:6px; justify-content:center; margin:6px 0 14px; }
.estrellas button{ border:0; background:none; font-size:2.1rem; color:var(--line); cursor:pointer; padding:0 2px; line-height:1; }
.estrellas button.on{ color:var(--oro); }

.perfil-cab{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 0 6px; }
.perfil-cab .av-grande{ width:88px; height:88px; border-radius:50%; background:var(--acento-tinte); color:var(--acento-hondo); font-family:var(--serif); font-size:2.2rem; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; border:0; cursor:pointer; }
.perfil-cab .av-grande img{ width:100%; height:100%; object-fit:cover; }
.perfil-cab .av-grande i{ position:absolute; right:2px; bottom:2px; width:26px; height:26px; border-radius:50%; background:var(--acento); display:flex; align-items:center; justify-content:center; }
.perfil-cab .av-grande i svg{ width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; }
.perfil-cab h2{ font-family:var(--serif); font-size:1.6rem; margin-top:10px; }
.perfil-cab small{ color:var(--ink-faint); }
.lista-menu{ background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sombra-1); padding:0 14px; margin-bottom:14px; }
.lista-menu .fila{ cursor:pointer; }
.lista-menu .fila .ic{ width:34px; height:34px; border-radius:10px; background:var(--acento-tinte); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lista-menu .fila .ic svg{ width:19px; height:19px; stroke:var(--acento-hondo); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lista-menu .fila.peligro .f-txt b{ color:var(--mal); }
.lista-menu .fila.peligro .ic{ background:var(--mal-tinte); } .lista-menu .fila.peligro .ic svg{ stroke:var(--mal); }

/* ---------- Toast ---------- */
#toast{ position:fixed; left:50%; bottom:calc(var(--tabs) + 16px); z-index:90; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:rgba(42,28,18,.94); color:#fff; padding:12px 18px; border-radius:16px; font-size:.92rem; max-width:calc(100% - 32px); width:max-content;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transition:opacity .25s ease, transform .35s var(--ease); text-align:center; }
#toast.ver{ opacity:1; transform:translate(-50%, 0); }
#toast.mal{ background:var(--mal); }
body.sin-tabs #toast{ bottom:calc(24px + env(safe-area-inset-bottom,0px)); }

.esqueleto{ background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size:200% 100%; animation:esq 1.2s linear infinite; border-radius:var(--r-lg); }
@keyframes esq{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .hoja{ transition:opacity .2s ease; transform:none; opacity:0; } .hoja.ver{ opacity:1; }
}

/* ---------- Aviso para instalar (llega desde "Instalar app" del sitio) ---------- */
.aviso-instalar{ position:fixed; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:90;
  max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:14px 40px 14px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sombra-2);
  animation:aiSube .45s var(--ease) both; }
@keyframes aiSube{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.aviso-instalar .ai-ico{ width:42px; height:42px; border-radius:14px; background:var(--acento-tinte); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.aviso-instalar .ai-ico svg{ width:22px; height:22px; stroke:var(--acento); fill:none; stroke-width:1.8; }
.aviso-instalar .ai-txt{ flex:1; min-width:0; }
.aviso-instalar .ai-txt b{ display:block; font-size:.95rem; }
.aviso-instalar .ai-txt small{ display:block; font-size:.8rem; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.aviso-instalar .ai-cerrar{ position:absolute; top:6px; right:8px; width:30px; height:30px; border:0; background:none;
  font-size:1.3rem; line-height:1; color:var(--ink-faint); cursor:pointer; }
/* ---------- Formas de pago en Mi cuenta (9 oct 2026) ---------- */
.nota-suave{ margin:-2px 2px 10px; color:var(--ink-faint); font-size:.85rem; }
.pref-pago{ display:grid; gap:8px; margin-bottom:6px; }
.card small.sub{ display:block; margin:12px 2px 0; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; font-weight:600; color:var(--ink-faint); }
.card .fila .ic{ width:34px; height:34px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; flex:0 0 34px; }
.card .fila .ic svg{ width:18px; height:18px; stroke:var(--ink-soft); fill:none; stroke-width:1.7; }
.card .fila .f-txt small{ display:block; color:var(--ink-faint); font-size:.8rem; }
.cal-d.hoy[disabled]{ box-shadow:inset 0 0 0 1.5px var(--line); }

/* ==========================================================================
   CAPA MODERNA · APP — 11 oct 2026
   Solo apariencia (estilo de referencia: app de Mercado Pago) con los colores
   del estudio: banda rosada arriba en Inicio, tarjetas blancas muy redondeadas
   con relieve suave, botones de icono en cuadro redondeado y barra de abajo
   con indicador. No cambia nada de funciones ni de datos.
   COMO QUITARLA: borrar desde este comentario hasta "FIN CAPA MODERNA APP".
   ========================================================================== */
:root{
  --nr-banda:linear-gradient(135deg, #b57369 0%, #a4645a 50%, #7f433b 100%);
  --nr-borde:0 0 0 1px rgba(90,66,48,.06);
  --sombra-1:0 0 0 1px rgba(90,66,48,.05), 0 1px 2px rgba(90,60,40,.05), 0 12px 30px -18px rgba(90,60,40,.30);
  --sombra-2:0 0 0 1px rgba(90,66,48,.05), 0 2px 6px rgba(90,60,40,.07), 0 26px 50px -26px rgba(90,60,40,.42);
  --r-xl:26px; --r-lg:20px; --r-md:15px;
  /* Blanco en la paleta (12 oct 2026): tarjetas, barras y botones en blanco puro;
     el fondo sigue marfil para que el blanco resalte; rellenos en crema. */
  --nr-blanco:#ffffff; --surface:#ffffff; --surface-3:#ffffff;
  --vidrio:rgba(255,255,255,.84);
}
main#contenido{ overflow-x:clip; }

/* Banda rosada de Inicio (como la franja de color de la referencia) */
#tab-inicio{ position:relative; isolation:isolate; }
#tab-inicio::before{ content:""; position:absolute; z-index:-1; left:50%; width:100vw; transform:translateX(-50%);
  top:calc(-1 * (var(--top) + 6px)); height:calc(var(--top) + 168px); background:var(--nr-banda);
  border-radius:0 0 34px 34px; }
#tab-inicio .saludo{ color:#fff; margin:14px 4px 18px; }
#tab-inicio .saludo small{ color:rgba(255,255,255,.86); }
body:has(#tab-inicio:not([hidden])) .barra-top:not(.borde){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
body:has(#tab-inicio:not([hidden])) .barra-top:not(.borde) .bt-titulo{ color:#fff; }
body:has(#tab-inicio:not([hidden])) .barra-top:not(.borde) .bt-izq img{ filter:brightness(0) invert(1); }

/* Tarjeta de la proxima cita: blanca sobre la banda, como la del saldo */
.proxima{ background:var(--nr-blanco); color:var(--ink); box-shadow:var(--sombra-2); border-radius:var(--r-xl); padding:20px 18px; }
.proxima small{ opacity:1; color:var(--acento); font-weight:600; }
.proxima .px-fecha{ color:var(--ink); }
.proxima .px-svc{ opacity:1; color:var(--ink-soft); }
.proxima .chip{ background:var(--acento-tinte); color:var(--acento-hondo); }
.proxima .px-acc .btn{ background:var(--acento-tinte); color:var(--acento-hondo); box-shadow:none; flex:1 1 auto; }
.proxima .px-acc .btn:first-child{ background:var(--acento); color:var(--ink-invert); }
#tab-inicio > .card:first-of-type{ box-shadow:var(--sombra-2); }

/* Accesos rapidos: icono en cuadro rosado */
.atajo{ border-radius:var(--r-lg); padding:16px 14px; gap:8px; }
.atajo svg{ width:44px; height:44px; padding:10px; border-radius:14px; background:var(--acento-tinte); stroke-width:1.8; }

/* Barra de arriba: botones en cuadro redondeado */
.bt-der .ico-btn{ width:42px; height:42px; border-radius:14px; background:var(--nr-blanco); box-shadow:var(--sombra-1); }
.avatar-btn{ width:40px; height:40px; box-shadow:0 0 0 2px var(--nr-blanco), var(--sombra-1); }
.barra-top.borde{ background:var(--vidrio); }

/* Barra de pestañas: blanca, con indicador arriba del activo */
.barra-tabs{ background:rgba(255,255,255,.94); border-top:0; box-shadow:0 -1px 0 rgba(90,66,48,.07), 0 -10px 30px -22px rgba(90,60,40,.45); }
.barra-tabs button.on::before{ content:""; position:absolute; top:0; left:50%; width:30px; height:3px; margin-left:-15px; border-radius:0 0 4px 4px; background:var(--acento); }
.barra-tabs .tab-agendar::before{ display:none; }
.tab-agendar i{ width:54px; height:54px; margin-top:-22px; background:var(--nr-banda);
  box-shadow:0 12px 22px -10px rgba(125,65,57,.75), 0 0 0 5px #ffffff; }

/* Tarjetas, listas y controles */
.card,.lista-menu{ background:var(--nr-blanco); }
.card-titulo h3{ font-size:1.4rem; }
.chips button{ background:var(--nr-blanco); box-shadow:var(--sombra-1); }
.chips button.on{ background:var(--acento); color:#fff; }
.svc,.prod,.dia,.cal-d,.pago-op,.hora{ background:var(--nr-blanco); }
.pago-op{ box-shadow:var(--sombra-1); }
.pago-op.on{ box-shadow:inset 0 0 0 2px var(--acento), var(--sombra-1); background:var(--acento-tinte); }
.pago-op svg{ width:42px; height:42px; padding:9px; border-radius:13px; background:var(--acento-tinte); }
.pago-op.on svg{ background:var(--nr-blanco); }
.hora{ box-shadow:var(--sombra-1); }
.cita-dia{ border-radius:16px; }
.campo input,.campo textarea,.campo select{ border-radius:15px; }
.btn-secundario{ background:var(--nr-blanco); box-shadow:var(--sombra-1); }
.btn-chico{ min-height:40px; }

/* Hojas que suben y acceso */
.hoja{ border-radius:30px 30px 0 0; }
.acc-card{ border-radius:30px; background:var(--nr-blanco); }
.vista-acceso{ background:linear-gradient(180deg, #ecc9c2 0%, var(--bg) 46%); }
.aviso{ border-radius:var(--r-lg); }
/* ===================== FIN CAPA MODERNA APP ===================== */

/* ==========================================================================
   LEGIBILIDAD · APP DE CLIENTAS — 11 oct 2026
   Solo apariencia. Corrige letras que no se alcanzaban a leer y colores
   fuera de la paleta del estudio (rosado terracota + chocolate).
   Todas las letras quedan a 4.5:1 o mas sobre su fondo.
   COMO QUITARLA: borrar desde este comentario hasta el final del archivo.
   ========================================================================== */
:root{ --nr-banda-inicio:linear-gradient(135deg, #b57369 0%, #a4645a 50%, #7f433b 100%); --acento-texto:#8c4a41; --choc:#3b2422; }
body{ font-variant-numeric:lining-nums; }          /* el "1" y el "0" en serif se leian como "I" y "o" */
a{ color:var(--acento-texto); }
input::placeholder,textarea::placeholder{ color:#6f5755; opacity:1; }

/* Mercado Pago: de azul ajeno a chocolate del estudio (el nombre ya va en el texto) */
.btn-mp{ background:var(--choc); color:#fff; box-shadow:0 10px 22px -12px rgba(58,40,28,.7); }

/* Botones apagados: se ve que no estan activos, pero se lee lo que dicen */
.btn[disabled]{ opacity:1; box-shadow:none; }
.btn-primario[disabled],.btn-mp[disabled]{ background:#f1dedb; color:#6b5250; }
.chat-caja button[disabled]{ opacity:1; background:#f1dedb; color:#6b5250; }

/* Calendario: dias sin lugar o cerrados, legibles */
.dia[disabled]{ opacity:1; color:var(--ink-faint); }
.dia[disabled] em{ color:var(--ink-faint); }
.cal-d[disabled]{ opacity:1; color:var(--ink-faint); }
.cal-d.lleno[disabled]{ opacity:1; }
.cal-flecha[disabled]{ opacity:.55; }

/* Banda rosada de Inicio: mas profunda para que el saludo y el titulo se lean en blanco,
   y sube hasta el borde de arriba (antes quedaba una franja crema encima) */
#tab-inicio::before{ background:var(--nr-banda-inicio); top:calc(-1 * (var(--top) + 40px)); height:calc(var(--top) + 202px); }
#tab-inicio .saludo small{ color:#fff; }

/* Chat: hora dentro de la burbuja propia y enlace de acceso */
.burbuja.mia small{ opacity:1; color:rgba(255,255,255,.92); }
.burbuja.suya small{ opacity:1; color:var(--ink-faint); }
.esp span{ color:var(--acento-texto); }

/* ==========================================================================
   CAPA STUDIO · APP DE CLIENTAS — 12 oct 2026
   Mismo lenguaje visual que el sitio y que la maqueta: papel blanco,
   chocolate #a4645a, crema #faf1ef, titulos en serif, esquinas de 26 px y
   sombras cafe muy suaves. Solo apariencia: no cambia funciones ni datos.
   COMO QUITARLA: borrar desde este comentario hasta el final del archivo.
   ========================================================================== */
:root{
  /* Superficies */
  --bg:#ffffff; --bg-2:#ffffff;
  --surface:#ffffff; --surface-3:#ffffff;
  --surface-2:#faf1ef;
  --nr-blanco:#ffffff;

  /* Tinta */
  --ink:#3b2422; --ink-soft:#6b5250; --ink-faint:#6f5755; --ink-invert:#ffffff;

  /* Acento: chocolate */
  --acento:#a4645a; --acento-hondo:#7f433b; --acento-tinte:#faf1ef;
  --acento-texto:#8c4a41; --choc:#7f433b;
  --rosa:#ecc9c2; --oro:#9c7a35;

  /* Separadores y vidrio */
  --line:#f1dedb; --line-soft:#faf1ef;
  --vidrio:rgba(255,255,255,.94);
  --nr-borde:0 0 0 1px rgba(127,67,59,.06);

  /* La banda de Inicio: chocolate solido, como la cabecera de la maqueta */
  --nr-banda:linear-gradient(135deg, #b57369 0%, #a4645a 50%, #7f433b 100%);
  --nr-banda-inicio:linear-gradient(135deg, #b57369 0%, #a4645a 50%, #7f433b 100%);

  /* Sombras cafe, muy suaves */
  --sombra-1:0 1px 2px rgba(127,67,59,.04), 0 12px 30px -18px rgba(127,67,59,.30);
  --sombra-2:0 2px 6px rgba(127,67,59,.06), 0 26px 50px -26px rgba(127,67,59,.42);

  /* Esquinas */
  --r-xl:26px; --r-lg:21px; --r-md:14px; --r-sm:12px;

  /* Letras */
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif;
}
html{ background:#ffffff; }
body{ background:linear-gradient(180deg,#ecc9c2 0%,#ffffff 46vh) no-repeat, #ffffff; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }

/* La pantalla de arranque conserva el crema del manifest y de los iconos:
   si se pone blanca, se nota el salto desde el splash del telefono. */
#arranque{ background:linear-gradient(180deg,#ecc9c2 0%,#ffffff 46%), #ffffff; }
/* El logo late despacio mientras carga, igual que en el sitio */
#arranque img{ animation:arrLatido 2600ms ease-in-out infinite; }
@keyframes arrLatido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
.arr-barra span{ background:#a4645a; }
@media (prefers-reduced-motion: reduce){ #arranque img{ animation:none; } }

/* Barras: blancas, con la misma esquina de 26 px */
.barra-top{ background:rgba(255,255,255,.96); }
.barra-tabs{ background:rgba(255,255,255,.96); border-top:1px solid #f1dedb; }

/* Botones: rectangulo suave, como en la maqueta */
.btn{ border-radius:14px; font-family:var(--sans); font-weight:700; }
.btn-primario{ background:#a4645a; color:#ffffff; box-shadow:0 8px 24px -10px rgba(127,67,59,.5); }
.btn-secundario{ background:#faf1ef; color:#8c4a41; }
.btn-borde{ color:#8c4a41; box-shadow:inset 0 0 0 1.5px #a4645a; }
.btn-mp{ background:#7f433b; color:#ffffff; box-shadow:0 10px 22px -12px rgba(59,37,20,.7); }
.lnk{ color:#8c4a41; }
a{ color:#8c4a41; }

/* Campos */
.campo input,.campo textarea,.campo select{ border-radius:14px; }
:focus-visible{ outline:3px solid #a4645a; outline-offset:4px; }

/* Tarjetas y hojas: blancas, linea fina y caida suave en vez de relieve */
.acc-card{ background:#ffffff; border:1px solid #f1dedb; border-radius:26px; box-shadow:var(--sombra-1); }
.seg{ background:#faf1ef; border-radius:999px; }
.seg button.on{ background:#a4645a; color:#ffffff; }

/* El texto sobre la banda chocolate de Inicio */
#tab-inicio .saludo small{ color:rgba(255,255,255,.72); }

/* ---- Cobro al final del servicio (12 oct 2026) ----
   La tarjeta de "por pagar" tiene que saltar a la vista sin gritar. */
.proxima.cobro{
  background:#a4645a; color:#ffffff;
  border:0; box-shadow:0 14px 34px -18px rgba(127,67,59,.75);
}
.proxima.cobro small{ color:#ecc9c2; }
.proxima.cobro .px-fecha{ color:#ffffff; }
.proxima.cobro .px-svc{ color:rgba(255,255,255,.8); }
.proxima.cobro .px-acc .btn{ background:#ffffff; color:#8c4a41; }

/* La nota de que el total es aproximado */
.nota-aprox{
  margin:8px 0 0; font-size:.78rem; line-height:1.45;
  color:var(--ink-faint); text-align:left;
}

/* El renglon del total, en el desglose del cobro */
.fila.fuerte{ border-top:1px solid #f1dedb; margin-top:6px; padding-top:10px; }
.fila.fuerte .f-txt,
.fila.fuerte .f-der{ font-weight:700; color:#3b2422; font-size:1.05rem; }

/* ==========================================================================
   CAPA ROSA · APP — 12 oct 2026
   Sin cafe/chocolate. Fondo: el rosa de la pantalla de entrada (#ecc9c2) que
   se desvanece a blanco (46%). Botones y acentos: #a4645a, el color del icono.
   COMO QUITARLA: borrar desde este comentario hasta el final del archivo.
   ========================================================================== */
#arranque img + .arr-barra span{ background:#a4645a; }

/* ==========================================================================
   MARCO DE TELEFONO EN PANTALLAS GRANDES  (31 oct 2026)
   La app es una app de celular. Abierta en una computadora se estiraba a todo
   lo ancho y la barra de pestanas quedaba flotando a media pantalla: las
   barras son position:fixed con left:0/right:0 y no seguian al contenido.
   Aqui todo queda en una columna del ancho de un telefono, centrada, y las
   barras se alinean con esa columna.

   Va AL FINAL del archivo a proposito: asi gana sobre las reglas de
   @media (min-width:700px) de mas arriba sin tener que borrarlas.

   OJO - se centra con margin-left y NO con transform:translateX(-50%):
   las hojas que suben se arrastran con el dedo escribiendo
   `style.transform = translateY(...)` desde app.js, y si el centrado viviera
   en transform el primer arrastre lo borraria y la hoja saltaria a la
   izquierda. (Por eso .hoja ya usaba margin-left mas arriba.)

   No se cambia ni un color, ni un texto, ni una letra: solo ancho y posicion.
   En celular (menos de 560px) no aplica nada de esto.
   COMO QUITARLA: borrar desde este comentario hasta el final del archivo.
   ========================================================================== */
@media (min-width:560px){
  :root{ --app-ancho:430px; --app-mitad:-215px; }

  /* El fondo de alrededor, con un tono que ya existia en la paleta. */
  html, body{ background:var(--bg-2); }

  /* La columna: el "telefono". */
  #vApp, .vista-acceso{
    width:var(--app-ancho); margin-inline:auto; background:var(--bg);
    box-shadow:var(--sombra-2); min-height:100vh;
  }

  /* Todo lo que es position:fixed se alinea con la columna. */
  #arranque,
  .barra-top,
  .barra-tabs,
  .hoja,
  .chat-caja{
    left:50%; right:auto; width:var(--app-ancho);
    margin-left:var(--app-mitad); transform:none;
  }
  /* La hoja conserva su animacion de subir; solo se le quita el centrado viejo. */
  .hoja{ transform:translateY(100%); }
  .hoja.ver{ transform:translateY(0); }
  /* La barra de pestanas vuelve a ser una barra de abajo, no una pastilla. */
  .barra-tabs{ border-radius:0; border:0; border-top:1px solid rgba(90,66,48,.10); }

  /* El contenido ya no necesita su propio tope: lo pone la columna. */
  .tab{ max-width:none; margin:0; }

  /* Avisos y mensajes, dentro del telefono. */
  #toast{ max-width:calc(var(--app-ancho) - 32px); }
  .aviso-instalar{
    left:50%; right:auto; width:calc(var(--app-ancho) - 24px);
    margin-left:calc(var(--app-mitad) + 12px);
  }
}

/* ==========================================================================
   INICIO CON CONTENIDO + BARRA SOLO CON EL LOGO   (31 oct 2026)
   La barra de arriba se queda nada mas con el logo, grande y centrado: el
   titulo de pantalla sobraba (la pestana marcada abajo ya dice donde estas)
   y el avatar tambien, porque Mi cuenta es ahora una pestana.
   Y el Inicio deja de estar vacio: servicios con foto y quienes somos.
   Mismos colores y mismas letras; solo tamano y posicion.
   ========================================================================== */
:root{ --top:calc(76px + env(safe-area-inset-top,0px)); }

.barra-top.solo-logo{ justify-content:center; position:fixed; }
.barra-top.solo-logo .bt-izq{ margin:0 auto; display:flex; }
.barra-top.solo-logo .bt-izq img{ width:48px; height:48px; object-fit:contain; }
/* El carrito no debe descentrar el logo: sale del flujo. */
.barra-top.solo-logo .bt-der{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }

/* El saludo, centrado bajo el logo. */
.saludo{ text-align:center; }

/* ---------- Servicios en Inicio: la foto manda ---------- */
.vitrina-app{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.svc-foto{ position:relative; border:0; padding:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-2); box-shadow:var(--sombra-1); cursor:pointer; text-align:left;
  aspect-ratio:3/4; display:block; }
.svc-foto img{ width:100%; height:100%; object-fit:cover; }
.svc-foto .svc-ph{ width:100%; height:100%; background:linear-gradient(150deg, var(--acento-tinte), var(--surface-2)); }
.svc-foto .svc-foto-txt{
  position:absolute; left:8px; right:8px; bottom:8px; padding:9px 11px;
  background:rgba(255,255,255,.90); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-radius:var(--r-md); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.svc-foto .svc-foto-txt b{ display:block; font-size:.9rem; font-weight:600; line-height:1.25; }
.svc-foto .svc-foto-txt small{ display:block; color:var(--ink-faint); font-size:.75rem; margin-top:1px; }
.svc-foto:active{ transform:scale(.985); }

/* ---------- Quienes somos ---------- */
.nosotros{ border-radius:var(--r-xl); overflow:hidden; background:var(--surface); box-shadow:var(--sombra-2); }
.nosotros .foto{ aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.nosotros .foto img{ width:100%; height:100%; object-fit:cover; }
.nosotros .cuerpo{ padding:18px 16px 16px; text-align:center; }
.nosotros h3{ font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; margin-bottom:6px; }
.nosotros p{ color:var(--ink-soft); font-size:.94rem; margin:0 auto; max-width:34ch; }
.nosotros .cifras{ display:flex; justify-content:center; gap:26px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.nosotros .cifras div{ text-align:center; }
.nosotros .cifras b{ display:block; font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1; }
.nosotros .cifras small{ color:var(--ink-faint); font-size:.74rem; }

/* ---------- Promociones y paquetes en Inicio (31 oct 2026) ----------------
   Lo que la duena captura en el panel, visible por fin para la clienta.
   Mismos colores y mismas letras que todo lo demas.                         */
.promo{ display:flex; gap:12px; padding:15px 16px; border-radius:var(--r-lg);
  background:var(--acento-tinte); box-shadow:inset 0 1px 0 rgba(255,255,255,.75); }
.promo-txt{ flex:1; min-width:0; }
.promo-txt b{ display:block; font-weight:600; font-size:1rem; }
.promo-val{ display:block; font-family:var(--serif); font-size:1.35rem; font-weight:600;
  color:var(--acento-hondo); line-height:1.15; margin:2px 0 3px; letter-spacing:-.01em; }
.promo-txt small{ display:block; color:var(--ink-soft); font-size:.82rem; }
.promo-cod{ display:inline-flex; align-items:baseline; gap:7px; margin-top:9px; padding:5px 11px;
  border-radius:999px; background:var(--surface); box-shadow:var(--sombra-1); }
.promo-cod small{ color:var(--ink-faint); font-size:.74rem; }
.promo-cod b{ display:inline; font-size:.92rem; letter-spacing:.06em; color:var(--acento-hondo); }

.paquete{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sombra-1); }
.paquete img{ width:68px; height:68px; border-radius:var(--r-md); object-fit:cover; flex:none; background:var(--surface-2); }
.paq-txt{ flex:1; min-width:0; }
.paq-txt b{ display:block; font-weight:600; }
.paq-txt small{ display:block; color:var(--ink-faint); font-size:.82rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.paq-pie{ display:flex; align-items:baseline; gap:10px; margin-top:5px; flex-wrap:wrap; }
.paq-precio{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--acento-hondo); letter-spacing:-.01em; }
.paq-pie small{ color:var(--ink-faint); font-size:.78rem; }