/**
* LIFTY OS — Shared UX utilities
* Include in all pages: heredan color:#fff del y el OS las
pinta sobre fondo blanco → texto blanco invisible. Forzamos fondo
oscuro y texto claro en TODAS las opciones del proyecto. */
select option,
select optgroup{
background:#0a0f17;
color:#fff;
font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
}
select option:checked,
select option:hover{
background:rgba(0,170,255,.18);
color:#fff;
}
select option[disabled]{
color:rgba(255,255,255,.35);
}
/* ─── Modal action footer sticky (desktop + mobile) ─────────────────────
Si el modal tiene contenido alto, los botones (Cancelar / Guardar /
Importar / Eliminar) quedan al final y requieren scroll. Sticky los
pinta siempre al fondo del modal-visible-area. */
.kb-modal-actions,
.modal-actions{
position:sticky;
bottom:-18px; /* compensa el padding inferior del modal */
background:#0a0f17;
margin:14px -18px -18px -18px;
padding:14px 18px;
border-top:1px solid rgba(255,255,255,.06);
border-radius:0 0 14px 14px;
z-index:2;
}
/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:16px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Toast notification */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#0d1117;border:1px solid rgba(0,170,255,.3);color:#fff;padding:12px 24px;border-radius:12px;font-size:13px;font-weight:600;z-index:600;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1}
/* Button loading state */
.btn.loading{opacity:.6;pointer-events:none}
.btn.loading::after{content:'';width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;margin-left:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
/* Empty state */
.empty-state{text-align:center;padding:48px 20px;color:rgba(255,255,255,.3)}
.empty-state-icon{font-size:40px;margin-bottom:10px}
.empty-state-title{font-size:16px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:6px}
/* ─── Mobile global fixes ──────────────────────────────────────────────── */
/* nav.js ya maneja: ocultar .lnav, mostrar .mnav-top/.mnav-bottom, padding del body. */
@media(max-width:768px){
/* Prevent iOS zoom on input focus */
input,select,textarea{font-size:16px!important}
/* Prevent horizontal scroll */
html,body{overflow-x:hidden;max-width:100vw}
/* Page container compacto en mobile */
.page{padding:16px 14px 16px !important;max-width:100% !important}
/* Headers más compactos */
h1{font-size:20px !important}
.head-bar,.toolbar,.header-bar{flex-direction:column !important;align-items:stretch !important;gap:10px !important}
.head-bar > *,.toolbar > *,.header-bar > *{width:100%}
.head-bar .right,.toolbar .right{display:flex;flex-wrap:wrap;gap:6px}
/* Botones touch-friendly */
.btn,.btn-sm{min-height:38px;padding:8px 14px !important;font-size:13px !important}
.btn-sm{min-height:34px;padding:6px 12px !important;font-size:12px !important}
/* Tablas — scroll horizontal en su contenedor */
.table-card,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:560px}
/* Modales: fullscreen-ish con margen mínimo.
Padding-bottom = altura del bottom-nav (72px) + safe-area + 8px gap
para que los botones de acción no queden tapados por la nav. */
.modal-overlay,.modal-bg{
padding:8px 8px calc(72px + env(safe-area-inset-bottom) + 8px) 8px !important;
align-items:flex-end !important;
}
.modal-overlay > div,.modal-bg .modal{
max-width:100% !important;
width:100% !important;
max-height:calc(100vh - 72px - env(safe-area-inset-bottom) - 24px) !important;
border-radius:16px 16px 0 0 !important;
padding:18px !important;
}
.modal-overlay > div{margin:0 auto}
/* Drawers: fullscreen en mobile */
.tdrawer,.drawer-right,#tdrawer{width:100vw !important;border-left:none !important}
.tdrawer-head,.drawer-head{padding:14px 16px !important}
.tdrawer-body,.drawer-body{padding:14px 16px 80px !important}
/* Kanban general: 1 columna por pantalla con scroll horizontal con snap */
.kb-board{grid-template-columns:none !important;grid-auto-columns:88vw !important;scroll-snap-type:x mandatory;gap:10px !important;padding-bottom:14px !important}
.kb-board > *{scroll-snap-align:start}
.kb-col{min-height:auto !important;padding:10px !important}
.kb-card{padding:10px !important}
/* Grids 2-col → 1-col por defecto */
.form-row,.access-grid,.tm-form,.tdrawer-meta-grid,.kb-form-grid{grid-template-columns:1fr !important}
.form-row .full,.kb-form-grid .full{grid-column:1 !important}
/* Filtros, listas y stats: ocupar todo el ancho */
.filters{flex-direction:column !important;align-items:stretch !important}
.filters select,.filters input{width:100% !important}
.stat-bar{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
.stat{min-width:auto !important;padding:8px 12px !important}
.stat-val{font-size:16px !important}
/* Tabs scrollables */
.tabs{overflow-x:auto;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch}
.tab-btn,.tab{white-space:nowrap;flex-shrink:0}
/* Cards/secciones con menos padding */
.dash-section,.kpi-section,.client-row,.form-item,.tm-row,.wkr-entry{padding:12px 14px !important}
.kpis{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
.kpi{padding:12px !important}
.kpi-val{font-size:18px !important}
/* Layout 2-col → stack */
.layout,.split-2{grid-template-columns:1fr !important}
/* Sidebar de clientes (en /crm) se convierte en lista horizontal scrollable */
.clients-list{max-height:none !important;display:flex;overflow-x:auto;gap:6px;padding:8px !important}
.clients-list .title{display:none !important}
.client-row{flex-shrink:0;padding:8px 12px !important;white-space:nowrap}
/* Toast más arriba para no chocar con bottom tabs */
.toast{bottom:130px !important}
/* ── Específicos por página ─────────────────────────────────────────── */
/* /tareas: bulk-bar fija arriba del bottom-nav.
Hidden con display:none (no transform) para evitar artefactos en iOS Safari. */
.bulk-bar{
bottom:calc(72px + env(safe-area-inset-bottom) + 10px) !important;
left:8px !important;
right:8px !important;
transform:translateY(8px) !important;
width:auto !important;
max-width:none !important;
flex-wrap:wrap !important;
gap:8px !important;
padding:10px 12px !important;
}
.bulk-bar.show{transform:translateY(0) !important}
.bulk-btn{flex:1;min-width:auto;font-size:11.5px !important;padding:8px 10px !important}
.bulk-sep{display:none}
/* /tareas: filter popover anclado bajo el trigger (no flotando al fondo).
El bug previo era position:fixed + top/bottom:auto → flotaba sin ancla. */
.filter-pop{position:relative !important;display:block !important;width:100%}
.filter-trigger{width:100%;justify-content:space-between}
.filter-popover{
position:absolute !important;
top:calc(100% + 6px) !important;
left:0 !important; right:0 !important; bottom:auto !important;
min-width:0 !important; max-width:none !important; width:100% !important;
max-height:60vh; overflow-y:auto;
}
/* /tareas: stat-bar 2 cols, chips compactos */
.chip{font-size:11px !important;padding:5px 9px !important}
/* /checkin & modal global: full-screen-ish */
.lci-overlay{padding:0 !important;align-items:flex-end !important}
.lci-modal{
max-width:100% !important;
max-height:96vh !important;
border-radius:18px 18px 0 0 !important;
padding:18px !important;
margin:0 !important;
}
.lci-block-row textarea{font-size:14px !important}
.lci-yesno button{min-height:48px;font-size:14px !important;padding:14px 12px !important}
.lci-task-pick{max-height:200px !important}
/* /pedro: ajustes verticales del timebox */
.day-grid,.today-grid{grid-template-columns:1fr !important}
.block-row{padding:10px 12px !important}
.block-row .time{min-width:auto !important;font-size:11px !important}
/* Welcome banner /checkin: imprimir reloj abajo */
.welcome-banner{padding:18px !important}
.w-clock{align-self:flex-start;margin-top:4px}
.w-cta-wrap{flex-direction:column !important;gap:8px !important}
.w-cta-wrap > *{width:100% !important;text-align:center}
/* Kanban /tareas: drag-and-drop no funciona en touch → mejor scroll-snap horizontal
y mostrar instrucción para usar tap-modal. */
.kb-card{cursor:pointer !important;-webkit-tap-highlight-color:rgba(0,170,255,.1)}
.kb-card:active{transform:scale(.98)}
.kb-col{scroll-snap-align:start}
/* Card meta: pills más visibles en touch */
.kb-card-meta .pill{padding:3px 9px !important;font-size:11px !important}
/* Modales con scroll: fija el head */
.modal,.kb-modal{padding:16px !important}
.modal-head{position:sticky;top:0;padding:6px 0 12px;z-index:2;background:#0a0f17;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:14px}
/* En mobile el sticky bottom usa margin negativo distinto */
.kb-modal-actions,.modal-actions{
bottom:-16px;
margin:14px -16px -16px -16px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
}
}