:root{
  --navy:#063a68;--deep:#042d53;--cyan:#19a6d6;--green:#8dc63f;--ink:#0b3155;
  --muted:#667d91;--line:#dbe7ef;--bg:#f3f7fa;--white:#fff;--danger:#a83e3e;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit}
.hidden{display:none!important}
.topbar{
  min-height:82px;padding:14px clamp(20px,4vw,62px);display:flex;align-items:center;justify-content:space-between;
  gap:24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20
}
.brand{display:inline-flex}.brand img{width:235px;max-height:48px;object-fit:contain}
.top-actions{display:flex;align-items:center;gap:14px}
.portal-link{text-decoration:none;color:var(--navy);font-weight:800;font-size:14px}
.logout-btn,.secondary-btn{
  border:1px solid #cbd9e4;background:#fff;color:var(--navy);border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer
}
main{width:min(1420px,calc(100% - 40px));margin:0 auto;padding:40px 0 60px}
.hero{
  display:flex;justify-content:space-between;gap:32px;align-items:flex-end;padding:20px 4px 30px
}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.20em;color:#1697c6}
.hero h1,.gate-card h1{font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-.05em;margin:12px 0 16px;color:var(--deep)}
.hero p{max-width:760px;margin:0;color:var(--muted);font-size:18px;line-height:1.65}
.identity-pill{
  min-width:260px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px 18px;box-shadow:0 10px 28px rgba(7,48,89,.06)
}
.identity-pill span{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}
.identity-pill strong{font-size:15px;color:var(--deep)}
.room-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0 22px}
.room-option{
  text-align:left;border:1px solid var(--line);background:#fff;border-radius:18px;padding:20px;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;transition:.18s;box-shadow:0 8px 22px rgba(7,48,89,.04)
}
.room-option:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(7,48,89,.08)}
.room-option.selected{border-color:#55b9dc;box-shadow:0 0 0 3px rgba(25,166,214,.10),0 16px 30px rgba(7,48,89,.08)}
.room-index{
  grid-row:1 / span 2;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#eef8fc;color:#0c77a3;font-weight:900;font-size:12px
}
.room-option strong{align-self:end;font-size:18px;color:var(--deep)}
.room-option small{color:var(--muted)}
.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.7fr);gap:22px;align-items:start}
.booking-card,.my-bookings,.gate-card,.policy-note{
  background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 14px 38px rgba(7,48,89,.06)
}
.booking-card{padding:30px}
.my-bookings{padding:26px;position:sticky;top:104px}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.section-heading h2{font-size:30px;letter-spacing:-.03em;margin:8px 0 0;color:var(--deep)}
.section-heading.compact{margin-bottom:18px}
.hours-badge{padding:11px 14px;border-radius:14px;background:#f2f8fb;border:1px solid #dceaf2;text-align:right}
.hours-badge strong,.hours-badge span{display:block}.hours-badge strong{font-size:12px;color:var(--deep)}.hours-badge span{font-size:12px;color:var(--muted);margin-top:2px}
.form-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
label>span{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;color:#46637b;margin:0 0 7px}
input,select{
  width:100%;height:48px;border:1px solid #cbdbe6;border-radius:12px;background:#fff;color:var(--deep);padding:0 13px;outline:none
}
input:focus,select:focus{border-color:#36abd4;box-shadow:0 0 0 3px rgba(25,166,214,.10)}
label small{display:block;color:#8295a5;font-size:11px;margin-top:6px;line-height:1.4}
.availability-block{margin-top:26px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.availability-head{display:flex;justify-content:space-between;gap:20px;padding:16px 18px;background:#f9fbfc;border-bottom:1px solid var(--line)}
.availability-head strong,.availability-head>div>span{display:block}.availability-head strong{font-size:14px}.availability-head>div>span{font-size:12px;color:var(--muted);margin-top:3px}
.legend{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap}.legend span{display:flex!important;align-items:center;gap:5px!important;margin:0!important}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.available-dot{background:#dbe8ef}.busy-dot{background:#8399aa}.selected-dot{background:#18a6d6}
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:18px;min-height:90px}
.slot{border:0;border-radius:10px;background:#edf3f6;color:#567084;padding:9px 6px;font-size:12px;text-align:center}
.slot.busy{background:#e0e6ea;color:#8a99a4;text-decoration:line-through}
.slot.chosen{background:#159fcf;color:#fff;font-weight:900}
.booking-summary{
  margin-top:20px;padding:18px 20px;border-radius:17px;background:linear-gradient(135deg,#07355f,#0b5a8a);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.booking-summary span{display:block;font-size:10px;letter-spacing:.17em;color:#75d1ef;font-weight:900}
.booking-summary strong{display:block;margin-top:5px;font-size:18px}.booking-summary small{display:block;margin-top:5px;color:rgba(255,255,255,.72)}
.confirm-btn{
  border:0;border-radius:12px;background:#fff;color:#063a68;font-weight:900;padding:13px 16px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.08)
}
.confirm-btn:disabled{opacity:.45;cursor:not-allowed}
.form-msg{min-height:22px;margin:12px 2px 0;color:#59748a;font-size:13px}.form-msg.bad{color:var(--danger)}.form-msg.good{color:#3e7b29}
.bookings-list{display:flex;flex-direction:column;gap:12px}
.booking-item{border:1px solid var(--line);border-radius:16px;padding:15px}
.booking-item-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.booking-item strong{color:var(--deep)}.booking-date{font-size:12px;font-weight:900;color:#188db8}.booking-time{font-size:14px;color:#4c687f;margin:7px 0 2px}.booking-status{font-size:11px;color:#6f8595}
.cancel-btn{margin-top:10px;border:0;background:#f6eeee;color:#8f3434;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:900;cursor:pointer}
.empty-state{padding:28px 12px;text-align:center;color:#8194a3;font-size:14px;line-height:1.5}
.policy-note{margin-top:22px;padding:18px 22px}.policy-note strong{display:block;color:var(--deep);margin-bottom:4px}.policy-note p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.gate-card{max-width:720px;margin:70px auto;padding:38px}.gate-card p{color:var(--muted);font-size:17px;line-height:1.6}.primary-link{display:inline-flex;margin-top:10px;text-decoration:none;background:var(--navy);color:#fff;border-radius:12px;padding:12px 15px;font-weight:900}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,25,45,.62);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:min(560px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.28)}
.modal-card h2{font-size:30px;margin:8px 0 20px;color:var(--deep)}
.modal-close{position:absolute;right:17px;top:14px;border:0;background:transparent;font-size:30px;color:#74899a;cursor:pointer}
.modal-details{border:1px solid var(--line);border-radius:16px;padding:18px;background:#f9fbfc;line-height:1.7}
.modal-details strong{color:var(--deep)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-actions .confirm-btn{background:var(--navy);color:#fff}
@media(max-width:1050px){
  .workspace{grid-template-columns:1fr}.my-bookings{position:static}.timeline{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .topbar{align-items:flex-start}.brand img{width:190px}.top-actions{align-items:flex-end;flex-direction:column;gap:6px}
  main{width:min(100% - 24px,1420px);padding-top:22px}.hero{align-items:flex-start;flex-direction:column}.identity-pill{width:100%}
  .room-selector{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.booking-card{padding:20px}.section-heading{flex-direction:column}
  .hours-badge{text-align:left}.availability-head{flex-direction:column}.timeline{grid-template-columns:repeat(3,1fr)}
  .booking-summary{align-items:flex-start;flex-direction:column}.booking-summary .confirm-btn{width:100%}
}


/* V19.3 · Invitados, calendario y permisos de Sala Grande */
.guest-picker{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fbfcfd}
.guest-picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}.field-title{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;color:#46637b}.guest-picker-head small{display:block;margin-top:5px;color:#8295a5;line-height:1.45}.guest-picker-head>span{font-size:11px;font-weight:900;color:#178bb5;white-space:nowrap}
.guest-search-wrap{position:relative}.guest-results{position:absolute;z-index:15;left:0;right:0;top:54px;max-height:260px;overflow:auto;background:#fff;border:1px solid #ccdce7;border-radius:14px;box-shadow:0 18px 42px rgba(6,47,89,.14);padding:6px}.guest-result{width:100%;border:0;background:#fff;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer}.guest-result:hover{background:#eef7fb}.guest-result strong,.guest-result span{display:block}.guest-result strong{color:var(--deep);font-size:13px}.guest-result span{font-size:11px;color:var(--muted);margin-top:3px}.guest-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.guest-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe0e9;background:#fff;border-radius:999px;padding:7px 9px 7px 12px;font-size:12px;color:#31566f}.guest-chip button{width:22px;height:22px;border:0;border-radius:50%;background:#eef3f6;color:#587084;cursor:pointer;line-height:1}
.post-booking-actions{display:flex;justify-content:flex-end;margin-top:12px}.calendar-btn,.calendar-mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:11px;background:#f0f8fb;border:1px solid #cce7f1;color:#08769d;font-weight:900}.calendar-btn{padding:11px 14px;font-size:13px}.calendar-mini{padding:8px 9px;font-size:11px;margin-top:10px;margin-right:7px}.booking-guests{font-size:11px;color:#6f8595;margin-top:6px;line-height:1.4}.restricted-note{grid-column:1/-1;padding:12px 14px;border:1px solid #e3e8eb;border-radius:12px;color:#738795;font-size:12px;background:#fafcfd}.build-footer{text-align:center;color:#8b9eac;font-size:11px;padding:28px 0 6px}
@media(max-width:760px){.guest-picker-head{flex-direction:column}.post-booking-actions{justify-content:stretch}.calendar-btn{width:100%}}


/* V20.6 · Reglamento de salas: integrado en la misma vista de reservaciones. */
.room-rules-shortcut{
  display:inline-flex;align-items:center;gap:9px;margin-top:17px;padding:10px 0;
  color:#087eaa;font-size:14px;font-weight:800;text-decoration:none;
  border-bottom:1px solid rgba(25,166,214,.35);transition:color .18s,border-color .18s
}
.room-rules-shortcut:hover{color:var(--deep);border-bottom-color:var(--deep)}
.room-rules-shortcut:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:3px}
.room-rules-shortcut span{font-size:18px;line-height:1}
.room-regulations{margin-top:26px;scroll-margin-top:115px}
.rules-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:8px 4px 22px}
.rules-heading h2{font-size:clamp(25px,3vw,37px);letter-spacing:-.04em;line-height:1.15;color:var(--deep);margin:8px 0 9px}
.rules-heading p{color:var(--muted);line-height:1.6;margin:0;max-width:720px;font-size:15px}
.rules-count{flex:0 0 auto;border:1px solid #d4e8f1;background:#eaf6fa;color:#0a769e;border-radius:999px;
 padding:10px 13px;font-size:11px;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.rules-grid{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rule-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:15px;align-items:start;
 border:1px solid var(--line);border-radius:19px;background:#fff;padding:22px;
 box-shadow:0 9px 25px rgba(7,48,89,.045)}
.rule-number{width:43px;height:43px;display:flex;align-items:center;justify-content:center;
 border-radius:13px;background:#edf7fb;color:#0788b5;font-size:13px;font-weight:900;letter-spacing:.04em}
.rule-card h3{font-size:16px;line-height:1.3;letter-spacing:-.015em;color:var(--deep);margin:2px 0 7px}
.rule-card p{font-size:14px;line-height:1.65;color:#5d7488;margin:0}
.rule-card-final{grid-column:1/-1;background:linear-gradient(110deg,#eff8fb,#f7fbfa);border-color:#d4e7ea}
.rule-card-final .rule-number{background:var(--navy);color:#fff}
@media(max-width:760px){
 .rules-heading{flex-direction:column;gap:14px}
 .rules-count{align-self:flex-start}
 .rules-grid{grid-template-columns:minmax(0,1fr)}
 .rule-card{grid-template-columns:39px minmax(0,1fr);padding:17px;gap:12px}
 .rule-number{width:37px;height:37px;border-radius:11px}
 .rule-card-final{grid-column:auto}
 .room-regulations{scroll-margin-top:135px}
}

/* V20.7 - Solicitud de alimentos, enlace independiente de reservaciones. */
.room-catering{display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid #cfdee7;background:linear-gradient(110deg,#f8fcfb,#eef7f7);border-radius:18px;padding:24px 27px;margin:14px 0 23px;box-shadow:0 8px 25px rgba(11,60,86,.04)}
.room-catering .eyebrow{color:#31879b;font-size:10px}
.room-catering h2{font-size:clamp(18px,2.2vw,23px);color:#073a5b;line-height:1.25;margin:9px 0 6px}
.room-catering p{margin:0;color:#566f7b;font-size:13px;line-height:1.65;max-width:570px}
.room-catering-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;color:#fff!important;background:#087b67;border:1px solid #087b67;text-decoration:none;border-radius:11px;padding:14px 18px;font-weight:800;font-size:13px;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.room-catering-button:hover{background:#066253;transform:translateY(-2px)}
.room-catering-button:focus-visible{outline:3px solid #08a9d4;outline-offset:4px}
@media(max-width:760px){.room-catering{flex-direction:column;align-items:stretch;gap:18px;padding:20px}.room-catering-button{width:100%}}