:root {
  --rojo: #8b2119; --rojo-oscuro: #6d1912; --rojo-suave: #f6e9e7;
  --fondo: #f4f0eb; --panel: #ffffff; --texto: #1d2125; --suave: #5d646b; --borde: #e3ddd6;
  --verde: #2f6b4f; --ambar: #9a6a12;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 16px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; margin: 0 0 .4rem; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
button, .boton, select, input { font: inherit; }
button, .boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--borde); background: #fff; color: var(--texto); cursor: pointer; text-decoration: none; }
button:hover, .boton:hover { border-color: var(--rojo); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.primary:hover { background: var(--rojo-oscuro); }
.secondary { background: transparent; }
.link { border: 0; background: none; color: var(--suave); min-height: 44px; }
:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top { display: flex; align-items: center; gap: 1rem; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--borde); }
.logo { height: 38px; width: auto; display: block; }
.badge { font-size: .8rem; color: var(--rojo); background: var(--rojo-suave); border-radius: 999px; padding: .25rem .7rem; }
.top .link { margin-left: auto; }

.grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; max-width: 1240px; margin: 20px auto; padding: 0 20px; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 26px; }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--rojo); margin: 0 0 .4rem; }
.lead { color: var(--suave); margin: 0 0 1rem; max-width: 46ch; }
.sub { color: var(--suave); font-size: .92rem; margin: .2rem 0 .6rem; }

.orb { width: 132px; height: 132px; margin: 18px auto 8px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #c4544a, var(--rojo) 60%, #4d110c); box-shadow: 0 14px 40px rgba(139, 33, 25, .25); transition: transform .3s; }
.orb span { width: 52%; height: 52%; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.orb[data-state="conectando"] { animation: respira 1.2s ease-in-out infinite; }
.orb[data-state="escuchando"] span { animation: escucha 1.6s ease-in-out infinite; }
.orb[data-state="hablando"] { animation: habla .55s ease-in-out infinite alternate; }
.orb[data-state="error"] { filter: grayscale(.8); }
@keyframes respira { 50% { transform: scale(.94); opacity: .8; } }
@keyframes escucha { 50% { transform: scale(1.25); background: rgba(255, 255, 255, .28); } }
@keyframes habla { to { transform: scale(1.07); box-shadow: 0 18px 54px rgba(139, 33, 25, .42); } }
@media (prefers-reduced-motion: reduce) { .orb, .orb span { animation: none !important; } }
.estado { text-align: center; color: var(--suave); min-height: 1.5em; margin: .3rem 0 .8rem; }
.controles { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.controles .primary { min-width: 230px; font-size: 1.05rem; }

.opciones { margin: 1rem 0 .6rem; border-top: 1px solid var(--borde); padding-top: .6rem; }
.opciones summary { cursor: pointer; color: var(--suave); }
.opciones-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .6rem; }
label { display: grid; gap: .25rem; font-size: .85rem; color: var(--suave); }
select, input { min-height: 42px; padding: .4rem .7rem; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--texto); width: 100%; }

.chat { list-style: none; margin: .8rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 340px; overflow-y: auto; }
.chat li { padding: .55rem .85rem; border-radius: 14px; max-width: 88%; white-space: pre-wrap; }
.chat .agente { background: #f3efe9; align-self: flex-start; border-bottom-left-radius: 4px; }
.chat .usuario { background: var(--rojo); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat .sistema { align-self: center; font-size: .82rem; color: var(--verde); background: #edf5f0; }
.escribir { display: flex; gap: .5rem; }
.escribir input { flex: 1; border-radius: 999px; padding: 0 1rem; }

.ficha { transition: box-shadow .3s; align-self: start; position: sticky; top: 16px; }
.ficha.trabajando { box-shadow: 0 0 0 3px rgba(139, 33, 25, .18); }
.vacia p { color: var(--suave); }
.ideas-titulo { margin-bottom: .2rem; font-weight: 600; color: var(--texto) !important; }
.ideas { margin: 0; padding-left: 1.1rem; color: var(--suave); display: grid; gap: .35rem; }
.bloque { border-top: 1px solid var(--borde); padding-top: 1rem; margin-top: 1rem; animation: entra .35s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .45rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
tbody th small { display: block; font-weight: 400; color: var(--suave); font-size: .78rem; }
tbody th .libres { color: var(--verde); }
tr.agotada th .libres { color: var(--ambar); }
tr.agotada td { color: #a3a8ad; }
td small { color: var(--suave); }
.destacado { font-family: var(--serif); font-size: 1.2rem; margin: 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; margin: .6rem 0; padding: .7rem .9rem; background: #faf7f3; border-radius: 12px; }
.total strong { font-size: 1.35rem; color: var(--rojo); }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--rojo-suave); color: var(--rojo); padding: .1rem .55rem; border-radius: 8px; letter-spacing: .06em; }
.estado-reserva { display: inline-block; font-size: .85rem; padding: .2rem .7rem; border-radius: 999px; background: #fdf3e1; color: var(--ambar); }
.estado-reserva[data-estado="pagada"] { background: #e8f3ed; color: var(--verde); }
.estado-reserva[data-estado="cancelada"] { background: #eee; color: #666; }
.pagos { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 1rem; align-items: start; }
.qr { width: 164px; height: 164px; border: 1px solid var(--borde); border-radius: 12px; image-rendering: pixelated; background: #fff; }
.pagos-acciones { display: grid; gap: .5rem; }
.enlace { font-size: .85rem; color: var(--rojo); word-break: break-all; }

.pie { max-width: 1240px; margin: 0 auto 28px; padding: 0 20px; color: var(--suave); font-size: .8rem; text-align: center; }

.centrado { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login, .pago { width: min(460px, 100%); text-align: center; }
.login .logo, .pago .logo { height: 46px; margin: 4px auto 18px; }
.login form { display: grid; gap: .8rem; text-align: left; margin-top: 1rem; }
.pago { width: min(560px, 100%); text-align: left; }
.pago .logo { margin-left: 0; }
.codigo-grande { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.4rem; color: var(--rojo); margin: .3rem 0 1rem; }
.resumen { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 1rem; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; }
#p-accion .primary { width: 100%; margin-top: .4rem; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; padding: 0 16px; }
  .ficha { position: static; }
}
@media (max-width: 560px) {
  .top { padding: 10px 16px; flex-wrap: wrap; }
  .logo { height: 30px; }
  .panel { padding: 18px; border-radius: 14px; }
  .opciones-grid { grid-template-columns: 1fr; }
  .pagos { grid-template-columns: 1fr; justify-items: center; }
  .pagos-acciones { width: 100%; }
  .controles .primary { width: 100%; min-width: 0; }
  .resumen { grid-template-columns: 1fr; gap: .1rem; }
  .resumen dd { margin-bottom: .5rem; }
}

.habitaciones { display: grid; gap: .8rem; margin: .4rem 0 .6rem; }
.hab { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .9rem; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: #fff; animation: entra .35s ease-out; }
.hab img { width: 100%; height: 100%; min-height: 120px; object-fit: cover; display: block; background: #eee6dd; }
.hab-info { padding: .7rem .8rem .7rem 0; display: grid; gap: .25rem; align-content: start; }
.hab h4 { font-family: var(--serif); font-size: 1.15rem; margin: 0; }
.hab small { color: var(--suave); font-size: .8rem; }
.hab .libres { color: var(--verde); font-weight: 600; }
.hab.agotada img { filter: grayscale(.9); opacity: .6; }
.hab.agotada .libres { color: var(--ambar); }
.precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .3rem; }
.precio { flex-direction: column; align-items: flex-start; gap: 0; min-height: 52px; padding: .35rem .55rem; border-radius: 10px; font-size: .78rem; line-height: 1.2; text-align: left; }
.precio strong { font-size: .88rem; color: var(--rojo); white-space: nowrap; }
.precio:disabled small { font-size: .7rem; }
.elegir { justify-content: flex-start; padding: 0; min-height: 44px; color: var(--rojo); }
.centrado.con-foto { background: linear-gradient(rgba(20, 16, 14, .45), rgba(20, 16, 14, .55)), url("/fotos/hotel.webp") center 18% / cover no-repeat, var(--fondo); }
@media (max-width: 560px) {
  .hab { grid-template-columns: 1fr; }
  .hab img { height: 180px; }
  .hab-info { padding: 0 .8rem .8rem; }
}