/* Hostal Santa Maria · sistema visual compartido
   Concepto: azulejo de talavera (cobalto sobre blanco) con un acento cempasúchil. */
:root {
  --fondo: #F6F7FB;
  --superficie: #FFFFFF;
  --superficie-2: #EEF1F8;
  --tinta: #14203B;
  --tenue: #586380;
  --linea: #DCE1EC;
  --cobalto: #2346A3;
  --cobalto-suave: #E3E9F8;
  --cempasuchil: #E59A12;
  --cempasuchil-suave: #FCEFD3;
  --exito: #23804F;
  --peligro: #B93A2B;

  --st-libre: #E6F4EC;      --st-libre-t: #1F6B43;
  --st-ocupada: #2346A3;    --st-ocupada-t: #FFFFFF;
  --st-reservada: #F6C35A;  --st-reservada-t: #4A3205;
  --st-solicitud: #FCEFD3;  --st-solicitud-t: #7A5208;
  --st-limpieza: #E3E7EF;   --st-limpieza-t: #46506A;
  --st-mantenimiento: #F7DDD8; --st-mantenimiento-t: #8A2A1E;

  --f-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 32, 59, .06), 0 8px 24px rgba(20, 32, 59, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0D1322; --superficie: #151D31; --superficie-2: #1C2640; --tinta: #E7EBF5; --tenue: #9AA4BD; --linea: #28334F;
    --cobalto: #7C9BF2; --cobalto-suave: #1F2C52; --cempasuchil: #F3B23C; --cempasuchil-suave: #3A2C10; --exito: #5CC48C; --peligro: #F08A7A;
    --st-libre: #163327; --st-libre-t: #8FE0B4; --st-ocupada: #3C5FC4; --st-ocupada-t: #FFFFFF; --st-reservada: #C9921F; --st-reservada-t: #1E1402;
    --st-solicitud: #3A2C10; --st-solicitud-t: #F6CD7C; --st-limpieza: #252E45; --st-limpieza-t: #AEB7CC; --st-mantenimiento: #45201B; --st-mantenimiento-t: #F5ADA1;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0D1322; --superficie: #151D31; --superficie-2: #1C2640; --tinta: #E7EBF5; --tenue: #9AA4BD; --linea: #28334F;
  --cobalto: #7C9BF2; --cobalto-suave: #1F2C52; --cempasuchil: #F3B23C; --cempasuchil-suave: #3A2C10; --exito: #5CC48C; --peligro: #F08A7A;
  --st-libre: #163327; --st-libre-t: #8FE0B4; --st-ocupada: #3C5FC4; --st-ocupada-t: #FFFFFF; --st-reservada: #C9921F; --st-reservada-t: #1E1402;
  --st-solicitud: #3A2C10; --st-solicitud-t: #F6CD7C; --st-limpieza: #252E45; --st-limpieza-t: #AEB7CC; --st-mantenimiento: #45201B; --st-mantenimiento-t: #F5ADA1;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
a { color: var(--cobalto); }
:focus-visible { outline: 2px solid var(--cempasuchil); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.etiqueta { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--f-texto); padding: 11px 16px; border-radius: 8px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { border-color: var(--cobalto); }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--cobalto); border-color: var(--cobalto); color: var(--superficie); }
.btn-primario:hover { filter: brightness(1.08); }
.btn-acento { background: var(--cempasuchil); border-color: var(--cempasuchil); color: #2A1A00; }
.btn-peligro { color: var(--peligro); }
.btn-peligro:hover { border-color: var(--peligro); }
.btn-chico { padding: 7px 11px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Formularios */
.campo { display: grid; gap: 5px; min-width: 0; }
.campo label { font-size: 13px; font-weight: 600; color: var(--tenue); }
.campo input, .campo select, .campo textarea { font: 15px var(--f-texto); color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; width: 100%; }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cobalto); box-shadow: 0 0 0 3px var(--cobalto-suave); }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Estados de habitación */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-libre { background: var(--st-libre); color: var(--st-libre-t); }
.st-ocupada { background: var(--st-ocupada); color: var(--st-ocupada-t); }
.st-reservada { background: var(--st-reservada); color: var(--st-reservada-t); }
.st-solicitud { background: var(--st-solicitud); color: var(--st-solicitud-t); }
.st-limpieza { background: var(--st-limpieza); color: var(--st-limpieza-t); }
.st-mantenimiento { background: var(--st-mantenimiento); color: var(--st-mantenimiento-t); }
.st-finalizada, .st-cancelada { background: var(--superficie-2); color: var(--tenue); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(10, 16, 32, .55); }
.modal-caja { background: var(--superficie); color: var(--tinta); border-radius: 14px; box-shadow: var(--sombra); width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 22px; display: grid; gap: 16px; }
.modal-caja.ancha { width: min(780px, 100%); }
.modal-cab { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.modal-cab h2 { font-size: 24px; }
.cerrar { border: 0; background: transparent; color: var(--tenue); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Aviso flotante */
.aviso { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tinta); color: var(--fondo); padding: 11px 18px; border-radius: 8px; font-weight: 600; z-index: 80; box-shadow: var(--sombra); max-width: calc(100% - 32px); }

/* Tickets (80 mm) */
.tickets { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ticket { width: 300px; max-width: 100%; background: #FFFFFF; color: #111111; font: 12px/1.45 var(--f-mono); padding: 18px 16px; border-radius: 4px; box-shadow: 0 1px 0 #ddd, 0 6px 18px rgba(0,0,0,.12); }
.t-cab { text-align: center; }
.t-titulo { text-align: center; font-weight: 700; margin-bottom: 6px; }
.t-sep { border-top: 1px dashed #777; margin: 8px 0; }
.t-linea { display: flex; justify-content: space-between; gap: 10px; }
.t-linea span:last-child { text-align: right; white-space: nowrap; }
.t-total { font-weight: 700; font-size: 13px; }
.t-pie { text-align: center; font-size: 11px; }
.t-qr { text-align: center; font-size: 11px; margin-top: 10px; display: grid; justify-items: center; gap: 4px; }
.t-qr svg { width: 120px; height: 120px; display: block; }
.ticket.papel-58 { width: 230px; font-size: 11px; }
.ticket.papel-58 .t-qr svg { width: 100px; height: 100px; }
@media print {
  body * { visibility: hidden !important; }
  .tickets, .tickets * { visibility: visible !important; }
  .tickets { position: absolute; left: 0; top: 0; display: block; }
  .ticket { box-shadow: none; page-break-after: always; width: 72mm; }
  .ticket.papel-58 { width: 48mm; }
  .t-qr svg { width: 32mm; height: 32mm; }
  .ticket.papel-58 .t-qr svg { width: 28mm; height: 28mm; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Patrón de azulejo de talavera: se pinta con el color del tema */
.talavera { position: relative; isolation: isolate; }
.talavera::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--patron-color, var(--cobalto)); opacity: var(--patron-opacidad, .12);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2756%27%20viewBox%3D%270%200%2056%2056%27%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2728%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M28%206c5%207%205%2012%200%2016-5-4-5-9%200-16zM28%2050c-5-7-5-12%200-16%205%204%205%209%200%2016zM6%2028c7-5%2012-5%2016%200-4%205-9%205-16%200zM50%2028c-7%205-12%205-16%200%204-5%209-5%2016%200z%27%2F%3E%3Cpath%20d%3D%27M0%200h9L0%209zM56%200v9L47%200zM0%2056v-9l9%209zM56%2056h-9l9-9z%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2728%27%20r%3D%2715%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2756%27%20viewBox%3D%270%200%2056%2056%27%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2728%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M28%206c5%207%205%2012%200%2016-5-4-5-9%200-16zM28%2050c-5-7-5-12%200-16%205%204%205%209%200%2016zM6%2028c7-5%2012-5%2016%200-4%205-9%205-16%200zM50%2028c-7%205-12%205-16%200%204-5%209-5%2016%200z%27%2F%3E%3Cpath%20d%3D%27M0%200h9L0%209zM56%200v9L47%200zM0%2056v-9l9%209zM56%2056h-9l9-9z%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2728%27%20r%3D%2715%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat; -webkit-mask-size: var(--patron-tam, 56px); mask-size: var(--patron-tam, 56px); pointer-events: none; }