:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#243047;background:#f3f5fa}
*{box-sizing:border-box}
body{margin:0}
.demo-banner{background:#ffe9b5;color:#704d0a;text-align:center;font-weight:700;font-size:12px;padding:9px}
.shell{display:flex;min-height:calc(100vh - 34px)}
.sidebar{width:266px;background:#242142;color:#fff;padding:26px 17px;display:flex;flex-direction:column;gap:36px}
.brand{display:flex;gap:12px;align-items:center}
.brand strong{display:block;font-size:16px}
.brand small{display:block;color:#bfc3dc;font-size:11px;margin-top:5px}
.logo{display:grid;place-items:center;border-radius:12px;background:#6360b7;width:43px;height:43px;font-weight:800;font-size:23px}
.sidebar nav{display:grid;gap:7px}
.nav-btn{cursor:pointer;text-align:left;color:#d7d8e8;border:0;border-radius:10px;background:transparent;padding:13px 14px;font-size:14px}
.nav-btn:hover,.nav-btn.active{background:#454270;color:#fff}
.aside-footer{margin-top:auto;font-size:11px;color:#b8bbd3;line-height:1.5}
.main{flex:1;min-width:0;padding:34px clamp(17px,4vw,55px)}
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:28px}
.eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:700;color:#777d94}
h1{font-size:28px;margin:7px 0 0}
.identity{display:flex;flex-direction:column;gap:6px}
.identity label{font-size:11px;color:#667085}
select,input,textarea{font:inherit;border:1px solid #cfd5e2;border-radius:9px;background:#fff;padding:10px 12px;max-width:100%}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:22px}
.card,.panel,.tile{background:white;border:1px solid #e2e6ee;border-radius:15px;padding:22px;box-shadow:0 3px 12px #17234c08}
.stat{font-size:32px;font-weight:750;margin:7px 0 3px;color:#322f66}
.muted{color:#6e7686;font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{display:block;text-align:left;cursor:pointer}
.tile:hover{border-color:#7973c3;box-shadow:0 7px 22px #3a367019}
.tile .emoji{display:block;font-size:25px;margin-bottom:13px}
.tile strong{display:block;margin-bottom:7px}
.panel{margin-bottom:20px}
.panel h2{font-size:19px;margin:0 0 12px}
button.primary{border:0;border-radius:10px;background:#514aa3;color:#fff;padding:12px 18px;cursor:pointer;font-weight:650}
button.primary:hover{background:#3d3882}
button.secondary{border:1px solid #cfd5e2;border-radius:10px;background:white;padding:10px 15px;cursor:pointer}
button.secondary:hover{border-color:#aeb7cb;background:#f8f9fc}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{width:100%}
.tag{display:inline-block;padding:5px 10px;border-radius:30px;font-size:12px;font-weight:650}
.pending{background:#fff2d5;color:#8a5d08}
.approved{background:#e0f5e8;color:#176037}
.rejected{background:#fce4e4;color:#9a2b2b}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 9px;border-bottom:1px solid #e8eaf1;font-size:13px}
th{color:#697387;font-size:12px}
footer{margin-top:28px;color:#8a90a0;font-size:12px}
.notice{padding:13px 16px;border-radius:10px;background:#eef1ff;color:#373d7c;font-size:13px;margin:14px 0}
.success{background:#e4f8ed;color:#185c3c}
.warn{background:#fff0d3;color:#835900}
.empty{padding:30px;text-align:center;color:#6e7686}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.table-scroll{overflow:auto}

.room-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.room-head h2{margin-bottom:5px}
.room-small{line-height:1.6;margin-top:14px}
.room-form-panel h3,.weekly-calendar-wrap h3{font-size:17px;margin:0 0 8px}
.room-form-head{margin-bottom:12px}
.room-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.room-user-chip{background:#f1f3fb;border:1px solid #dde2f0;color:#3c4476;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700;white-space:nowrap}

.week-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin:6px 0 18px}
.week-toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.week-range{padding:10px 14px;border-radius:10px;background:#f5f7fc;border:1px solid #e1e6f0;font-size:13px;font-weight:700;color:#353c67;white-space:nowrap}
.weekly-calendar-wrap{margin-top:20px}
.room-week-grid{display:grid;grid-template-columns:72px minmax(700px,1fr);gap:12px;overflow:auto;padding-bottom:6px}
.time-axis{display:grid;grid-template-rows:72px var(--calendar-height)}
.time-axis-head{border-bottom:1px solid #dfe5f0}
.time-axis-body{position:relative;height:var(--calendar-height)}
.time-label{position:absolute;left:0;width:100%;transform:translateY(-50%);font-size:12px;color:#7b8397;text-align:right;padding-right:10px}
.days-grid{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:12px;min-width:860px}
.day-column{border:1px solid #e1e6f0;border-radius:14px;background:#fbfcff;overflow:hidden}
.day-column.selected{border-color:#7268d5;box-shadow:0 0 0 3px #7268d51a}
.day-header{padding:12px 14px;border-bottom:1px solid #e3e8f3;background:#f5f7fd;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.day-header strong{font-size:19px;color:#2f315f}
.day-name{display:block;width:100%;font-size:12px;text-transform:uppercase;letter-spacing:.8px;font-weight:800;color:#6b73a0}
.day-body{position:relative;height:var(--calendar-height);cursor:pointer;background:linear-gradient(to bottom,transparent calc(100% - 1px), transparent 100%)}
.hour-line{position:absolute;left:0;right:0;border-top:1px dashed #e4e8f2}
.day-empty{position:absolute;left:10px;right:10px;top:10px;border:1px dashed #d7dce8;background:#fff;color:#8a90a0;border-radius:10px;padding:8px 10px;font-size:12px;text-align:center}
.week-booking{position:absolute;left:7px;right:7px;background:linear-gradient(180deg,#5f59c6,#4d46aa);color:#fff;border-radius:12px;padding:10px 10px 9px;box-shadow:0 8px 18px #3a367033;overflow:hidden}
.week-booking strong{display:block;font-size:13px;line-height:1.25;margin-bottom:6px}
.week-booking span{display:block;font-size:12px;opacity:.92;line-height:1.2}
.week-booking-time{font-size:11px;font-weight:800;letter-spacing:.2px;margin-bottom:6px;opacity:.95}

@media(max-width:1100px){
  .room-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week-toolbar{flex-direction:column;align-items:stretch}
}

@media(max-width:800px){
  .shell{display:block}
  .sidebar{width:auto;padding:16px;gap:15px}
  .sidebar nav{display:flex;overflow:auto;gap:5px}
  .nav-btn{white-space:nowrap;padding:10px}
  .aside-footer{display:none}
  .main{padding:22px 15px}
  .top{align-items:flex-start;flex-wrap:wrap}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{padding:14px}
  .stat{font-size:25px}
}

@media(max-width:640px){
  .cards,.tiles,.room-form-grid{grid-template-columns:1fr}
  .row{align-items:start;flex-direction:column}
  table{display:block;overflow-x:auto}
  .room-week-grid{grid-template-columns:56px minmax(600px,1fr)}
  .days-grid{min-width:760px}
}

/* Calendario anual de vacaciones v1.4 */
.vac-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.vac-stat{background:#fff;border:1px solid #e2e6ee;border-radius:15px;padding:19px 22px;display:grid;gap:8px;box-shadow:0 3px 12px #17234c08}.vac-stat span{font-weight:650;font-size:13px;color:#505b76}.vac-stat strong{font-size:34px;color:#39327c}.vac-stat small{color:#7b8598;font-size:12px}.vac-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.vac-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.vac-actions strong{padding:0 6px;font-size:20px}.vac-legend{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:21px;font-size:12px;color:#5a647c}.vac-legend span{display:inline-flex;align-items:center;gap:6px}.dot{display:inline-block;width:11px;height:11px;border-radius:50%}.dot.enjoyed,.vac-day.vac-enjoyed{background:#8d91b6;color:#fff}.dot.approved,.vac-day.vac-approved{background:#47bea1;color:#133c33}.dot.pending,.vac-day.vac-pending{background:#f3b651;color:#65420e}.dot.rejected,.vac-day.vac-rejected{background:#e78894;color:#602431}.dot.selected,.vac-day.vac-selected{background:#5f59c6;color:#fff}.vac-year{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:28px}.vac-month{min-width:0}.vac-month h3{text-align:center;font-size:14px;text-transform:capitalize;color:#47516d;margin:0 0 12px}.vac-month h3 span{font-size:12px;color:#8990a2}.vac-days,.vac-days-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.vac-days-head{margin-bottom:7px}.vac-days-head span{text-align:center;font-weight:700;font-size:11px;color:#8590a4}.vac-day{cursor:pointer;aspect-ratio:1;border:0;background:transparent;border-radius:50%;font-size:12px;color:#27344c;min-width:0;display:grid;place-items:center}.vac-day:hover{outline:2px solid #706ac5;outline-offset:-1px}.vac-day.vac-weekend:not(.vac-approved):not(.vac-enjoyed):not(.vac-pending):not(.vac-rejected):not(.vac-selected){background:#f0f2f6;color:#7b8292}.vac-day.vac-today{box-shadow:inset 0 0 0 2px #544bb0}.vac-form-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vac-form-panel{border:2px solid #e1defa}@media(max-width:1150px){.vac-year{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:790px){.vac-year{grid-template-columns:repeat(2,minmax(0,1fr))}.vac-toolbar{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.vac-year,.vac-stats,.vac-form-dates{grid-template-columns:1fr}.vac-board{padding:14px}.vac-month{max-width:330px;width:100%;margin:auto}}