@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&display=swap');
:root{--ink:#0f172a;--ink-soft:#334155;--muted:#64748b;--paper:#f1f5f9;--surface:#fff;--surface-glass:#ffffffdb;--surface-muted:#f8fafc;--surface-raised:#fafbfc;--line:#e2e8f0;--line-strong:#cbd5e1;--teal:#007c89;--teal-dark:#005f6a;--teal-soft:#e6f7f8;--coral:#dc2626;--coral-soft:#fef2f2;--green:#16a34a;--green-soft:#f0fdf4;--amber:#b45309;--amber-soft:#fffbeb;--shadow-sm:0 1px 3px #0f172a0f, 0 1px 2px #0f172a0a;--shadow:0 4px 16px #0f172a14, 0 1px 4px #0f172a0a;--shadow-lg:0 16px 48px #0f172a1a, 0 4px 12px #0f172a0a;--radius:12px;--radius-sm:8px;--font:Aptos, Candara, "Segoe UI", system-ui, sans-serif;--display:"Iowan Old Style", "Palatino Linotype", Georgia, serif;color:var(--ink);background:var(--paper);font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}*{box-sizing:border-box}[hidden]{display:none!important}body{isolation:isolate;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background:#dcefed;margin:0;position:relative;overflow-x:hidden}html{overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;filter:blur(9px)saturate(1.06)brightness(.94);will-change:transform;background:linear-gradient(120deg,#005f6a2e,#f1f5f91f 46%,#16a34a1f),url(/reservas/assets/background-blur-CskonnyT.webp) 50%/cover no-repeat;position:fixed;inset:-32px;transform:scale(1.025)translateZ(0)}body:after{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle at 100% 0,#007c8933,#0000 42%),linear-gradient(#f8fafc85 0%,#f1f5f95c 44%,#e6f7f894 100%);position:fixed;inset:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}select{cursor:pointer}button:disabled,select:disabled,input:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}button,a,[role=gridcell]{touch-action:manipulation}*{-webkit-tap-highlight-color:transparent}#app{z-index:1;min-height:100svh;position:relative}.badge{border-radius:999px;align-items:center;width:fit-content;padding:3px 10px;font-size:.78rem;font-weight:700;display:inline-flex}.badge--teal{background:var(--teal-soft);color:var(--teal-dark)}.badge--coral{background:var(--coral-soft);color:var(--coral)}.badge--green{background:var(--green-soft);color:var(--green)}.badge--amber{background:var(--amber-soft);color:var(--amber)}.badge--muted{background:var(--surface-muted);color:var(--muted)}.label-caps{letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-size:.75rem;font-weight:700}.page-shell{gap:18px;width:min(1160px,100% - 32px);margin:0 auto;padding:28px 0 72px;display:grid}.panel{background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(14px);min-width:0;padding:28px}.app-header{padding:0;position:relative;overflow:hidden}.app-header:before{content:"";background:linear-gradient(90deg, var(--teal-dark) 0%, var(--teal) 50%, #00b8cc 100%);height:3px;position:absolute;inset:0 0 auto}.header-top{grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:28px 32px 24px;display:grid}.brand-logo{object-fit:contain;background:var(--surface);width:124px;height:124px;box-shadow:var(--shadow);border:2px solid var(--line);border-radius:50%;flex-shrink:0;padding:0;transition:transform .3s,box-shadow .3s}.brand-logo:hover{box-shadow:var(--shadow-lg);transform:scale(1.04)}.brand-text{gap:4px;display:grid}.brand-eyebrow{font-size:.78rem}.brand-name{font-family:var(--display);color:var(--ink);font-size:1.85rem;font-weight:700;line-height:1.1}.brand-tagline{color:var(--teal);font-size:1rem;font-style:italic;font-weight:600}.header-bottom{border-top:1px solid var(--line);background:var(--surface-muted);grid-template-columns:1fr auto;align-items:start;gap:20px;padding:20px 32px 28px;display:grid}.header-description{color:var(--muted);max-width:580px;margin-top:2px;font-size:.92rem;line-height:1.6}.header-description strong{color:var(--ink-soft)}.admin-key-field{min-width:280px;max-width:320px}.admin-entry{gap:10px;min-width:280px;max-width:320px;display:grid}.admin-entry .admin-key-field{min-width:0;max-width:none}.header-admin-link{justify-content:center;width:100%}.field-hint{color:var(--muted);margin-top:2px;font-size:.77rem;font-weight:400}.header-status{padding:0 32px 20px}.section-heading{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:20px;display:flex}.section-heading--flush{margin-bottom:0}h2{color:var(--ink);font-size:1.1rem;font-weight:700;line-height:1.3}h3{color:var(--ink);font-size:.92rem;font-weight:700}.helper-text{color:var(--muted);margin-top:3px;font-size:.88rem}.section-divider{border:none;border-top:1px solid var(--line);margin:4px 0}.range-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content;align-items:end;gap:14px;min-width:0;display:grid}.workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;display:grid}.calendar-panel{padding:24px}.calendar-toolbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.calendar-month-label{text-align:center;text-transform:capitalize;color:var(--ink);font-size:1rem;font-weight:700}.weekday-row,.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.weekday-row{color:var(--muted);text-align:center;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;font-size:.72rem;font-weight:700}.day-button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);min-height:68px;color:var(--ink);text-align:left;align-content:space-between;padding:7px 8px;transition:transform .12s,box-shadow .12s,border-color .12s;display:grid}.day-button:hover:not(:disabled){border-color:var(--teal);transform:translateY(-2px);box-shadow:0 6px 18px #007c892e}.day-button.is-muted{color:#94a3b8;background:var(--surface-muted)}.day-button.is-available{background:linear-gradient(150deg, #fff 40%, var(--teal-soft))}.day-button.is-occupied{color:var(--coral);background:var(--coral-soft);border-color:#dc262638}.day-button.is-blocked{color:var(--amber);background:var(--amber-soft);border-color:#b4530938}.day-button.is-selected{color:#fff;background:var(--teal);border-color:var(--teal);box-shadow:0 4px 14px #007c8966}.day-button:focus-visible{outline-offset:2px;outline:3px solid #007c8973}.day-number{font-size:.92rem;font-weight:700}.day-state{opacity:.8;font-size:.65rem;font-weight:700}.legend{color:var(--muted);flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:.8rem;font-weight:600;display:flex}.legend-item{align-items:center;gap:6px;display:inline-flex}.legend-dot{background:var(--teal);border-radius:50%;flex-shrink:0;width:9px;height:9px}.legend-dot.occupied{background:var(--coral)}.legend-dot.blocked{background:var(--amber)}.legend-dot.out{background:#cbd5e1}.field{gap:5px;min-width:0;display:grid}.field>span:first-child,.field>label{color:var(--ink-soft);font-size:.83rem;font-weight:700}.field input,.field select,.field textarea{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:100%;min-width:0;max-width:100%;min-height:42px;color:var(--ink);background:var(--surface);outline:none;padding:9px 12px;transition:border-color .14s,box-shadow .14s}.field textarea{resize:vertical;min-height:82px}.field input[type=date]{width:100%;appearance:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;inline-size:100%;min-inline-size:0;max-inline-size:100%;line-height:1.2;display:block}.field input[type=date]::-webkit-date-and-time-value{text-align:left;width:100%;min-height:1.2em;padding:0}.field input[type=date]::-webkit-calendar-picker-indicator{flex-shrink:0;margin-left:4px;padding:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #007c8924}.field-optional{color:var(--muted);font-style:italic;font-weight:400}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;display:grid}.field-full{grid-column:1/-1}.reservation-form{padding:24px}.reservation-form-body{gap:18px;display:grid}.primary-button,.secondary-button,.calendar-nav,.text-button,.download-link{border-radius:var(--radius-sm);white-space:nowrap;justify-content:center;align-items:center;gap:6px;min-height:40px;font-size:.88rem;font-weight:700;transition:transform .12s,box-shadow .12s,background .12s,opacity .12s;display:inline-flex}.primary-button{color:#fff;background:var(--teal);padding:0 20px}.secondary-button,.calendar-nav{color:var(--ink);border:1px solid var(--line-strong);background:var(--surface);padding:0 16px}.calendar-nav{padding:0 12px;font-size:1.1rem}.text-button{min-height:34px;color:var(--teal);border:1px solid var(--line);background:var(--surface);padding:0 12px;font-size:.83rem}.download-link{color:var(--ink);border:1px solid var(--line-strong);background:var(--surface);padding:0 16px;text-decoration:none}.primary-button:hover:not(:disabled){background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 6px 18px #007c8952}.secondary-button:hover:not(:disabled),.calendar-nav:hover:not(:disabled),.download-link:hover:not([aria-disabled=true]){border-color:var(--teal);color:var(--teal);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.text-button:hover:not(:disabled){box-shadow:var(--shadow-sm)}.text-button.danger{color:var(--coral);border-color:#dc262640}.primary-button:focus-visible,.secondary-button:focus-visible,.calendar-nav:focus-visible,.text-button:focus-visible,.download-link:focus-visible,.day-button:focus-visible{outline-offset:2px;outline:3px solid #007c8961}.primary-button[data-loading],.secondary-button[data-loading]{opacity:.65;pointer-events:none}.download-link[aria-disabled=true]{color:var(--muted);pointer-events:none;opacity:.5}.status{min-height:20px;color:var(--muted);margin-top:10px;font-size:.86rem;font-weight:600;transition:color .2s}.status[data-tone=success]{color:var(--green)}.status[data-tone=error]{color:var(--coral)}.form-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.selected-date-label{color:var(--teal);font-size:.88rem;font-weight:700}.reservation-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.reservation-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);gap:8px;padding:16px;transition:box-shadow .14s,transform .14s;display:grid}.reservation-item:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.reservation-date{color:var(--teal);text-transform:capitalize;font-size:.8rem;font-weight:700}.reservation-item h3{color:var(--ink);font-size:.9rem;line-height:1.35}.reservation-meta{color:var(--muted);font-size:.82rem}.report-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content max-content;align-items:end;gap:14px;min-width:0;display:grid}.report-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0;display:grid}.report-metric{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);gap:6px;padding:16px;display:grid}.report-metric-label{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:.72rem;font-weight:700}.report-metric-value{color:var(--teal);font-size:1.75rem;font-weight:800;line-height:1;font-family:var(--display)}.report-metric-value.is-cancelled{color:var(--coral)}.report-metric-value.is-confirmed{color:var(--green)}.report-metric-value.is-pending{color:var(--amber)}.report-table-wrap{border:1px solid var(--line);border-radius:var(--radius);-webkit-overflow-scrolling:touch;max-width:100%;overflow-x:auto}.report-table{border-collapse:collapse;width:100%;min-width:820px}.report-table th{border-bottom:1px solid var(--line);text-align:left;background:var(--surface-muted);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:10px 14px;font-size:.72rem;font-weight:700}.report-table td{border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);padding:11px 14px;font-size:.86rem}.report-table tr:last-child td{border-bottom:0}.report-table tbody tr:hover td{background:var(--surface-muted)}.report-table-empty{text-align:center;color:var(--muted);padding:28px!important}.report-cell-contact{white-space:pre;color:var(--muted);font-size:.82rem}.report-cell-cancelled{font-weight:700;color:var(--coral)!important}.report-actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.admin-layout{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);align-items:start;gap:14px;display:grid}.admin-sub-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);gap:14px;padding:18px;display:grid}.admin-block-form{gap:12px;min-width:0;display:grid}.admin-requests-heading{justify-content:space-between;align-items:flex-end;gap:12px;margin-top:4px;display:flex}.admin-panel .admin-layout{margin-top:18px}.blocked-list,.admin-reservations{gap:8px;margin-top:2px;display:grid}.admin-panel .admin-reservations{margin-top:12px}.blocked-item,.admin-reservation-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px;display:grid}.blocked-item-copy,.admin-reservation-copy{gap:2px;min-width:0;display:grid}.blocked-date-label{color:var(--ink);text-transform:capitalize;font-size:.87rem;font-weight:700}.blocked-reason{color:var(--muted);font-size:.8rem}.admin-reservation-item.is-cancelada{background:var(--surface-muted);opacity:.72}.admin-reservation-item.is-pendiente{background:var(--amber-soft)}.admin-reservation-item.is-confirmada{background:var(--green-soft)}.admin-reservation-date{color:var(--ink);font-size:.86rem;font-weight:700}.admin-reservation-meta{color:var(--muted);font-size:.8rem}.admin-reservation-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0;display:flex}.admin-tools{grid-template-columns:minmax(140px,.35fr) minmax(0,1fr) max-content;align-items:end;gap:14px;min-width:0;margin-top:16px;display:grid}.range-form>*,.report-form>*,.admin-block-form>*,.field-grid>*,.admin-tools>*{min-width:0}.empty-state{border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);text-align:center;background:var(--surface-muted);padding:20px;font-size:.88rem}.loading-view{min-height:100svh;color:var(--muted);place-content:center;place-items:center;gap:16px;padding:28px;font-weight:600;display:grid}.loading-spinner{border:3px solid var(--line-strong);border-top-color:var(--teal);border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-footer{text-align:center;border-top:1px solid var(--line);color:var(--muted);padding:20px 0 0;font-size:.8rem;line-height:1.6}@media (width<=1100px){.workspace{grid-template-columns:1fr}.reservation-list,.report-metrics{grid-template-columns:repeat(2,1fr)}.header-bottom{grid-template-columns:1fr}.admin-key-field,.admin-entry{width:100%;min-width:0;max-width:100%}}@media (width<=820px){.page-shell{gap:16px}.admin-layout{grid-template-columns:1fr}.range-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.range-form .secondary-button{grid-column:1/-1;width:100%}.report-form{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.report-form .secondary-button{grid-column:1;width:100%}.report-form .download-link{grid-column:2;width:100%}}@media (width<=640px){body:before{filter:blur(8px)saturate(1.02)brightness(.9);background-position:top;inset:-44px;transform:scale(1.04)translateZ(0)}body:after{background:radial-gradient(circle at 100% 0,#007c8929,#0000 42%),linear-gradient(#f8fafca3 0%,#f1f5f97a 44%,#e6f7f8ad 100%)}.page-shell{gap:12px;width:calc(100% - 20px);padding:12px 0 56px}.header-top{gap:12px;padding:14px 16px 12px}.header-bottom{gap:10px;padding:12px 16px 16px}.header-status{padding:0 16px 14px}.brand-logo{width:82px;height:82px}.brand-name{font-size:1.2rem}.brand-tagline{font-size:.85rem}.header-description{display:none}.panel,.calendar-panel,.reservation-form{padding:14px}.range-form,.field-grid,.reservation-list,.report-form{grid-template-columns:minmax(0,1fr)}.report-form .secondary-button,.report-form .download-link{grid-column:auto}.admin-tools{grid-template-columns:minmax(0,1fr)}.range-form,.field-grid,.report-form,.admin-block-form,.admin-tools,.range-form>.field,.field-grid>.field,.report-form>.field,.admin-block-form>.field{width:100%;max-width:100%}.form-actions .primary-button{flex:100%}.range-form button[type=submit],.report-form button[type=submit],.report-form .download-link,.admin-block-form button[type=submit]{width:100%;min-height:48px}.calendar-toolbar{grid-template-columns:48px 1fr 48px;gap:0;display:grid}.calendar-nav{min-height:48px;padding:0;font-size:1.4rem}.weekday-row,.calendar-grid{gap:4px}.day-button{min-height:56px;padding:6px 5px}.day-state{font-size:.6rem}.primary-button,.secondary-button,.download-link,.text-button{min-height:44px}.field input,.field select,.field textarea{min-height:48px;font-size:1rem}.field input[type=date]{width:100%;inline-size:100%;min-width:0;max-width:100%;padding:10px 12px}.admin-key-field,.admin-entry{width:100%;min-width:0;max-width:100%}.report-table-wrap{-webkit-overflow-scrolling:touch}.report-metrics{grid-template-columns:repeat(2,1fr);gap:8px}.report-metric{padding:12px}.report-metric-value{font-size:1.5rem}.admin-reservation-date{font-size:.82rem}.admin-reservation-item{grid-template-columns:minmax(0,1fr);align-items:stretch}.admin-reservation-actions{justify-content:flex-start}.admin-reservation-actions .text-button,.admin-reservation-actions .badge{flex:auto}.selected-date-label{font-size:.95rem}}@media (width<=420px){.page-shell{width:calc(100% - 16px)}.header-top{grid-template-columns:auto 1fr;gap:12px;padding:16px 16px 14px}.brand-logo{width:76px;height:76px}.brand-name{font-size:1.15rem}.brand-tagline{font-size:.82rem}.brand-eyebrow{padding:2px 8px;font-size:.72rem}.header-bottom{padding:12px 16px 18px}.header-status{padding:0 16px 14px}.panel{padding:14px}.weekday-row,.calendar-grid{gap:3px}.day-button{min-height:46px;padding:5px 3px}.day-number{font-size:.82rem}.day-state{display:none}.field input[type=date]{padding-inline:10px 8px}.legend{gap:6px 10px;font-size:.75rem}.legend-dot{width:8px;height:8px}.report-metrics{grid-template-columns:1fr 1fr;gap:6px}.badge{padding:2px 8px;font-size:.72rem}}@media (width<=360px){.page-shell{width:calc(100% - 12px)}.header-top{text-align:center;grid-template-columns:1fr;justify-items:center;gap:8px;padding:12px 12px 10px}.brand-text{align-items:center;display:grid}.brand-eyebrow{justify-self:center}.brand-name{font-size:1rem}.header-bottom{padding:10px 12px 14px}.header-status{padding:0 12px 12px}.panel{padding:12px}.day-button{min-height:42px;padding:4px 2px}.weekday-row,.calendar-grid{gap:2px}.admin-tools{gap:10px}.report-metrics{grid-template-columns:1fr}}@media print{body{background:#fff}body:before,body:after{display:none}.page-shell{width:100%;padding:0}.app-header,.range-panel,.workspace,.reservations-panel,.admin-panel,.report-form,.report-actions,.app-footer{display:none!important}.report-panel{box-shadow:none;border:none;padding:0}.print-header{border-bottom:2px solid #000;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:14px;display:flex!important}.print-logo{width:54px;height:54px}.print-school-name{font-size:.95rem;font-weight:700}.print-report-title{color:#666;margin-top:2px;font-size:.82rem}.report-metrics{grid-template-columns:repeat(4,1fr);gap:6px}.report-metric{box-shadow:none;border:1px solid #ccc;padding:8px 12px}.report-metric-value{font-size:1.3rem}.report-table th,.report-table td{padding:6px 10px;font-size:.76rem}.status{display:none}@page{margin:1.5cm;size:A4 landscape}}.print-header{display:none}
.devotional-copy{display:grid;gap:6px;max-width:760px;color:var(--ink-soft);font-size:.96rem;line-height:1.65}.devotional-copy strong{font-family:var(--display);color:var(--ink);font-size:1.18rem;line-height:1.25}.devotional-copy span{display:block}.reservation-form .field-grid input[type=hidden]{display:none}.reservation-form .primary-button{min-width:150px}.brand-eyebrow{letter-spacing:.02em}.calendar-month-label{text-transform:none}@media (width<=640px){.devotional-copy{display:grid!important;font-size:.9rem;line-height:1.55}.devotional-copy strong{font-size:1.05rem}.reservation-form .field-grid{gap:12px}}
.brand-name{max-width:900px}.brand-tagline{font-family:var(--display);font-size:1.24rem;font-style:normal;font-weight:700}.header-bottom{grid-template-columns:minmax(0,1fr) minmax(220px,320px);align-items:stretch}.devotional-visual{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);min-height:190px;margin:0;overflow:hidden}.devotional-visual img{width:100%;height:100%;min-height:190px;object-fit:cover;object-position:center 44%;filter:saturate(1.02) contrast(1.02)}.admin-entry{grid-column:1/-1;justify-self:end}.reservation-form input[readonly]{color:var(--teal-dark);font-weight:700;background:linear-gradient(180deg,#fff,#f8fafc)}.day-button[data-reserved=true]{cursor:pointer}.day-button[data-reserved=true]:hover{border-color:var(--coral);box-shadow:0 6px 18px #dc26262e}.reservation-modal[hidden]{display:none!important}.reservation-modal{z-index:20;position:fixed;inset:0;display:grid;place-items:center;padding:20px}.reservation-modal-backdrop{background:#0f172a80;position:absolute;inset:0;cursor:pointer}.reservation-modal-card{z-index:1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:min(82svh,680px);padding:24px;position:relative;overflow:auto}.reservation-modal-close{position:absolute;top:12px;right:12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-muted);color:var(--ink);width:34px;height:34px;font-size:1.15rem;line-height:1}.reserved-modal-list{display:grid;gap:10px;margin-top:16px}.reserved-modal-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-muted);display:grid;gap:3px;padding:12px}.reserved-modal-item strong{color:var(--ink)}.reserved-modal-item span{color:var(--muted);font-size:.88rem}.report-actions .download-link,.report-actions .secondary-button{min-width:116px}.print-school-subtitle,.footer-school-subtitle{font-family:var(--display);color:var(--teal);font-weight:700}.app-footer strong{display:block;color:var(--ink-soft)}@media (width<=900px){.header-bottom{grid-template-columns:1fr}.devotional-visual{min-height:260px}.devotional-visual img{min-height:260px;object-position:center 48%}.admin-entry{justify-self:stretch}}@media (width<=640px){.brand-tagline{font-size:1.05rem}.devotional-visual{min-height:230px}.devotional-visual img{min-height:230px}.reservation-modal{padding:12px}.reservation-modal-card{padding:18px}.report-actions{display:grid;grid-template-columns:1fr 1fr}.report-actions .download-link,.report-actions .secondary-button{width:100%;min-width:0}}@media (width<=420px){.devotional-visual{min-height:210px}.devotional-visual img{min-height:210px}.report-actions{grid-template-columns:1fr}.brand-name{font-size:1.08rem}}
.header-bottom{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,320px);align-items:center;gap:28px;padding:24px 32px 28px}.devotional-copy{display:flex!important;flex-direction:column;justify-content:center;align-content:start;align-self:center;gap:12px;max-width:720px;min-height:0;color:var(--ink-soft)}.devotional-copy strong{font-size:1.2rem;line-height:1.35}.devotional-copy span{max-width:700px;font-size:.95rem;line-height:1.65}.devotional-visual{width:min(320px,100%);min-height:0;height:auto;aspect-ratio:3/4;justify-self:end}.devotional-visual img{height:100%;min-height:0;object-fit:cover;object-position:center 48%}.reservation-form .field-grid>.field-full{grid-column:1/-1}.reservation-form input[readonly]{font-size:.95rem;line-height:1.25;white-space:nowrap;overflow:visible;text-overflow:clip}.app-footer{padding:18px 0 10px}.app-footer p{margin:0}@media (width<=900px){.header-bottom{grid-template-columns:1fr;gap:18px}.devotional-copy{gap:10px}.devotional-visual{width:min(420px,100%);justify-self:center;aspect-ratio:4/5}}@media (width<=640px){.devotional-copy{display:flex!important;gap:8px}.devotional-copy strong{font-size:1.05rem}.devotional-copy span{font-size:.9rem;line-height:1.55}.devotional-visual{width:100%;aspect-ratio:4/5;min-height:0}.devotional-visual img{min-height:0}.brand-name{font-size:1.12rem;line-height:1.12}.reservation-form input[readonly]{font-size:.94rem}}@media (width<=420px){.brand-name{font-size:1.02rem}.devotional-visual{aspect-ratio:4/5;min-height:0}}
.header-bottom{grid-template-columns:minmax(0,1fr) clamp(220px,24vw,290px);gap:24px;padding:22px 32px 24px}.devotional-visual{width:min(290px,100%)}.app-footer{line-height:1.35}
@media (width<=900px){.header-bottom{grid-template-columns:1fr;gap:18px;padding:20px 28px 24px}.devotional-copy{align-self:auto}.devotional-visual{width:min(420px,100%);justify-self:center;aspect-ratio:4/5}}@media (width<=640px){.header-bottom{grid-template-columns:1fr;gap:14px;padding:16px}.devotional-copy{display:flex!important;width:100%;gap:8px}.devotional-copy strong{font-size:1.05rem;line-height:1.35}.devotional-copy span{font-size:.9rem;line-height:1.55;max-width:none}.devotional-visual{width:100%;justify-self:stretch;aspect-ratio:4/5;min-height:0}.devotional-visual img{min-height:0}.brand-name{font-size:1.12rem;line-height:1.12}}@media (width<=420px){.brand-name{font-size:1.02rem}.header-bottom{padding:14px}.devotional-visual{width:100%;aspect-ratio:4/5}}

/* ═══════════════════════════════════════════════════
   SACRED REFINED — Enhanced Visual Design
   Unidad Educativa Rosa de Jesús Cordero - Catalinas
   ═══════════════════════════════════════════════════ */

/* ── Typography Refinements ── */
:root {
  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-body: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --radius: 14px;
  --radius-sm: 10px;
  --gold: #b7934a;
  --gold-soft: #faf6ef;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.01em; }
.brand-name { font-family: var(--display); font-weight: 600; letter-spacing: 0.005em; }
.brand-tagline { font-family: var(--display); font-weight: 500; font-style: italic; color: var(--teal-dark); }
.devotional-copy strong { font-family: var(--display); font-weight: 600; }
.helper-text { color: var(--muted); }

/* ── Page Shell & Background Depth ── */
body:after {
  background: radial-gradient(ellipse at 50% 0%, #007c8918, transparent 64%),
              radial-gradient(ellipse at 100% 60%, #b7934a0e, transparent 50%),
              linear-gradient(#f8fafc85 0%, #f1f5f95c 44%, #e6f7f894 100%);
}

/* ── Header & Hero ── */
.app-header {
  position: relative;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
}
.app-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal) 40%, var(--gold) 70%, var(--gold));
  z-index: 2;
}
.header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px 12px;
}
.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
  transition: transform 0.4s ease;
  flex-shrink: 0;
}
.brand-logo:hover { transform: scale(1.08) rotate(-2deg); }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 3px 12px;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}
.header-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: center;
  gap: 28px;
  padding: 8px 28px 22px;
}
.devotional-copy {
  gap: 12px;
  padding-right: 4px;
  align-self: center;
}
.devotional-copy strong {
  font-size: 1.22rem;
  line-height: 1.28;
  color: var(--ink);
  position: relative;
  padding-bottom: 8px;
}
.devotional-copy strong::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.devotional-copy span {
  font-family: var(--display-body);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 600px;
}
.devotional-visual {
  width: 100%;
  border-radius: var(--radius);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04),
    0 0 72px rgba(183,147,74,0.07);
  border: 1px solid rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.devotional-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.03);
  pointer-events: none;
  z-index: 1;
}
.devotional-visual:hover {
  box-shadow:
    0 14px 40px rgba(0,0,0,0.12),
    0 4px 14px rgba(0,0,0,0.05),
    0 0 84px rgba(183,147,74,0.10);
  transform: translateY(-2px);
}
.devotional-visual img {
  filter: saturate(1.04) contrast(1.03) brightness(1.02);
  transition: transform 7s ease;
}
.devotional-visual:hover img { transform: scale(1.04); }

/* ── Hero CTA ── */
.hero-cta {
  margin-top: 4px;
  align-self: flex-start;
  padding: 11px 26px;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

/* ── Panel Cards ── */
.panel {
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
  transition: box-shadow 0.3s ease;
}
.panel:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
}

/* ── Calendar Panel ── */
.calendar-panel {
  padding: 22px 24px 20px;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}
.calendar-nav {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1;
}
.calendar-nav:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
  transform: scale(1.05);
}
.calendar-nav:active { transform: scale(0.95); }
.calendar-month-label {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 200px;
  text-align: center;
  letter-spacing: 0.005em;
}
.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  padding: 0 2px;
}
.weekday-row span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 2px;
}
.day-button {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  transition: all 0.2s ease;
  position: relative;
  font-family: var(--font);
}
.day-button:hover:not(:disabled) {
  border-color: var(--teal);
  background: var(--teal-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,124,137,0.12);
}
.day-button:active:not(:disabled) { transform: scale(0.96); }
.day-button.is-available {
  background: var(--surface);
  border-color: var(--line);
}
.day-button.is-available:hover:not(:disabled) {
  border-color: var(--teal);
  background: #e6f7f8;
}
.day-button.is-selected {
  background: var(--teal);
  border-color: var(--teal-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,124,137,0.25);
  transform: scale(1.03);
}
.day-button.is-selected .day-number { color: #fff; font-weight: 700; }
.day-button.is-selected .day-state { color: rgba(255,255,255,0.85); }
.day-button.is-occupied {
  background: var(--coral-soft);
  border-color: #fecaca;
  cursor: pointer;
}
.day-button.is-occupied .day-number { color: var(--coral); font-weight: 600; }
.day-button.is-occupied .day-state { color: #dc2626b0; }
.day-button.is-blocked {
  background: var(--surface-muted);
  border-color: var(--line);
  opacity: 0.55;
  cursor: not-allowed;
}
.day-button.is-muted { opacity: 0.3; }
.day-button:disabled { opacity: 0.35; cursor: not-allowed; }
.day-number {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.day-state {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line-strong);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.legend-dot.occupied { background: var(--coral-soft); border-color: #fecaca; }
.legend-dot.blocked { background: var(--surface-muted); border-color: var(--line); opacity: 0.6; }
.legend-dot.out { background: transparent; border: 1.5px dashed var(--line-strong); opacity: 0.4; }

/* ── Reservation Form ── */
.reservation-form { padding: 22px 24px 20px; }
.section-heading h2 {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 14px 0 18px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field span:first-child {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.field input:not([type="hidden"]), .field select, .field textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.94rem;
  transition: all 0.2s ease;
  outline: none;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.field input:focus:not([readonly]), .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,124,137,0.08), 0 2px 6px rgba(0,0,0,0.04);
  background: #fbfefe;
}
.field input[readonly] {
  background: linear-gradient(180deg, #fafcfc, #f5f9f9);
  border-color: var(--line);
  color: var(--teal-dark);
  cursor: default;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.field input::placeholder { color: var(--muted); opacity: 0.7; }
.field-optional { font-weight: 400; font-style: italic; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-full { grid-column: 1 / -1; }
.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.primary-button {
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0,124,137,0.22);
  position: relative;
  overflow: hidden;
}
.primary-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,124,137,0.30);
}
.primary-button:hover::after { opacity: 1; }
.primary-button:active { transform: scale(0.97); }
.primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0,124,137,0.12);
}
.primary-button[data-loading] {
  background: var(--teal);
  cursor: wait;
}
.secondary-button {
  padding: 10px 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}
.secondary-button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-soft);
  box-shadow: 0 2px 10px rgba(0,124,137,0.08);
}
.secondary-button:active { transform: scale(0.97); }

/* ── Status Messages ── */
.status {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 10px;
  display: none;
  animation: statusSlideIn 0.35s ease;
}
.status:not(:empty) { display: block; }
.status[data-tone="success"] {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.status[data-tone="error"] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.status[data-tone="neutral"] {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.header-status { margin-top: 0; }
@keyframes statusSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Workspace Layout ── */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Modal Refinements ── */
.reservation-modal-card {
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.reservation-modal-backdrop {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
}
.reservation-modal-close:hover {
  background: var(--coral-soft);
  border-color: var(--coral);
  color: var(--coral);
}
.reserved-modal-item {
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Footer ── */
.app-footer {
  text-align: center;
  padding: 24px 20px 16px;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.app-footer strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer-school-subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Badge Refinements ── */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge--teal { background: var(--teal-soft); color: var(--teal-dark); border: 1px solid rgba(0,124,137,0.15); }
.badge--coral { background: var(--coral-soft); color: var(--coral); border: 1px solid rgba(220,38,38,0.12); }
.badge--green { background: var(--green-soft); color: var(--green); border: 1px solid rgba(22,163,74,0.12); }
.badge--amber { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(180,83,9,0.12); }

/* ── Loading Spinner ── */
.loading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 0.95rem;
}
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   PREMIUM ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════ */

/* ── Keyframes Library ── */
@keyframes floatGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), 0 0 72px rgba(183,147,74,0.06); }
  50% { box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), 0 0 96px rgba(183,147,74,0.11); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes successReveal {
  0% { opacity: 0; transform: translateY(20px) scale(0.92); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  80% { transform: translateY(1px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes successCheck {
  0% { stroke-dashoffset: 50; opacity: 0; }
  40% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes rippleOut {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes pulseGentle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  20% { transform: scale(1.08); }
  40% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  80% { transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes softGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,124,137,0); }
  50% { box-shadow: 0 0 0 8px rgba(0,124,137,0); }
}

/* ── Devotional Image Breathing Glow ── */
.devotional-visual {
  animation: floatGlow 4s ease-in-out infinite;
}
.devotional-visual:hover {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .devotional-visual { animation: none; }
}

/* ── Button Ripple Effect ── */
.primary-button {
  isolation: isolate;
}
.primary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0.18) 55%, transparent 65%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.primary-button > * { position: relative; z-index: 1; }
.primary-button:hover::before {
  animation: shimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .primary-button::before { animation: none; }
}

/* ── Button Press Animation ── */
.primary-button:active:not(:disabled) {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}
.secondary-button:active:not(:disabled) {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* ── Day Button Selection Pop ── */
.day-button {
  will-change: transform;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.day-button.is-selected {
  animation: bounceIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.day-button.is-available:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Card Entrance Stagger ── */
.panel { will-change: transform, opacity; }
.calendar-panel { animation: slideUpFade 0.7s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reservation-form { animation: slideUpFade 0.7s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-header { animation: slideUpFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Form Input Focus Elegance ── */
.field input:not([type="hidden"]):focus:not([readonly]),
.field select:focus,
.field textarea:focus {
  transition: border-color 0.25s ease, box-shadow 0.35s ease, background 0.25s ease;
}

/* ── Status Toast Notification ── */
.status {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.status:not(:empty) {
  animation: successReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Success Celebration ── */
.status[data-tone="success"] {
  position: relative;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);
  border: 1.5px solid #86efac;
  box-shadow: 0 4px 20px rgba(22,163,74,0.10);
}
.status[data-tone="success"]::before {
  content: none;
  display: none;
}

/* ── Error State ── */
.status[data-tone="error"] {
  border-left: 3px solid var(--coral);
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
}

/* ── Neutral/Info State ── */
.status[data-tone="neutral"] {
  border-left: 3px solid var(--teal);
}

/* ── Reservation Form Submit Success Highlight ── */
.reservation-form:has(.status[data-tone="success"]:not(:empty)) .primary-button {
  animation: pulseGentle 0.6s ease 2;
}

/* ── Logo Subtle Pulse ── */
.brand-logo {
  animation: pulseGentle 8s ease-in-out infinite;
}
.brand-logo:hover {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; }
}

/* ── Calendar Month Transition ── */
.calendar-grid {
  transition: opacity 0.3s ease;
}

/* ── Modal Card Refined Entrance ── */
.reservation-modal:not([hidden]) .reservation-modal-card {
  animation: bounceIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reservation-modal-backdrop {
  transition: background 0.35s ease;
}

/* ── Hover Lift Cards ── */
.workspace .panel {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.workspace .panel:hover {
  transform: translateY(-2px);
}

/* ── Footer Subtle Entrance ── */
.app-footer {
  animation: slideUpFade 0.6s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Hero CTA Pulse ── */
.hero-cta {
  animation: pulseGentle 3s ease-in-out 1.5s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta { animation: none; }
}

/* ── Print Styles ── */
@media print {
  body:before, body:after { display: none !important; }
  .app-header::before { display: none; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive ── */
@media (width <= 960px) {
  .workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .calendar-panel { order: 1; }
  .reservation-form { order: 2; }
}
@media (width <= 900px) {
  .header-top { padding: 14px 20px 10px; gap: 14px; }
  .brand-logo { width: 42px; height: 42px; }
  .header-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 8px 20px 20px;
  }
  .devotional-visual { width: min(360px, 100%); justify-self: center; aspect-ratio: 4/5; }
  .devotional-copy strong::after { left: 50%; transform: translateX(-50%); }
  .devotional-copy { text-align: center; align-items: center; }
  .hero-cta { align-self: center; }
}
@media (width <= 640px) {
  .header-top { padding: 12px 14px 8px; gap: 10px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 1.04rem !important; line-height: 1.12 !important; }
  .brand-tagline { font-size: 0.96rem !important; }
  .brand-eyebrow { font-size: 0.64rem; padding: 2px 10px; }
  .header-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 4px 14px 18px;
  }
  .devotional-copy { text-align: center; align-items: center; gap: 10px; }
  .devotional-copy strong { font-size: 1.06rem; }
  .devotional-copy span { font-size: 0.88rem; line-height: 1.55; }
  .devotional-visual { width: 100%; aspect-ratio: 4/5; }
  .hero-cta { align-self: center; width: 100%; justify-content: center; text-align: center; }
  .calendar-toolbar { gap: 8px; }
  .calendar-nav { width: 34px; height: 34px; font-size: 1.1rem; }
  .calendar-month-label { font-size: 1.08rem; min-width: auto; }
  .calendar-grid { gap: 2px; }
  .day-button { padding: 3px 1px; }
  .day-number { font-size: 0.78rem; }
  .day-state { font-size: 0.52rem; }
  .field-grid { grid-template-columns: 1fr; gap: 12px; }
  .reservation-form { padding: 18px 16px 16px; }
  .calendar-panel { padding: 16px 14px 14px; }
  .primary-button { width: 100%; justify-content: center; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .legend { gap: 8px; }
  .legend-item { font-size: 0.68rem; }
  .weekday-row span { font-size: 0.65rem; padding: 4px 0; }
}
@media (width <= 420px) {
  .header-top { padding: 10px 10px 6px; gap: 8px; }
  .brand-logo { width: 32px; height: 32px; }
  .header-bottom { padding: 2px 10px 14px; }
  .devotional-copy strong { font-size: 1rem; }
  .devotional-copy span { font-size: 0.84rem; }
  .calendar-panel { padding: 12px 10px 12px; }
  .reservation-form { padding: 14px 12px 14px; }
  .calendar-month-label { font-size: 1rem; }
  .day-number { font-size: 0.74rem; }
  .calendar-grid { gap: 1.5px; }
}

/* Header logo refresh */
.brand-logo {
  width: 124px !important;
  height: 124px !important;
  padding: 0 !important;
  object-fit: cover;
}
@media (width <= 900px) {
  .brand-logo { width: 88px !important; height: 88px !important; }
}
@media (width <= 640px) {
  .brand-logo { width: 78px !important; height: 78px !important; }
}
@media (width <= 420px) {
  .brand-logo { width: 72px !important; height: 72px !important; }
}

/* Mobile header wrapping */
.brand-text { min-width: 0; }
.brand-name {
  white-space: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}
@media (width <= 640px) {
  .header-top { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; }
  .brand-name { font-size: 1rem !important; line-height: 1.08 !important; }
}
@media (width <= 420px) {
  .header-top { gap: 10px !important; }
  .brand-name { font-size: 0.94rem !important; }
}
@media (width <= 360px) {
  .header-top { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
  .brand-name { font-size: 0.98rem !important; }
}

/* Small mobile header stack */
@media (width <= 420px) {
  .header-top {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 8px !important;
  }
  .brand-text { justify-items: center; width: 100%; }
  .brand-logo { width: 84px !important; height: 84px !important; }
  .brand-name { font-size: 1.02rem !important; max-width: 310px; }
}

/* Compatibility small mobile header stack */
@media (max-width: 520px) {
  .header-top {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .brand-text { justify-items: center !important; width: 100% !important; }
  .brand-logo { width: 84px !important; height: 84px !important; }
  .brand-name { font-size: 1.02rem !important; line-height: 1.08 !important; max-width: 310px !important; }
}

/* Robust header layout */
.header-top {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.brand-text {
  flex: 1 1 280px !important;
  min-width: 0 !important;
}
.brand-name {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}
@media (max-width: 520px) {
  .header-top { justify-content: center !important; }
  .brand-text { flex-basis: 100% !important; text-align: center !important; justify-items: center !important; }
}

/* Final responsive hardening */
html,
body,
#app {
  max-width: 100%;
  overflow-x: hidden;
}
.page-shell,
.panel,
.app-header,
.header-top,
.header-bottom,
.workspace,
.calendar-panel,
.reservation-form,
.report-panel,
.admin-panel,
.reservations-panel,
.range-panel {
  min-width: 0;
}
.brand-name,
.devotional-copy,
.devotional-copy strong,
.devotional-copy span,
.helper-text,
.header-description,
.reservation-meta,
.admin-reservation-meta,
.blocked-reason,
.empty-state,
.status {
  overflow-wrap: anywhere;
}
.devotional-visual,
.devotional-visual img {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .page-shell {
    width: calc(100% - 28px) !important;
  }
  .workspace,
  .admin-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: calc(100% - 20px) !important;
    padding: 12px 0 52px !important;
    gap: 12px !important;
  }
  .app-header {
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  .header-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 14px 12px !important;
    gap: 8px !important;
  }
  .brand-text {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    justify-items: center !important;
  }
  .brand-logo {
    width: 92px !important;
    height: 92px !important;
  }
  .brand-eyebrow {
    font-size: 0.68rem !important;
    padding: 2px 10px !important;
  }
  .brand-name {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  .header-bottom {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  .devotional-copy {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .devotional-copy strong {
    max-width: 100% !important;
    font-size: 1.04rem !important;
    line-height: 1.25 !important;
  }
  .devotional-copy span {
    max-width: 100% !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  .hero-cta,
  .devotional-copy .primary-button,
  .header-bottom .primary-button {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 48px !important;
  }
  .devotional-visual {
    width: 100% !important;
    justify-self: stretch !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 10px !important;
  }
  .devotional-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }
  .panel,
  .calendar-panel,
  .reservation-form {
    padding: 14px !important;
  }
  .range-form,
  .field-grid,
  .report-form,
  .admin-tools,
  .reservation-list,
  .report-metrics {
    grid-template-columns: 1fr !important;
  }
  .weekday-row,
  .calendar-grid {
    gap: 3px !important;
  }
  .day-button {
    min-height: 46px !important;
    padding: 5px 3px !important;
  }
  .day-state {
    display: none !important;
  }
  .form-actions,
  .report-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .primary-button,
  .secondary-button,
  .download-link,
  .text-button {
    white-space: normal !important;
    text-align: center !important;
  }
  .app-footer {
    padding: 16px 8px 0 !important;
  }
}

@media (max-width: 390px) {
  .page-shell {
    width: calc(100% - 16px) !important;
  }
  .brand-logo {
    width: 84px !important;
    height: 84px !important;
  }
  .brand-name {
    font-size: 1rem !important;
    max-width: 292px !important;
  }
  .devotional-copy strong {
    font-size: 0.98rem !important;
  }
  .devotional-copy span {
    font-size: 0.86rem !important;
  }
}

/* Narrow control polish */
@media (max-width: 760px) {
  .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .calendar-nav {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
  }
  .calendar-month-label {
    min-width: 0 !important;
    font-size: 1rem !important;
    overflow-wrap: anywhere !important;
  }
  .field input,
  .field select,
  .field textarea {
    min-width: 0 !important;
    font-size: 1rem !important;
  }
  .blocked-item,
  .admin-reservation-item {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .admin-reservation-actions {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .admin-reservation-actions .badge,
  .admin-reservation-actions .text-button {
    width: 100% !important;
  }
  .report-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  .reservation-modal-card {
    width: min(100%, 520px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 18px !important;
  }
}

/* Center mobile eyebrow without changing desktop */
@media (max-width: 760px) {
  .brand-eyebrow {
    justify-self: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile brand stack exact centering */
@media (max-width: 760px) {
  .header-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .brand-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 4px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .brand-name {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

/* Contact note in hero */
.hero-contact {
  max-width: 680px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 124, 137, 0.18);
  border-radius: 10px;
  background: rgba(230, 247, 248, 0.58);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}
.hero-contact strong {
  font-family: var(--font);
  color: var(--teal-dark);
  font-size: inherit;
  font-weight: 800;
}
@media (max-width: 760px) {
  .hero-contact {
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 0.88rem;
    padding: 10px;
  }
  .devotional-visual img {
    object-position: center center !important;
  }
}
@media (min-width: 901px) {
  .devotional-visual img {
    object-position: center center !important;
  }
}