:root {
  --bg: #faf6f1; --sup: #fff; --txt: #2a211b; --txt2: #75665a; --borde: #e7ddd2;
  --pri: #c4552d; --pri-txt: #fff; --pri-suave: #f6e2d8; --error: #b91c1c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14100d; --sup: #1f1915; --txt: #f3ece6; --txt2: #b3a497; --borde: #3a2f27; --pri: #e0764f; --pri-txt: #1a0f0a; --pri-suave: #3d2219; --error: #f87171; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.caja { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
h2 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pri); color: var(--pri-txt); font-size: 14px; }
section { background: var(--sup); border: 1px solid var(--borde); border-radius: 16px; padding: 16px; margin-top: 14px; }
.sub { color: var(--txt2); margin: 4px 0; }
.peq { font-size: 13px; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.botones button, .dias button {
  min-width: 52px; min-height: 46px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--borde);
  background: var(--bg); color: var(--txt); font: inherit; font-weight: 700; cursor: pointer;
}
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.dias button { flex: none; display: grid; justify-items: center; line-height: 1.15; min-width: 62px; padding: 8px 6px; }
.dias button b { font-size: 20px; }
.dias button small { font-size: 12px; font-weight: 500; color: var(--txt2); text-transform: capitalize; }
button.act { background: var(--pri); border-color: var(--pri); color: var(--pri-txt); }
button.act small { color: inherit; }
label { display: grid; gap: 4px; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
label small { font-weight: 400; color: var(--txt2); }
input, textarea { font: inherit; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--bg); color: var(--txt); width: 100%; }
input:focus, textarea:focus { outline: none; border-color: var(--pri); }
label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
label.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
a { color: var(--pri); }
.resumen { background: var(--pri-suave); border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; }
.resumen.grande { font-size: 18px; margin-top: 16px; }
#enviar, .boton {
  display: block; width: 100%; min-height: 52px; border: none; border-radius: 14px; background: var(--pri); color: var(--pri-txt);
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; text-align: center; line-height: 52px; text-decoration: none;
}
#enviar:disabled { opacity: .6; }
button.secundario { width: 100%; min-height: 48px; margin-top: 14px; border-radius: 14px; border: 1.5px solid var(--borde); background: var(--sup); color: var(--error); font: inherit; font-weight: 700; cursor: pointer; }
.error { color: var(--error); font-weight: 600; }
.nota { background: var(--sup); border: 1px solid var(--borde); border-left: 4px solid var(--pri); border-radius: 10px; padding: 10px 12px; }

/* incrustada en la web del bar */
.embed body { background: transparent; }
.embed .caja { padding: 4px 4px 24px; max-width: none; }
.embed header { display: none; }
.embed section:first-of-type { margin-top: 0; }
/* la web del bar pone la tarjeta clara: dentro, siempre colores claros */
:root.embed { --bg: #f7f2ea; --sup: #fffdf9; --txt: #1d2a22; --txt2: #5d6b61; --borde: #e3dccf; --pri-suave: #efe6d6; --pri-txt: #fff; --error: #b91c1c; color-scheme: light; }
.embed section { background: var(--sup); }