:root {
  --forest-950:#0b241a; --forest-900:#123629; --forest-800:#194936; --forest-700:#266149;
  --sage-100:#e9f0eb; --sage-50:#f5f8f5; --cream:#f4f2ec; --paper:#fff;
  --ink:#17241d; --muted:#67756d; --line:#dce3de; --warm:#c98451; --warm-soft:#f4e7dc;
  --danger:#a3443e; --danger-soft:#f8e9e7; --blue:#3f6f88; --shadow:0 16px 40px rgba(14,48,35,.09);
  --radius:14px; --sidebar:254px;
}
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; background:var(--cream); color:var(--ink); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { touch-action:manipulation; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(201,132,81,.35); outline-offset:2px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; }
.boot { min-height:55vh; display:grid; place-items:center; color:var(--forest-800); font:600 25px Georgia,serif; }
.boot:after { content:""; width:28px; height:28px; border:3px solid var(--sage-100); border-top-color:var(--warm); border-radius:50%; animation:spin .8s linear infinite; margin-left:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Acceso */
.login { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.15fr) minmax(360px,.85fr); background:var(--paper); }
.login-visual { position:relative; min-height:100vh; padding:46px; background:linear-gradient(140deg,rgba(8,37,26,.8),rgba(12,55,39,.12)),url('/katarri.jpg') center/cover; color:#fff; }
.login-visual .logo { position:relative; z-index:1; }
.login-form { display:grid; place-items:center; padding:48px; }
.login-wrap { width:min(390px,100%); }
.login-language { margin:0 0 72px auto; width:max-content; }
.login-card > small,.kicker { font-size:10px; line-height:1.2; letter-spacing:.18em; color:#78877f; font-weight:800; text-transform:uppercase; }
.login-card h1 { margin:10px 0 32px; color:var(--forest-900); font-size:44px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-mark { width:44px; height:44px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-items:center; font:600 25px Georgia,serif; }
.logo strong,.logo small { display:block; }
.logo strong { font:600 24px Georgia,serif; }
.logo small { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#b8cbc1; }

/* Controles */
.field { display:grid; gap:7px; margin:15px 0; color:#53625a; font-size:12px; font-weight:650; }
.field input,.field select,.field textarea,.toolbar input,.toolbar select,.language select {
  width:100%; min-height:43px; border:1px solid var(--line); border-radius:9px; background:#fbfcfa; padding:10px 12px; color:var(--ink); transition:border-color .16s,box-shadow .16s;
}
.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus { border-color:var(--forest-700); box-shadow:0 0 0 3px rgba(38,97,73,.1); outline:0; }
.field textarea { min-height:112px; resize:vertical; }
.field small { color:var(--muted); font-weight:400; }
.primary,.secondary,.danger,.ghost,.icon-btn { border:0; border-radius:9px; min-height:40px; padding:9px 14px; cursor:pointer; font-weight:700; transition:transform .12s,background .16s,opacity .16s; }
.primary:hover,.secondary:hover,.danger:hover { transform:translateY(-1px); }
.primary { color:#fff; background:var(--forest-800); box-shadow:0 5px 14px rgba(25,73,54,.18); }
.primary:hover { background:var(--forest-700); }
.secondary { color:var(--forest-800); background:var(--sage-100); }
.secondary:hover { background:#dce9e0; }
.danger { color:var(--danger); background:var(--danger-soft); }
.danger:hover { background:#f2d9d6; }
.ghost { color:var(--forest-800); background:transparent; }
.ghost:hover { background:var(--sage-50); }
.icon-btn { min-width:40px; padding:7px; color:var(--forest-800); background:transparent; font-size:21px; }
.icon-btn:hover { background:var(--sage-100); }
.wide { width:100%; }
.check { display:flex; align-items:center; gap:8px; margin:12px 0; }
.error { padding:12px 14px; margin:12px 0; border:1px solid #eccdca; border-radius:9px; color:#8d3732; background:var(--danger-soft); }
.panel-error { margin:40px; }

/* Estructura */
.shell { min-height:100vh; }
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:var(--sidebar); padding:29px 20px 22px; display:flex; flex-direction:column; color:#fff; background:linear-gradient(180deg,var(--forest-950),var(--forest-900)); }
.sidebar > .logo { padding:0 8px; margin-bottom:33px; }
.nav { display:grid; gap:4px; overflow:auto; }
.nav button { width:100%; border:0; border-radius:9px; padding:11px 12px; display:flex; align-items:center; gap:10px; color:#aebfb6; background:transparent; text-align:left; cursor:pointer; font-weight:600; }
.nav button span { width:22px; color:#829b8e; text-align:center; font-size:16px; }
.nav button b { flex:1; font:inherit; }
.nav-badge { min-width:21px; height:21px; padding:2px 5px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--danger); font-size:9px; font-style:normal; font-weight:900; }
.nav-badge[hidden] { display:none; }
.nav button:hover,.nav button.active { color:#fff; background:rgba(255,255,255,.09); }
.nav button.active span { color:#e8b68f; }
.profile { margin-top:auto; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); }
.profile-main { width:100%; border:0; padding:4px; display:flex; gap:10px; align-items:center; color:#fff; background:transparent; text-align:left; cursor:pointer; }
.profile-main > span:nth-child(2) { min-width:0; }
.profile-main strong,.profile-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-main small { color:#98aea2; font-size:10px; margin-top:2px; }
.avatar { flex:0 0 auto; width:37px; height:37px; border-radius:50%; display:grid; place-items:center; color:var(--forest-950); background:var(--warm); font-size:10px; font-weight:900; }
.logout { width:100%; border:0; margin-top:10px; padding:8px 9px; display:flex; align-items:center; gap:9px; border-radius:8px; color:#aebfb6; background:transparent; cursor:pointer; text-align:left; }
.logout:hover { color:#fff; background:rgba(255,255,255,.07); }
.main { min-height:100vh; margin-left:var(--sidebar); }
.topbar { height:62px; padding:0 36px; display:flex; align-items:center; justify-content:flex-end; gap:18px; border-bottom:1px solid rgba(220,227,222,.8); background:rgba(244,242,236,.9); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.topbar > #mobile-menu { display:none; }
.topbar-spacer { flex:1; }
.language { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; font-weight:700; }
.language select { width:auto; min-height:34px; padding:6px 28px 6px 9px; background:var(--paper); }
.profile-chip { border:0; display:flex; align-items:center; gap:8px; background:transparent; color:var(--ink); cursor:pointer; font-weight:700; }
.profile-chip .avatar { width:31px; height:31px; }
.notification-button { position:relative; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:#aab4ae; background:var(--paper); cursor:pointer; }
.notification-button.has-updates { color:var(--warm); border-color:#e4c4aa; box-shadow:0 0 0 3px var(--warm-soft); }
.notification-button > span { position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:3px 5px; border-radius:12px; color:#fff; background:var(--danger); font-size:9px; font-weight:900; }
.notification-button > span[hidden] { display:none; }
.content { width:min(1440px,100%); margin:auto; padding:38px 46px 90px; }
.mobile-nav { display:none; }

/* Títulos, paneles, tarjetas */
.page-title { margin-bottom:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:22px; }
.page-title h1 { margin:6px 0 5px; color:var(--forest-900); font-size:clamp(34px,4vw,48px); line-height:1.08; }
.page-title p { max-width:720px; margin:0; color:var(--muted); }
.page-actions { display:flex; gap:9px; flex:0 0 auto; }
.grid { display:grid; gap:16px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.card { position:relative; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:0 4px 16px rgba(15,54,39,.025); }
.card h3 { margin:6px 0 8px; color:var(--forest-900); font-size:21px; }
.card p { margin-bottom:10px; color:var(--muted); }
.meta { min-height:24px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#78867e; font-size:10px; }
.tag,.pill,.role,.audit-action { display:inline-flex; align-items:center; min-height:23px; padding:3px 8px; border-radius:20px; color:var(--forest-700); background:var(--sage-100); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.meal-dinner { color:#5c4f85; background:#eeeaf8; }
.pill.off { color:var(--danger); background:var(--danger-soft); }
.role-admin { color:#7e422b; background:var(--warm-soft); }
.role-board { color:#3e597d; background:#e9eff6; }
.card-actions,.table-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.card-actions button { min-height:35px; padding:7px 10px; font-size:11px; }
.chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.chip { padding:4px 7px; border-radius:5px; color:#64726a; background:var(--sage-50); font-size:9px; }
.empty { padding:48px 24px; color:var(--muted); text-align:center; }
.section-title { margin:30px 0 13px; display:flex; justify-content:space-between; align-items:center; }
.section-title h2 { margin:0; color:var(--forest-900); font-size:27px; }
.preserve-lines { white-space:pre-line; }

/* Inicio */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.stat-card { min-height:112px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:var(--paper); cursor:pointer; text-align:left; }
.stat-card:hover { border-color:#bdccc3; box-shadow:var(--shadow); }
.stat-card strong { color:var(--forest-800); font:600 36px Georgia,serif; }
.stat-card span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr); gap:24px; }
.timeline { display:grid; gap:11px; }
.home-section { margin-top:34px; }
.home-section .section-title { margin-bottom:14px; }
.section-kind { display:inline-flex; padding:4px 8px; border-radius:5px; font-size:8px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.reservation-kind { color:var(--forest-700); background:var(--sage-100); }
.event-kind { color:#8b4e2d; background:var(--warm-soft); }
.notice-kind { color:#41657a; background:#e9f0f4; }
.reservation-stat { border-top:4px solid var(--forest-700); }
.event-stat { border-top:4px solid var(--warm); }
.notice-stat { border-top:4px solid var(--blue); }
.reservation-agenda { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.reservation-agenda-row { min-height:74px; padding:11px 16px; display:grid; grid-template-columns:48px 34px minmax(180px,1fr) auto; align-items:center; gap:13px; border-bottom:1px solid #edf0ed; }
.reservation-agenda-row:last-child { border-bottom:0; }
.reservation-agenda-row:hover { background:var(--sage-50); }
.reservation-agenda-row p { margin:2px 0 0; color:var(--muted); font-size:10px; }
.reservation-date { padding-right:10px; border-right:1px solid var(--line); text-align:center; }
.reservation-date strong,.reservation-date span { display:block; }
.reservation-date strong { color:var(--forest-800); font:600 24px Georgia,serif; line-height:1; }
.reservation-date span { color:var(--muted); font-size:8px; text-transform:uppercase; }
.meal-icon { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#8a612e; background:#f8ead2; }
.meal-icon.meal-dinner { color:#56517b; background:#eae8f5; }
.table-summary { color:var(--muted); font-size:10px; }
.event-showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.event-spotlight { min-height:190px; padding:22px; display:grid; grid-template-columns:58px 1fr; gap:15px; border:1px solid #e7c9b1; border-radius:var(--radius); color:#402a1f; background:linear-gradient(145deg,#fffaf5,#f3e3d5); box-shadow:0 8px 25px rgba(130,76,42,.08); }
.event-spotlight-date { width:54px; height:65px; padding:8px 4px; border-radius:10px; color:#fff; background:var(--warm); text-align:center; }
.event-spotlight-date strong,.event-spotlight-date span { display:block; }
.event-spotlight-date strong { font:600 28px Georgia,serif; line-height:1; }
.event-spotlight-date span { margin-top:5px; font-size:9px; text-transform:uppercase; }
.event-label { color:#9b633d; font-size:8px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.event-spotlight h3 { margin:6px 0; color:#663b25; font-size:23px; }
.event-spotlight p { color:#85634f; font-size:11px; }
.attendee-preview { margin-top:18px; display:flex; align-items:center; }
.attendee-preview .mini-avatar + .mini-avatar { margin-left:-7px; }
.attendee-preview strong { margin-left:10px; color:#7e543b; font-size:10px; }
.notice-home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

/* Reservas */
.reservation-list { display:grid; gap:11px; }
.reservation-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:17px; }
.reservation-card.compact { grid-template-columns:54px minmax(0,1fr); }
.reservation-card.cancelled { opacity:.62; }
.datebox { padding-right:15px; border-right:1px solid var(--line); text-align:center; }
.datebox strong,.datebox span { display:block; }
.datebox strong { color:var(--forest-800); font:600 28px Georgia,serif; line-height:1; }
.datebox span { margin-top:4px; color:var(--muted); font-size:8px; font-weight:800; }
.reservation-card h3 { margin-bottom:3px; }
.reservation-card p { margin:0; font-size:12px; }
.segmented { width:max-content; margin:0 0 17px; padding:4px; display:flex; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.segmented button { border:0; min-height:34px; padding:6px 13px; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; }
.segmented button.active { color:#fff; background:var(--forest-800); }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px 13px; }
.form-grid.two-cols { grid-template-columns:1fr 1fr; }
.form-grid .field { margin:0; }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.span-4 { grid-column:span 4; }
.floorplan { position:relative; margin:13px 0 7px; padding:27px 16px 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; border:1px solid #d5ddd7; border-radius:12px; background:#edf1ed; }
.floorplan:before { content:""; position:absolute; top:9px; left:15%; right:15%; height:3px; border-radius:4px; background:#c5d2ca; }
.table-btn { min-height:63px; border:1px solid #b9c8bf; border-radius:20px; color:var(--forest-800); background:#fff; cursor:pointer; }
.table-btn strong,.table-btn small { display:block; }
.table-btn small { margin-top:2px; color:var(--muted); font-size:9px; }
.table-btn.selected { border-color:var(--forest-800); color:#fff; background:var(--forest-800); }
.table-btn.selected small { color:#d6e1db; }
.table-btn.occupied,.table-btn:disabled { border-color:#dfcec3; color:#8f7665; background:#efe4dd; cursor:not-allowed; opacity:.8; }
.capacity-label { margin:8px 0 19px; color:var(--forest-700); font-size:11px; font-weight:700; text-align:right; }
.equipment { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.resource { min-height:70px; padding:11px; border:1px solid var(--line); border-radius:9px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; background:#fbfcfa; }
.resource > span { font-weight:700; }
.resource input[type=number] { width:58px; min-height:34px; border:1px solid var(--line); border-radius:7px; padding:5px; }
.resource small { grid-column:1/-1; color:var(--muted); font-size:9px; }

/* Calendario */
.calendar-panel { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.calendar-toolbar { min-height:74px; padding:13px 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.calendar-toolbar > div:first-child { display:flex; gap:5px; }
.calendar-toolbar h2 { margin:0; color:var(--forest-900); text-transform:capitalize; }
.legend { justify-self:end; display:flex; gap:13px; color:var(--muted); font-size:10px; }
.legend span { display:flex; align-items:center; gap:5px; }
.legend i { width:8px; height:8px; border-radius:50%; }
.reservation-dot { background:var(--forest-700); }
.event-dot { background:var(--warm); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.weekdays { color:var(--muted); background:var(--sage-50); font-size:9px; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.weekdays > div { padding:9px; border-right:1px solid var(--line); }
.calendar-day { min-height:128px; padding:8px; border-top:1px solid var(--line); border-right:1px solid var(--line); background:#fff; }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.outside { background:#fafbf9; }
.calendar-day.outside .day-number { opacity:.35; }
.calendar-day.is-today { box-shadow:inset 0 3px var(--warm); }
.day-number { display:inline-grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#526159; font-size:11px; font-weight:800; }
.is-today .day-number { color:#fff; background:var(--warm); }
.day-items { margin-top:4px; display:grid; gap:4px; }
.calendar-item { width:100%; min-width:0; border:0; border-left:3px solid var(--forest-700); border-radius:4px; padding:5px 6px; overflow:hidden; color:var(--forest-800); background:var(--sage-100); cursor:pointer; font-size:9px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.calendar-item.event-item { border-left-color:var(--warm); color:#7d4a2e; background:var(--warm-soft); }
.calendar-item span { font-weight:900; }

/* Eventos y avisos */
.event-card { overflow:hidden; padding-top:28px; border-color:#e7cdb9; background:linear-gradient(160deg,#fff,#fff9f4); }
.event-date-ribbon { position:absolute; top:0; right:18px; width:48px; padding:7px 4px 9px; border-radius:0 0 8px 8px; color:#fff; background:var(--warm); text-align:center; }
.event-date-ribbon strong,.event-date-ribbon span { display:block; }
.event-date-ribbon strong { font:600 21px Georgia,serif; line-height:1; }
.event-date-ribbon span { font-size:8px; text-transform:uppercase; }
.event-card progress { width:100%; height:8px; margin:10px 0 2px; accent-color:var(--warm); }
.event-card footer,.notice-card footer { color:var(--muted); font-size:10px; }
.attendees { margin:15px 0 2px; padding:10px 12px; border:1px solid #ead8ca; border-radius:9px; background:rgba(255,255,255,.7); }
.attendees summary { color:#74472e; cursor:pointer; font-size:10px; font-weight:800; }
.attendees ul { margin:10px 0 0; padding:0; display:grid; gap:7px; list-style:none; }
.attendees li { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; }
.attendees li strong { font-size:11px; }
.attendees li em { color:var(--muted); font-size:10px; font-style:normal; }
.attendees > p { margin:9px 0 0; font-size:10px; }
.mini-avatar { width:28px; height:28px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; color:#fff; background:#9a6848; font-size:8px; font-weight:900; }
.notice-list { display:grid; gap:12px; }
.notice-card { padding-left:24px; border-left:4px solid var(--blue); }
.notice-card.category-maintenance { border-left-color:#aa7446; }
.notice-card.category-community { border-left-color:#588266; }
.notice-card.category-urgent { border-left-color:var(--danger); }

/* Tablas, usuarios y log */
.toolbar { display:flex; align-items:center; gap:9px; margin:0 0 14px; }
.toolbar > * { width:auto; min-width:170px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
table { width:100%; min-width:860px; border-collapse:collapse; }
th,td { padding:12px 13px; border-bottom:1px solid #edf0ed; text-align:left; vertical-align:middle; font-size:11px; }
th { color:#708078; background:#f8faf8; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
td strong,td small { display:block; }
td small { margin-top:2px; color:var(--muted); }
.table-actions { margin:0; min-width:260px; }
.table-actions button { min-height:32px; padding:5px 9px; font-size:9px; }
td code { display:block; max-width:310px; overflow:hidden; color:#536159; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.audit-action { color:#5d507f; background:#eeeaf6; }

/* Mensajería */
.chat-shell { min-height:590px; display:grid; grid-template-columns:310px minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.chat-list { padding:10px; overflow:auto; border-right:1px solid var(--line); }
.chat-list button { width:100%; border:0; border-radius:9px; padding:12px; display:grid; gap:3px; color:var(--ink); background:transparent; cursor:pointer; text-align:left; }
.chat-list button:hover,.chat-list button.active { background:var(--sage-100); }
.chat-list small { color:var(--muted); font-size:9px; }
.messages-panel { min-width:0; display:flex; flex-direction:column; }
.messages-head { padding:16px 19px; border-bottom:1px solid var(--line); font-weight:800; }
.messages-body { height:480px; padding:20px; overflow:auto; display:flex; flex-direction:column; gap:9px; background:#f7f8f5; }
.bubble { max-width:75%; align-self:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:4px 13px 13px; background:#fff; white-space:pre-line; }
.bubble.mine { align-self:flex-end; border:0; border-radius:13px 4px 13px 13px; color:#fff; background:var(--forest-800); }
.bubble small { display:block; margin-top:5px; opacity:.65; font-size:8px; }
.send { padding:11px; display:flex; gap:8px; border-top:1px solid var(--line); }
.send input { flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:10px 12px; }

/* Modales */
.modal { position:fixed; z-index:100; inset:0; padding:22px; display:grid; place-items:center; overflow:auto; background:rgba(5,25,17,.7); backdrop-filter:blur(3px); }
.modal-card { width:min(760px,100%); max-height:calc(100vh - 44px); padding:25px; overflow:auto; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.24); }
.modal-card > h2,.detail-head h2 { margin:0; color:var(--forest-900); font-size:29px; }
.detail-head { margin-bottom:18px; display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.detail-head .tag { margin-bottom:5px; }
.modal-actions { margin-top:21px; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.detail-notes { margin:15px 0; padding:15px; border-radius:9px; background:var(--sage-50); }
.notification-list { display:grid; gap:8px; }
.notification-list button { width:100%; min-height:56px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:8px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; }
.notification-list button:hover { background:var(--sage-50); }
.notification-list button > span { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; color:var(--forest-800); background:var(--sage-100); }
.notification-list button > em { min-width:25px; height:25px; padding:4px; border-radius:14px; color:#fff; background:var(--danger); font-size:10px; font-style:normal; font-weight:900; text-align:center; }

#toast { position:fixed; z-index:200; right:24px; bottom:24px; max-width:min(420px,calc(100vw - 32px)); padding:13px 17px; border-radius:9px; color:#fff; background:var(--forest-800); box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(16px); transition:.2s; pointer-events:none; }
#toast.show { opacity:1; transform:none; }
#toast.bad { background:var(--danger); }

@media (max-width:1100px) {
  .content { padding:32px 30px 84px; }
  .calendar-day { min-height:105px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .event-showcase,.notice-home-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr 1fr; }
  .span-3,.span-4 { grid-column:span 2; }
  .equipment { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  :root { --sidebar:270px; }
  .sidebar { transform:translateX(-100%); transition:transform .22s; box-shadow:0 0 50px rgba(0,0,0,.3); }
  .sidebar.open { transform:none; }
  .main { margin-left:0; padding-bottom:68px; }
  .topbar { padding:0 17px; justify-content:space-between; }
  .topbar > #mobile-menu { display:block; }
  .topbar .language span,.profile-chip { display:none; }
  .content { padding:26px 17px 70px; }
  .mobile-nav { position:fixed; z-index:50; inset:auto 0 0; height:67px; display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
  .mobile-nav button { border:0; display:grid; place-items:center; align-content:center; gap:2px; color:#718078; background:transparent; font-size:17px; }
  .mobile-nav button { position:relative; }
  .mobile-nav button span { font-size:8px; }
  .mobile-nav .nav-badge { position:absolute; top:5px; right:18%; min-width:18px; height:18px; font-size:8px; }
  .mobile-nav button.active { color:var(--forest-800); font-weight:800; }
  .login { grid-template-columns:1fr; }
  .login-visual { min-height:260px; padding:28px; }
  .login-form { padding:34px 22px 50px; }
  .login-language { margin-bottom:38px; }
  .page-title { align-items:flex-start; flex-direction:column; }
  .stats { grid-template-columns:1fr; }
  .event-showcase,.notice-home-grid { grid-template-columns:1fr; }
  .stat-card { min-height:90px; }
  .calendar-toolbar { grid-template-columns:1fr auto; }
  .calendar-toolbar h2 { grid-column:1/-1; grid-row:1; margin-bottom:9px; text-align:center; }
  .calendar-toolbar > div:first-child { grid-row:2; }
  .legend { grid-row:2; }
  .calendar-panel { overflow:auto; }
  .calendar-grid { min-width:790px; }
  .chat-shell { grid-template-columns:1fr; }
  .chat-list { max-height:190px; border-right:0; border-bottom:1px solid var(--line); }
  .messages-body { height:420px; }
}
@media (max-width:560px) {
  .login-visual { min-height:210px; }
  .login-card h1 { font-size:38px; }
  .page-title h1 { font-size:34px; }
  .page-actions,.page-actions .primary { width:100%; }
  .cards-grid { grid-template-columns:1fr; }
  .reservation-card { grid-template-columns:48px minmax(0,1fr); align-items:start; }
  .reservation-agenda-row { grid-template-columns:43px 30px 1fr; padding:10px; }
  .reservation-agenda-row .table-summary { grid-column:3; }
  .reservation-card > .card-actions { grid-column:2; margin-top:6px; }
  .form-grid,.form-grid.two-cols { grid-template-columns:1fr; }
  .span-2,.span-3,.span-4 { grid-column:auto; }
  .floorplan { grid-template-columns:1fr 1fr; }
  .equipment { grid-template-columns:1fr; }
  .modal { padding:0; align-items:end; }
  .modal-card { max-height:94vh; border-radius:18px 18px 0 0; padding:21px 17px 28px; }
  .toolbar.filters { align-items:stretch; flex-direction:column; }
  .toolbar.filters > * { width:100%; }
  #toast { right:16px; bottom:82px; }
}