/* Agenda Le Parisien — colores y tipografía del kit de marca (papel / barbería) */
:root{
  --fondo:#ffffff; --superficie:#f6f2eb; --crema:#efe7dc; --negro:#0e0d0c;
  --tinta:#1c1a17; --tinta-suave:#5f5a52; --dorado:#8a6230; --linea:#ddd5c4;
  --ok:#4f7a52; --alerta:#b5791f; --error:#a4453a;
  --sombra:rgba(28,26,23,.12); --raya:rgba(95,90,82,.10);
  --f-titulo:"Lora", Georgia, "Times New Roman", serif;
  --f-texto:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --r-s:4px; --r-m:10px; --r-l:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --fondo:#0e0d0c; --superficie:#1a1815; --crema:#2a2621; --tinta:#f3ede2; --tinta-suave:#c8c3b9;
  --dorado:#c49e5c; --linea:#3a352f; --ok:#8ab586; --alerta:#e0a94f; --error:#dc8c7f;
  --sombra:rgba(0,0,0,.5); --raya:rgba(200,195,185,.07); color-scheme:dark } }


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:15px;line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:calc(20px + env(safe-area-inset-top, 0px));padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px))}
h1,h2,h3{font-family:var(--f-titulo);text-wrap:balance;margin:0;color:var(--tinta)}
h2{font-size:22px;line-height:28px;font-weight:600}
h3{font-size:17px;line-height:24px;font-weight:600}
p{margin:0}
a{color:var(--dorado)}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-s);padding:10px 12px;width:100%}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.etq{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado)}
.suave{color:var(--tinta-suave)}
.num{font-variant-numeric:tabular-nums}
.marca img{width:320px;max-width:100%;height:auto;display:block}
.marca img.logo-b{display:none}
@media (prefers-color-scheme: dark){ .marca img.logo-n{display:none} .marca img.logo-b{display:block} }

.lista{display:flex;flex-direction:column;gap:8px}
.opcion{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-m);padding:13px 15px}
.opcion:hover{border-color:var(--tinta-suave)}
.opcion[aria-pressed="true"]{border-color:var(--dorado);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--dorado)}
.opcion .t{font-weight:500}
.opcion .d{font-size:13px;color:var(--tinta-suave);line-height:1.4}
.opcion .p{font-weight:500;white-space:nowrap;text-align:right}
.opcion .p small{display:block;font-weight:400;font-size:12px;color:var(--tinta-suave)}
.dias{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.dia{flex:0 0 62px;border:1px solid var(--linea);border-radius:var(--r-m);background:var(--fondo);padding:8px 4px;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.dia b{font-family:var(--f-titulo);font-size:20px;font-weight:700}
.dia small{font-size:11px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.06em}
.dia[aria-pressed="true"]{border-color:var(--dorado);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--dorado)}
.dia:disabled{opacity:.42;cursor:not-allowed}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.chip{border:1px solid var(--linea);background:var(--fondo);border-radius:var(--r-s);padding:10px 4px;font-weight:500;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--dorado)}
.vacio{background:var(--superficie);border-radius:var(--r-m);padding:16px;color:var(--tinta-suave);font-size:14px}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label,.campo .lbl{font-size:13px;font-weight:500}
.campo .ayuda{font-size:12px;color:var(--tinta-suave)}
.resumen{background:var(--superficie);border-radius:var(--r-m);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:0}
.resumen dt{color:var(--tinta-suave)}
.resumen dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.btn{border:0;border-radius:var(--r-m);padding:13px 18px;font-weight:500;background:var(--tinta);color:var(--fondo);width:100%;text-align:center;text-decoration:none;display:inline-block}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.btn.chico{width:auto;padding:8px 14px;font-size:14px}
.btn.peligro{background:transparent;border:1px solid var(--error);color:var(--error)}
.error-txt{color:var(--error);font-size:13px}
.cargando{color:var(--tinta-suave);font-size:14px;padding:12px 0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--tinta);color:var(--fondo);padding:10px 16px;border-radius:999px;font-size:14px;z-index:40;box-shadow:0 6px 18px var(--sombra);max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion: no-preference){ .toast{animation:sube .2s ease-out} @keyframes sube{from{transform:translate(-50%,8px);opacity:0}} }