/**
 * PPCL Hotel Web — Component CSS
 * ──────────────────────────────
 * Extraído del <style> inline de web/pages/shell.php (Fase C, optimización de carga).
 * Antes se reenviaba este bloque completo en cada respuesta HTML del shell; ahora
 * se sirve como archivo versionado, cacheable 1 año (.htaccess) y precacheado
 * offline por el Service Worker (Cache First).
 */
[x-cloak]{display:none!important}

/* ── Semáforo badges ─────────────────────────────────────────────── */
.semaforo-rojo{background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;font-size:.75rem;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center}
.semaforo-ambar{background:#fffbeb;color:#d97706;border:1px solid #fde68a;font-size:.75rem;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center}
.semaforo-verde{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:.75rem;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center}
.semaforo-gris{background:#f3f4f6;color:#6b7280;font-size:.75rem;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center}

/* ── Legacy badge compat → DaisyUI badges ────────────────────────── */
.badge-red{background:#fef2f2;color:#dc2626;border:1px solid #fca5a5}
.badge-orange{background:#fff7ed;color:#ea580c;border:1px solid #fdba74}
.badge-yellow{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.badge-green{background:#f0fdf4;color:#16a34a;border:1px solid #86efac}
.badge-gray{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}
.badge-blue{background:#eff6ff;color:#2563eb;border:1px solid #93c5fd}
.ppcl-tag{display:inline-flex;align-items:center;padding:2px 8px;font-size:.75rem;font-weight:500;border-radius:6px;line-height:1.25}

/* ── Form fields — visible, modern, rounded ──────────────────────── */
.form-input{
    display:block;width:100%;box-sizing:border-box;
    appearance:none;-webkit-appearance:none;
    padding:10px 14px;font-size:.875rem;line-height:1.5;
    color:oklch(var(--bc));background-color:oklch(var(--b2));
    border:2px solid oklch(var(--b3));border-radius:10px;
    transition:border-color .15s,box-shadow .15s;
    outline:none;
}
.form-input:focus{
    border-color:oklch(var(--p));
    box-shadow:0 0 0 3px oklch(var(--p)/.15);
    background-color:oklch(var(--b1));
}
.form-input::placeholder{color:oklch(var(--bc)/.4)}
.form-input.field-alerta-rojo{
    border-color:#ef4444!important;
    background-color:#fef2f2!important;
    outline:2px solid #ef4444;
    outline-offset:-2px;
    box-shadow:none!important;
    transition:none!important
}
.form-input.field-alerta-ambar{
    border-color:#f59e0b!important;
    background-color:#fffbeb!important;
    outline:2px solid #f59e0b;
    outline-offset:-2px;
    box-shadow:none!important;
    transition:none!important
}
.form-input:disabled{background:oklch(var(--b3));cursor:not-allowed;opacity:.7}
select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px;padding-right:2.5rem;max-width:100%;text-overflow:ellipsis}

.form-label{display:block;font-size:.8rem;font-weight:600;color:oklch(var(--bc)/.8);margin-bottom:4px}
.form-hint{margin-top:3px;font-size:.7rem;color:oklch(var(--bc)/.5)}
.form-error{margin-top:3px;font-size:.7rem;color:oklch(var(--er));font-weight:500}

/* ── Date range group ────────────────────────────────────────────── */
.date-range-group{display:flex;align-items:flex-end;gap:6px;width:100%}
.date-range-field{flex:1;min-width:0}
.date-range-sep{padding-bottom:10px;color:oklch(var(--bc)/.35);font-size:.875rem;flex-shrink:0;line-height:1}

/* ── Flatpickr — ppcl theme ──────────────────────────────────────── */
.flatpickr-calendar{border-radius:12px;border:1px solid oklch(var(--b3));box-shadow:0 10px 40px rgba(0,0,0,.15);font-family:inherit;font-size:.875rem}
.flatpickr-day{border-radius:8px;color:oklch(var(--bc))}
.flatpickr-day:hover,.flatpickr-day:focus{background:oklch(var(--b2));border-color:oklch(var(--b3));color:oklch(var(--bc))}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{background:oklch(var(--p));border-color:oklch(var(--p));color:oklch(var(--pc))}
.flatpickr-day.today{border-color:oklch(var(--p))}
.flatpickr-day.today:hover,.flatpickr-day.today:focus{background:oklch(var(--p)/.12)}
.flatpickr-months .flatpickr-month{color:oklch(var(--bc))}
.flatpickr-current-month .cur-month,.flatpickr-current-month input.cur-year{color:oklch(var(--bc));font-weight:600}
.flatpickr-weekday{color:oklch(var(--bc)/.5);font-size:.7rem;font-weight:600}
.flatpickr-prev-month svg,.flatpickr-next-month svg{fill:oklch(var(--bc))}
.flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg{fill:oklch(var(--p))}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:oklch(var(--bc)/.25)}

/* ── ppcl-bool toggle switch — aplica en TODOS los breakpoints ────── */
input[type="checkbox"].ppcl-bool{appearance:none!important;-webkit-appearance:none!important;border-radius:13px!important;border:none!important;background-color:oklch(var(--b3))!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='white'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:3px center!important;transition:background-position .2s ease,background-color .2s ease!important;cursor:pointer!important;flex-shrink:0!important}
input[type="checkbox"].ppcl-bool:checked{background-color:oklch(var(--p))!important}
/* ── ppcl-sel — solo mobile/tablet (tablas card-mode) ────────────── */
@media (max-width:1279px){
    input[type="checkbox"].ppcl-sel{appearance:none!important;-webkit-appearance:none!important;border:2px solid oklch(var(--bc)/.25)!important;background:oklch(var(--b1))!important;transition:all .15s!important;flex-shrink:0!important;cursor:pointer!important}
    input[type="checkbox"].ppcl-sel:checked{background:oklch(var(--p))!important;border-color:oklch(var(--p))!important;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:65%!important;background-repeat:no-repeat!important;background-position:center!important}
}
/* Mobile (320px–480px) */
@media (max-width:480px){
    input[type="checkbox"].ppcl-bool{width:38px!important;height:22px!important;min-width:38px!important;min-height:22px!important;background-size:16px!important}
    input[type="checkbox"].ppcl-bool:checked{background-position:19px center!important}
    input[type="checkbox"].ppcl-sel{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;border-radius:4px!important}
}
/* Tablet & Small Desktop (481px–1024px) */
@media (min-width:481px) and (max-width:1024px){
    input[type="checkbox"].ppcl-bool{width:44px!important;height:26px!important;min-width:44px!important;min-height:26px!important;background-size:20px!important}
    input[type="checkbox"].ppcl-bool:checked{background-position:21px center!important}
    input[type="checkbox"].ppcl-sel{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;border-radius:5px!important}
}
/* Large Desktop (≥1025px) */
@media (min-width:1025px){
    input[type="checkbox"].ppcl-bool{width:48px!important;height:28px!important;min-width:48px!important;min-height:28px!important;background-size:22px!important}
    input[type="checkbox"].ppcl-bool:checked{background-position:23px center!important}
}

/* ── Buttons — legacy compat ─────────────────────────────────────── */
.btn-primary:not(.btn){
    display:inline-flex;align-items:center;gap:.5rem;
    padding:10px 20px;border-radius:10px;font-size:.875rem;font-weight:600;
    background:oklch(var(--p));color:oklch(var(--pc));border:none;cursor:pointer;transition:all .15s;
}
.btn-primary:not(.btn):hover{background:oklch(var(--pf))}
.btn-primary:not(.btn):disabled{opacity:.5;cursor:not-allowed}

.btn-secondary:not(.btn){
    display:inline-flex;align-items:center;gap:.5rem;
    padding:10px 20px;border-radius:10px;font-size:.875rem;font-weight:500;
    background:oklch(var(--b1));color:oklch(var(--bc));border:2px solid oklch(var(--b3));cursor:pointer;transition:all .15s;
}
.btn-secondary:not(.btn):hover{background:oklch(var(--b2));border-color:oklch(var(--bc)/.3)}

.btn-danger:not(.btn){
    display:inline-flex;align-items:center;gap:.5rem;
    padding:10px 20px;border-radius:10px;font-size:.875rem;font-weight:600;
    background:oklch(var(--er));color:oklch(var(--erc));border:none;cursor:pointer;transition:all .15s;
}
.btn-danger:not(.btn):hover{background:oklch(var(--erf))}

.btn-sm{padding:6px 12px;font-size:.75rem}

/* ── Tables ──────────────────────────────────────────────────────── */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:100%;border-collapse:collapse;font-size:.8rem}
.data-table th{padding:8px 12px;text-align:left;font-size:.7rem;font-weight:600;color:oklch(var(--bc)/.6);text-transform:uppercase;letter-spacing:.05em;background:oklch(var(--b2));border-bottom:2px solid oklch(var(--b3))}
.data-table td{padding:8px 12px;color:oklch(var(--bc));border-bottom:1px solid oklch(var(--b2));vertical-align:middle}
.data-table tbody tr:hover{background:oklch(var(--b2))}
.data-table tbody tr:nth-child(even){background:oklch(var(--b2)/.5)}

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert-rojo{background:#fef2f2;border-left:4px solid #ef4444;padding:10px 14px;border-radius:8px;font-size:.85rem}
.alert-ambar{background:#fffbeb;border-left:4px solid #f59e0b;padding:10px 14px;border-radius:8px;font-size:.85rem}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-panel{
    background:oklch(var(--b1));color:oklch(var(--bc));border-radius:16px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
    width:min(100%, calc(100vw - 1.5rem))!important;
    height:auto!important;
    overflow:visible!important;
    border:1px solid oklch(var(--b3));
}

/* Stable long-form modal: used by record pop-ups on mobile/tablet.
   The overlay never scrolls; the panel owns scrolling to avoid viewport/layout jumps. */
.record-modal-overlay{
    --record-modal-bottom-offset:0px;
    position:fixed;
    inset:0;
    z-index:40;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden!important;
    padding:max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
    touch-action:pan-y
}
.record-modal-panel{
    position:relative;
    z-index:50;
    display:flex;
    flex-direction:column;
    width:min(100%, 42rem)!important;
    max-height:calc(100vh - 24px);
    max-height:calc(100svh - 24px - var(--record-modal-bottom-offset));
    padding:0!important;
    overflow:hidden!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    background:oklch(var(--b1));
    color:oklch(var(--bc));
    border-radius:16px;
    border:1px solid oklch(var(--b3));
    box-shadow:0 25px 50px -12px rgba(0,0,0,.25)
}

/* ── Ergonomic record forms ─────────────────────────────────────────
   Scoped to record modals: compact on desktop, touch-safe on mobile.
   Do NOT shrink global .form-input; other modules rely on it. */
.record-form{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
}
/* When record-form is INLINE (not in modal), let it flow naturally */
#page-body .record-form{
    overflow:visible;
    min-height:auto;
    flex:none;
}
#page-body .record-form-body{
    overflow:visible;
    min-height:auto;
    flex:none;
}
.record-form-modal-header{
    flex:0 0 auto;
    margin:0;
    padding:1.25rem 1.25rem .85rem;
    border-bottom:1px solid oklch(var(--b3)/.75);
}
.record-form-modal-title{font-size:1.05rem;font-weight:800;line-height:1.2;margin:0}
.record-form-modal-subtitle{font-size:.78rem;color:oklch(var(--bc)/.55);margin-top:.2rem}
.record-modal-panel > .alert{
    flex:0 0 auto;
    margin:.85rem 1.25rem 0!important;
}
.record-form-body{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    flex-direction:column;
    gap:.85rem;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:1rem 1.25rem 1.25rem;
}
.record-form-section{
    border:1px solid oklch(var(--b3));
    border-radius:14px;
    background:linear-gradient(180deg, oklch(var(--b1)) 0%, oklch(var(--b2)/.38) 100%);
    padding:.85rem;
}
.record-form-section--acs{border-left:4px solid #ef4444}
.record-form-section--afch{border-left:4px solid #3b82f6}
.record-form-section--pool{border-left:4px solid oklch(var(--p))}
.record-form-section--ambient{border-left:4px solid #14b8a6}
.record-form-section--meters{border-left:4px solid #f59e0b}
.record-form-section-header{
    display:flex;align-items:flex-start;gap:.65rem;
    margin-bottom:.75rem;
}
.record-form-step{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.55rem;height:1.55rem;flex:0 0 auto;
    border-radius:999px;background:oklch(var(--p)/.12);color:oklch(var(--p));
    font-size:.75rem;font-weight:800;
}
.record-form-section-title{font-size:.9rem;font-weight:800;line-height:1.2;margin:0}
.record-form-section-help{font-size:.72rem;color:oklch(var(--bc)/.55);line-height:1.35;margin-top:.15rem}
.record-form-grid{display:grid;grid-template-columns:1fr;gap:.7rem}
.record-form-grid--2,.record-form-grid--3,.record-form-grid--4{grid-template-columns:1fr}
.record-form-field--wide{grid-column:1 / -1}
.record-form-field--span-2{grid-column:1 / -1}
.record-form-summary{
    margin-top:.55rem;padding:.55rem .65rem;border-radius:10px;
    background:oklch(var(--b2));border:1px solid oklch(var(--b3));
}
.form-input-sm{
    display:block;
    width:100%;
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    height:2.25rem;
    padding:.45rem .65rem;
    font-size:.8125rem;
    line-height:1.35;
    color:oklch(var(--bc));
    background-color:oklch(var(--b2));
    border:2px solid oklch(var(--b3));
    border-radius:8px;
    transition:border-color .15s,box-shadow .15s,background-color .15s;
    outline:none;
}
.form-input-sm:focus{
    border-color:oklch(var(--p));
    box-shadow:0 0 0 3px oklch(var(--p)/.15);
    background-color:oklch(var(--b1));
}
.form-input-sm:disabled{
    background-color:oklch(var(--b3));
    cursor:not-allowed;
    opacity:.7;
}
select.form-input-sm{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .55rem center;
    background-size:14px;
    padding-right:2rem;
    max-width:100%;
    text-overflow:ellipsis;
}
.record-form-actions{
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
    gap:.5rem;
    margin:0;
    padding:.85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background:oklch(var(--b1));
    border-top:1px solid oklch(var(--b3));
    box-shadow:0 -10px 28px -24px rgba(0,0,0,.35);
}
@media (min-width:640px){
    .record-form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .record-form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .record-form-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
    .record-form-field--span-2{grid-column:span 2}
}
@media (min-width:1025px){
    .record-form-body{gap:.7rem}
    .record-form-section{padding:.8rem}
    .record-form-grid{gap:.6rem}
    .record-form-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .record-form-modal-title{font-size:1rem}
}

@media (max-width:480px){
    .record-form-modal-header{padding:1rem 1rem .75rem}
    .record-modal-panel > .alert{margin:.75rem 1rem 0!important}
    .record-form-body{padding:.85rem 1rem 1rem}
    .record-form-actions{
        flex-direction:column;
        align-items:stretch;
        padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    }
    .record-form-actions .btn{
        width:100%;
        min-height:2.75rem;
    }
}
@media (max-width:1024px){
    .record-modal-overlay{
        z-index:60;
    }
    .record-modal-panel{
        z-index:61;
    }
    .record-modal-dialog-overlay{
        z-index:70!important;
    }
}
@media (min-width:1025px){
    .record-modal-panel{
        width:min(100%, 56rem)!important;
        max-height:calc(100vh - 48px)!important;
    }
}

/*
 * Modal scroll policy.
 * Most page fragments render modals as: fixed inset-0 ... flex ... + .modal-panel.
 * The overlay must be scrollable too; otherwise tall tablet/mobile forms get trapped.
 */
.fixed.inset-0.flex:has(.modal-panel){
    align-items:flex-start!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    height:100vh!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding-top:max(1rem, env(safe-area-inset-top, 0px))!important;
    padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px))!important
}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
    .fixed.inset-0.flex:has(.modal-panel){
        align-items:center!important
    }
    .modal-panel{
        max-height:calc(100vh - 1.5rem)!important;
        max-height:calc(100dvh - 1.5rem)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y
    }
}
@supports not selector(:has(*)){
    .fixed.inset-0.flex{
        align-items:flex-start!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
        height:100vh!important;
        height:100dvh!important;
        min-height:100dvh!important;
        padding-top:max(1rem, env(safe-area-inset-top, 0px))!important;
        padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px))!important
    }
    @media (min-width:1025px) and (hover:hover) and (pointer:fine){
        .fixed.inset-0.flex{align-items:center!important}
        .modal-panel{
            max-height:calc(100vh - 1.5rem)!important;
            max-height:calc(100dvh - 1.5rem)!important;
            overflow-y:auto!important;
            overflow-x:hidden!important;
            overscroll-behavior:contain;
            -webkit-overflow-scrolling:touch;
            touch-action:pan-y
        }
    }
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner{display:inline-block;width:1.25rem;height:1.25rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Sidebar link compat (used in drawer) ────────────────────────── */
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:oklch(var(--bc)/.8);text-decoration:none;transition:all .15s}
.sidebar-link:hover{background:oklch(var(--bc)/.05);color:oklch(var(--bc))}
.sidebar-link.active{background:oklch(var(--p)/.1);color:oklch(var(--p))}

/* ── Custom bottom nav (no DaisyUI dependency) ───────────────────── */
.btm-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:56px;padding:6px 0;border:none;background:transparent;color:#6b7280;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s}
.btm-btn.btm-active{color:#1d4ed8}
.btm-lbl{font-size:.625rem;font-weight:600;margin-top:2px}
.btm-nav-custom{display:block}
@media(min-width:1025px){.btm-nav-custom{display:none!important}}

/* ── Record Choice Grid & Cards (Checkboxes premium) ──────────────── */
.record-choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.record-choice-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.record-choice-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .record-choice-grid--2-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1025px) {
    .record-choice-grid--2-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.record-choice-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.record-choice-card:hover {
    background-color: oklch(var(--b2));
    border-color: oklch(var(--bc)/0.2);
}
.record-choice-card:has(input:checked) {
    background-color: oklch(var(--p)/0.06);
    border-color: oklch(var(--p));
}
.record-choice-card--compact {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}
.record-choice-card__body {
    display: flex;
    flex-direction: column;
}
.record-choice-card__title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(var(--bc));
}

/* ── Record Switch Row (Toggles modernos) ─────────────────────────── */
.record-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.record-switch-row:hover {
    background-color: oklch(var(--b2));
    border-color: oklch(var(--bc)/0.2);
}
.record-switch-row__body {
    display: flex;
    flex-direction: column;
}
.record-switch-row__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--bc));
}
.record-switch-row__hint {
    font-size: 0.7rem;
    color: oklch(var(--bc)/0.5);
    margin-top: 0.125rem;
}
.record-switch-row__input {
    margin-top: 0.125rem;
}

/* ── Nuevos Grids Adaptativos ─────────────────────────────────────── */
.record-form-grid--2-3 { grid-template-columns: 1fr; }
.record-form-grid--2-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .record-form-grid--2-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-form-grid--2-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
    .record-form-grid--2-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .record-form-grid--2-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ppcl-segmented {
    display: flex;
    box-sizing: border-box;
    border: 2px solid oklch(var(--b3));
    border-radius: 8px;
    overflow: hidden;
    background-color: oklch(var(--b2));
    height: 2.25rem;
    width: 100%;
    user-select: none;
}
.ppcl-segmented__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(var(--bc)/0.55);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 2px solid oklch(var(--b3));
}
.ppcl-segmented__btn:last-child {
    border-right: none;
}
.ppcl-segmented__btn:hover {
    background-color: oklch(var(--b3)/0.4);
    color: oklch(var(--bc));
}
.ppcl-segmented__btn--active-nd {
    background-color: oklch(var(--b3)) !important;
    color: oklch(var(--bc)) !important;
    font-weight: 600 !important;
}
.ppcl-segmented__btn--active-positive {
    background-color: oklch(var(--p)/0.15) !important;
    color: oklch(var(--p)) !important;
    font-weight: 600 !important;
}
.ppcl-segmented__btn--active-success {
    background-color: oklch(var(--su)/0.15) !important;
    color: oklch(var(--su)) !important;
    font-weight: 600 !important;
}
.ppcl-segmented__btn--active-negative {
    background-color: oklch(var(--er)/0.15) !important;
    color: oklch(var(--er)) !important;
    font-weight: 600 !important;
}

/* ── Label Alignment for CSS Grid Forms ───────────────────────────── */
.record-form-grid > div > .form-label,
.record-choice-grid > div > .form-label {
    display: flex;
    align-items: flex-end;
    min-height: 1.85rem;
    margin-bottom: 4px;
}