/**
 * PPCL App 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}
.badge-purple{background:#faf5ff;color:#9333ea;border:1px solid #d8b4fe}
.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-color .15s;
    outline:2px solid transparent;
    outline-offset:1px;
}
.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:focus-visible{
    border-color:oklch(var(--p));
    box-shadow:0 0 0 3px oklch(var(--p)/.3);
    background-color:oklch(var(--b1));
    outline:2px solid oklch(var(--p)/.5);
    outline-offset:1px;
}
.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}
/* Textarea de 5 lineas visibles (.form-input: .875rem x 1.5 x 5 + 20px padding + 4px borde).
   Es min-height y no height a proposito: deja que x-autoresize siga creciendo con el
   contenido y vence el height:2.25rem fijo que .form-input-sm impone a los textarea. */
textarea.ppcl-textarea-5{min-height:8.25rem}

/* ── 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{height:38px;display:inline-flex;align-items:center;justify-content:center;color:oklch(var(--bc)/.4);font-size:.875rem;flex-shrink:0;line-height:1}
@media (min-width:1280px){.incidencias-filter-dates{flex:0 0 19rem;max-width:19rem}}

/* ── 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)}

/* T-01 · Flatpickr time-only (noCalendar) — ancho compacto.
   El dropdown predeterminado de Flatpickr mide ~308px para un selector
   de solo hora, lo cual es excesivo visualmente.
   Resuelve: F-08, F-10, F-17, F-23, F-39, F-45, F-48 */
.flatpickr-calendar.noCalendar {
    width: auto;
    min-width: 140px;
    max-width: 180px;
}
.flatpickr-calendar.noCalendar .flatpickr-time {
    max-height: none;
    overflow: visible;
}

/* ── ppcl-bool toggle switch — aplica en TODOS los breakpoints ──────
   UI-12: el conmutador anima via transform:translateX (compositable GPU)
   en un pseudo-elemento ::after, no via background-position (paint). */
input[type="checkbox"].ppcl-bool{appearance:none!important;-webkit-appearance:none!important;position:relative!important;border-radius:13px!important;border:none!important;background-color:oklch(var(--b3))!important;transition:background-color .2s ease!important;cursor:pointer!important;flex-shrink:0!important}
input[type="checkbox"].ppcl-bool::after{content:'';position:absolute;left:3px;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;transform:translateY(-50%) translateX(0);transition:transform .2s ease}
input[type="checkbox"].ppcl-bool:checked{background-color:oklch(var(--p))!important}

/* ── Super Admin: acciones compactas y selección consistente ─────── */
.ppcl-admin-page .ppcl-table-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-wrap:wrap}
.ppcl-admin-page .ppcl-table-action.btn{width:2.5rem;min-width:2.5rem;height:2.5rem;min-height:2.5rem;padding:0;border-radius:.5rem;line-height:1;box-shadow:none}
.ppcl-admin-page .ppcl-table-action svg{width:1rem;height:1rem;stroke-width:2}
.ppcl-admin-page .ppcl-table-action-danger.btn-error,
.ppcl-admin-page .ppcl-table-action-danger.text-error{background:oklch(var(--er)/.10)!important;color:oklch(var(--er))!important;border-color:oklch(var(--er)/.18)!important}
.ppcl-admin-page .ppcl-table-action-danger.btn-error:hover,
.ppcl-admin-page .ppcl-table-action-danger.text-error:hover{background:oklch(var(--er)/.16)!important;color:oklch(var(--er))!important}
.ppcl-admin-page .ppcl-table-action:disabled{opacity:.38;filter:grayscale(.15)}

input[type="checkbox"].ppcl-sel,input[type="radio"].ppcl-sel{appearance:none!important;-webkit-appearance:none!important;width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;border-radius:4px!important;border:2px solid oklch(var(--bc)/.25)!important;background:oklch(var(--b1))!important;transition:border-color .15s,background-color .15s,box-shadow .15s!important;flex-shrink:0!important;cursor:pointer!important;vertical-align:middle!important}
input[type="checkbox"].ppcl-sel:checked,input[type="radio"].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}
input[type="checkbox"].ppcl-sel:focus-visible,input[type="radio"].ppcl-sel:focus-visible{outline:none!important;box-shadow:0 0 0 3px oklch(var(--p)/.18)!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}
    input[type="checkbox"].ppcl-bool::after{width:16px;height:16px}
    input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(16px)}
    input[type="checkbox"].ppcl-sel,input[type="radio"].ppcl-sel{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;border-radius:4px!important}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool{width:36px!important;height:20px!important;min-width:36px!important;min-height:20px!important}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool::after{width:15px;height:15px}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(15px)}
}
/* 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}
    input[type="checkbox"].ppcl-bool::after{width:20px;height:20px}
    input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(18px)}
    input[type="checkbox"].ppcl-sel,input[type="radio"].ppcl-sel{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;border-radius:5px!important}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool{width:40px!important;height:23px!important;min-width:40px!important;min-height:23px!important}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool::after{width:17px;height:17px}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(17px)}
}
/* 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}
    input[type="checkbox"].ppcl-bool::after{width:22px;height:22px}
    input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(20px)}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool{width:40px!important;height:23px!important;min-width:40px!important;min-height:23px!important}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool::after{width:17px;height:17px}
    .ppcl-admin-page input[type="checkbox"].ppcl-bool:checked::after{transform:translateY(-50%) translateX(17px)}
}

/* ── 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:background-color .15s,opacity .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:background-color .15s,border-color .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:background-color .15s;
}
.btn-danger:not(.btn):hover{background:oklch(var(--erf))}

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


.ppcl-admin-users-toolbar{display:flex;flex-direction:column;gap:.6rem;width:100%}
.ppcl-admin-users-toolbar__exports{display:grid;grid-template-columns:1fr;gap:.45rem;width:100%}
.ppcl-admin-users-toolbar__btn,
.ppcl-admin-users-toolbar__crm{min-height:2.35rem;justify-content:center;white-space:nowrap;width:100%}
@media (min-width:640px){
    .ppcl-admin-users-toolbar__exports{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1279px){
    .ppcl-admin-users-toolbar{display:grid;grid-template-columns:minmax(0,3fr) minmax(11rem,1fr);align-items:stretch}
    .ppcl-admin-users-toolbar__crm{width:100%}
}
@media (min-width:1280px){
    .ppcl-admin-users-toolbar{flex-direction:row;align-items:center;width:auto;min-width:0}
    .ppcl-admin-users-toolbar__exports{display:flex;justify-content:flex-end;width:auto}
    .ppcl-admin-users-toolbar__btn,
    .ppcl-admin-users-toolbar__crm{width:auto}
}

.ppcl-admin-filters{display:grid;grid-template-columns:1fr;gap:.7rem;align-items:stretch}
.ppcl-admin-filters .form-input{min-height:2.35rem}
.ppcl-admin-filters__primary,
.ppcl-admin-filters__secondary{display:grid;grid-template-columns:1fr;gap:.5rem;align-items:center}
.ppcl-admin-filters__action{justify-content:center;width:100%;min-height:2.35rem;white-space:nowrap}
@media (min-width:640px){
    .ppcl-admin-filters__primary{grid-template-columns:1fr 1fr}
    .ppcl-admin-filters__search{grid-column:1/-1}
    .ppcl-admin-filters__secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ppcl-admin-filters__action{width:auto;justify-self:end;padding-inline:.9rem;grid-column:1/-1}
}
@media (min-width:1280px){
    .ppcl-admin-filters__primary{grid-template-columns:minmax(18rem,1.4fr) minmax(14rem,1fr) minmax(10rem,.7fr) auto}
    .ppcl-admin-filters__search{grid-column:auto}
    .ppcl-admin-filters__action{grid-column:auto;width:auto;justify-self:auto}
    .ppcl-admin-filters__secondary{grid-template-columns:repeat(3,minmax(9rem,13rem));justify-content:start}
}



/* ── Tareas diarias toolbar ─────────────────────────────────────────── */
.td-toolbar{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:center;width:100%;min-width:0}
.td-toolbar__date{flex:0 0 9rem;width:9rem;min-width:0}
.td-toolbar__category{flex:1 1 auto;display:flex;justify-content:space-between;gap:.5rem;min-width:0;max-width:100%}
.td-toolbar__category-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.td-toolbar__category-close{flex-shrink:0}
.td-toolbar__refresh{flex:0 0 auto;flex-shrink:0}
@media (min-width:768px){
    .td-toolbar{width:auto}
    .td-toolbar__category{flex:0 1 auto;max-width:min(16rem,30vw)}
}

/* ── 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)}


.ppcl-admin-users-table{min-width:72rem}
.ppcl-admin-rgpd-cell .ppcl-tag{line-height:1.15}
.ppcl-admin-user-card{box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ppcl-admin-user-card__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ppcl-admin-user-card__action{justify-content:center;min-height:2.5rem}
@media (min-width:480px){
    .ppcl-admin-user-card__actions{display:flex}
}
@media (min-width:768px) and (max-width:1279px){
    .ppcl-admin-filters__primary{grid-template-columns:minmax(16rem,1.2fr) minmax(13rem,1fr) minmax(9rem,.7fr) auto}
    .ppcl-admin-filters__search{grid-column:auto}
    .ppcl-admin-filters__action{grid-column:auto;width:auto;justify-self:stretch}
    .ppcl-admin-filters__secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ppcl-admin-users-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;padding:.75rem}
    .ppcl-admin-users-cards>*{margin-top:0!important}
    .ppcl-admin-users-cards>label{grid-column:1/-1}
    .ppcl-admin-user-card{height:100%}
    .ppcl-admin-user-card__meta{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ppcl-admin-user-card__meta>div:nth-child(1),
    .ppcl-admin-user-card__meta>div:nth-child(2){grid-column:span 2}
    .ppcl-admin-user-card__meta .ppcl-tag{max-width:100%;white-space:normal;line-height:1.05;padding:.16rem .38rem;font-size:.65rem}
    .ppcl-admin-user-card__actions{display:flex!important;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}
    .ppcl-admin-user-card__action{width:auto;min-width:0;min-height:2.5rem;padding:.24rem .45rem!important;font-size:.68rem;line-height:1.05;white-space:nowrap}
}

/* ── 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;text-wrap:balance}
.ppcl-text-balance{text-wrap:balance}
.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;align-items:start}
.record-form-grid--2,.record-form-grid--3,.record-form-grid--4{grid-template-columns:1fr}
.record-form .record-form-field{display:grid;gap:.25rem;min-width:0}
.record-form .record-form-field > .form-label{margin-bottom:0}
.record-form .form-input[aria-invalid="true"],
.record-form .form-input-sm[aria-invalid="true"]{border-color:oklch(var(--er));box-shadow:0 0 0 3px oklch(var(--er)/.15)}
.record-form .form-input[aria-invalid="true"]:focus-visible,
.record-form .form-input-sm[aria-invalid="true"]:focus-visible{outline-color:oklch(var(--er)/.5)}
.ppcl-window-btn{width:2.5rem;height:2.5rem}
@media (pointer:coarse){
    .record-form .form-input-sm {
        min-height:48px;
        font-size:16px;
    }
    .ppcl-admin-page .ppcl-table-action.btn{width:2.75rem;min-width:2.75rem;height:2.75rem;min-height:2.75rem}
    .ppcl-admin-user-card__action{min-height:2.75rem}
    .ppcl-window-btn{width:2.75rem;height:2.75rem}
}
.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-color .15s;
    outline:2px solid transparent;
    outline-offset:1px;
}
.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:focus-visible{
    border-color:oklch(var(--p));
    box-shadow:0 0 0 3px oklch(var(--p)/.3);
    background-color:oklch(var(--b1));
    outline:2px solid oklch(var(--p)/.5);
    outline-offset:1px;
}
.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;
}
/* Semantic field width modifiers (desktop) */
@media (min-width:640px){
    /* Container-level safety cap for select controls in forms and modals */
    .record-form select:not(.ppcl-field--wide),
    .ppcl-card select:not(.ppcl-field--wide),
    .modal-box select:not(.ppcl-field--wide),
    .form-grid select:not(.ppcl-field--wide) {
        max-width: min(100%, 24rem);
    }

    .ppcl-picker-wrap { max-width: min(100%, 16rem); }

    .ppcl-field--number-short{width:min(100%,7.5rem)!important;max-width:100%!important;max-inline-size:7.5rem!important}
    .ppcl-field--quantity{width:min(100%,10rem)!important;max-width:100%!important;max-inline-size:10rem!important}
    .ppcl-field--date{width:min(100%,12rem)!important;max-width:100%!important;max-inline-size:12rem!important}
    .ppcl-field--time{width:min(100%,8rem)!important;max-width:100%!important;max-inline-size:8rem!important}
    .ppcl-field--datetime{width:min(100%,16rem)!important;max-width:100%!important;max-inline-size:16rem!important}
    .ppcl-field--select-short{width:min(100%,14rem)!important;max-width:100%!important;max-inline-size:14rem!important}
    .ppcl-field--select-medium{width:min(100%,22rem)!important;max-width:100%!important;max-inline-size:22rem!important}
    .ppcl-field--code{width:min(100%,16rem)!important;max-width:100%!important;max-inline-size:16rem!important}
    .ppcl-field--wide{width:min(100%,100%)!important;max-width:100%!important;max-inline-size:100%!important}
}
.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);
}
/* Wizard variant: justify-between for multi-tab navigation (← Anterior / Siguiente →) */
.record-form-actions--wizard{
    justify-content:space-between;
}
@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 & Button Spinner ─────────────────────────────────────── */
.spinner{display:inline-block;width:1.25rem;height:1.25rem;flex-shrink:0;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.btn-spinner{display:inline-block;width:1rem;height:1rem;flex-shrink:0;margin-right:0.375rem;vertical-align:middle;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.btn-spinner-sm{width:0.875rem;height:0.875rem;border-width:1.5px;margin-right:0.25rem}
.btn-spinner-lg{width:1.25rem;height:1.25rem;margin-right:0.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Blindaje estricto de tamaño para spinners dentro de botones */
.btn .loading,
.btn .loading-spinner,
.btn .spinner,
.btn .btn-spinner {
    flex-shrink: 0 !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    align-self: center !important;
}
.btn .loading-xs {
    width: 0.875rem !important;
    height: 0.875rem !important;
}
.btn .loading-sm {
    width: 1rem !important;
    height: 1rem !important;
}

/* ── 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:background-color .15s,color .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;
}


/* Email mass-send compact app UI (T21.15) */
.email-envio-compact{width:100%;max-width:56rem;margin-inline:auto;}
.email-envio-form.record-form{
    border:1px solid oklch(var(--b3));
    border-radius:12px;
    background:oklch(var(--b1));
    box-shadow:none;
}
.email-envio-form .email-envio-form-body{
    padding:.6rem;
    gap:.55rem;
}
.email-envio-control-strip{
    display:grid;
    grid-template-columns:minmax(16rem, 1fr) max-content;
    align-items:center;
    gap:.55rem;
    padding:.55rem .65rem;
    border:1px solid oklch(var(--b3)/.85);
    border-radius:10px;
    background:oklch(var(--b1));
}
.email-envio-content-panel{
    border:1px solid oklch(var(--b3)/.85);
    border-radius:10px;
    background:oklch(var(--b2)/.42);
}
.email-envio-field{padding:0;min-width:0;}
.email-envio-field--tipo{
    display:grid;
    grid-template-columns:auto minmax(10rem, 12rem);
    align-items:center;
    gap:.1rem .5rem;
}
.email-envio-field--tipo .form-label{margin:0;white-space:nowrap;}
.email-envio-field--tipo .email-envio-help{grid-column:1 / -1;margin-top:.05rem;}
.email-envio-recipients-compact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.65rem;
    min-height:2.15rem;
    padding:.35rem .5rem;
    border-radius:8px;
    background:oklch(var(--b2)/.45);
}
.email-envio-recipients-compact{min-width:8.5rem;}
.email-envio-tipo-select.form-input-sm{
    width:100%;
    height:1.85rem;
    min-height:1.85rem;
    border-width:1px;
    border-radius:7px;
    font-size:.76rem;
    padding-top:.22rem;
    padding-bottom:.22rem;
}
.email-envio-help{display:block;font-size:.66rem;line-height:1.22;color:oklch(var(--bc)/.55);margin-top:.18rem;}
.email-envio-compact-title{display:block;font-size:.78rem;font-weight:750;line-height:1.2;color:oklch(var(--bc));}
.email-envio-content-panel{padding:.65rem;}
.email-envio-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.55rem;}
.email-envio-panel-title{font-size:.86rem;font-weight:800;line-height:1.2;margin:0;color:oklch(var(--bc));}
.email-envio-content-grid.record-form-grid{gap:.55rem;}
.email-envio-body-input.form-input-sm{height:auto;min-height:7.25rem;resize:vertical;}
.email-envio-form .record-form-actions{padding:.65rem .7rem calc(.65rem + env(safe-area-inset-bottom, 0px));}
.email-envio-form .form-label{font-size:.72rem;margin-bottom:.18rem;}

@media (max-width:860px){
    .email-envio-control-strip{grid-template-columns:1fr;}
    .email-envio-field--tipo{grid-template-columns:1fr;}
    .email-envio-field--tipo .form-label{margin-bottom:.15rem;}
    .email-envio-field--tipo .email-envio-help{grid-column:auto;}
    .email-envio-recipients-compact{min-height:auto;}
}
@media (max-width:480px){
    .email-envio-form .email-envio-form-body{padding:.55rem;gap:.5rem;}
    .email-envio-control-strip,
    .email-envio-content-panel{border-radius:9px;}
    .email-envio-control-strip{padding:.5rem;}
    .email-envio-recipients-compact{padding:.5rem .55rem;}
    .email-envio-content-panel{padding:.55rem;}
    .email-envio-help{font-size:.66rem;}
    .email-envio-body-input.form-input-sm{min-height:6.25rem;}
    .email-envio-form .record-form-actions{padding:.55rem calc(.55rem + env(safe-area-inset-right, 0px)) calc(.55rem + env(safe-area-inset-bottom, 0px)) calc(.55rem + env(safe-area-inset-left, 0px));}
}


/* -- Auth Login step adapter (DaisyUI; deliberately not record-form) ---------------- */
.auth-flow-card .auth-flow-card__body{
    gap:1.25rem;
}
.auth-step-form{display:grid;gap:1rem}
.auth-step-form .form-control{margin-bottom:0}
.auth-step-form .input:focus-visible,
.auth-step-form .select:focus-visible{
    outline:2px solid oklch(var(--p));
    outline-offset:2px;
}
.auth-step-form .btn{min-height:2.75rem}
@media (pointer:coarse){
    .auth-step-form .input,
    .auth-step-form .select{min-height:48px;font-size:16px}
}