:root{--bg:#f6f7fb;--card:#fff;--text:#0f172a;--muted:rgba(15,23,42,.65);--primary:#1976d2;--primary2:#1259a0;--ring:rgba(25,118,210,.25);--border:rgba(15,23,42,.10);--shadow:0 6px 20px rgba(15,23,42,.08);--radius:16px;--radius2:12px;--max:980px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.topbar{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--card);border-bottom:1px solid var(--border)}.topbar__title{font-weight:700;letter-spacing:.2px}.iconbtn{border:0;background:transparent;cursor:pointer;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:18px}.iconbtn:hover{background:rgba(15,23,42,.06)}.app{max-width:var(--max);margin:0 auto;padding:16px}.tabs{display:flex;gap:8px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);position:sticky;top:56px;z-index:9;margin-bottom:12px}.tab{flex:1;border:0;background:transparent;padding:10px 12px;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:600}.tab--active{background:rgba(25,118,210,.12);color:var(--primary2)}.panel{display:none}.panel--active{display:block}.grid{display:grid;gap:12px}@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card__body{padding:16px}.row{display:flex;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.gap{gap:12px}.mt12{margin-top:10px}.w100{width:100%}.title{font-size:18px;font-weight:800}.muted{color:var(--muted);font-size:13px}.kpi{flex:1;padding:10px 12px;border-radius:var(--radius2);background:rgba(15,23,42,.03);border:1px solid rgba(15,23,42,.06)}.kpi__value{font-size:18px;font-weight:800;margin-top:4px}.badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.badge--neutral{background:rgba(15,23,42,.06)}.badge--ok{background:rgba(0,150,0,.12)}.badge--warn{background:rgba(255,165,0,.18)}.btn{border:1px solid transparent;border-radius:999px;padding:12px 14px;cursor:pointer;font-weight:800;letter-spacing:.2px}.btn--primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(25,118,210,.25)}.btn--primary:hover{background:var(--primary2)}.btn--outline{background:transparent;border-color:var(--border);color:var(--text)}.btn--outline:hover{background:rgba(15,23,42,.04)}.timeline{margin-top:10px;display:grid;gap:8px}.titem{display:flex;justify-content:space-between;padding:10px 12px;border-radius:var(--radius2);background:rgba(15,23,42,.02);border:1px solid rgba(15,23,42,.06)}.tleft{display:flex;flex-direction:column;gap:2px}.tright{font-weight:900}.list{margin-top:10px;display:grid;gap:8px}.litem{display:flex;justify-content:space-between;padding:12px;border-radius:var(--radius2);background:rgba(15,23,42,.02);border:1px solid rgba(15,23,42,.06);cursor:pointer}.litem:hover{border-color:rgba(25,118,210,.35);box-shadow:0 8px 18px rgba(25,118,210,.08)}.field{display:flex;flex-direction:column;gap:6px}.flabel{font-size:12px;font-weight:800;color:var(--muted)}.input{height:42px;border-radius:12px;border:1px solid var(--border);padding:0 12px;background:#fff;outline:none}.input:focus{border-color:rgba(25,118,210,.55);box-shadow:0 0 0 4px var(--ring)}.snackbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);min-width:220px;max-width:min(560px,calc(100% - 24px));background:rgba(15,23,42,.92);color:#fff;padding:12px 14px;border-radius:999px;box-shadow:0 12px 30px rgba(15,23,42,.25);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.snackbar--show{opacity:1;transform:translateX(-50%) translateY(-2px)}.modal{position:fixed;inset:0;display:none;z-index:50}.modal--open{display:block}.modal__scrim{position:absolute;inset:0;background:rgba(15,23,42,.45)}.modal__surface{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 24px));max-height:calc(100vh - 24px);background:#fff;border-radius:20px;border:1px solid rgba(15,23,42,.10);box-shadow:0 24px 60px rgba(15,23,42,.25);overflow:hidden;display:flex;flex-direction:column}.modal__title{padding:16px 16px 0 16px;font-size:18px;font-weight:900}.modal__content{padding:10px 16px 0 16px;color:var(--text);overflow:auto;flex:1}.modal__actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 16px 16px 16px}.modal__actions .btn{padding:10px 14px}

/* Ajustes: filas responsivas */
.formrow{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;}
.formrow > .field{flex:1; min-width:220px;}
@media(max-width:420px){.formrow > .field{min-width:160px;}}


/* Calendar (Histórico) */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;user-select:none;width:100%;}
.cal__head{font-size:12px;font-weight:800;color:rgba(15,23,42,.6);text-align:center;padding:6px 0;}
.cal__day{border:1px solid rgba(15,23,42,.10);border-radius:14px;min-height:58px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:#fff;}
.cal__day:hover{border-color:rgba(99,102,241,.35);box-shadow:0 10px 22px rgba(15,23,42,.08);}
.cal__day--dim{opacity:.45;cursor:default;}
.cal__day--today{border-color:rgba(99,102,241,.55);}
.cal__top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cal__num{font-weight:900;}
.cal__badge{font-size:11px;font-weight:900;color:rgba(15,23,42,.75);}
.cal__dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:rgba(15,23,42,.20);}
.cal__dot--ok{background:rgba(16,185,129,.85);}
.cal__dot--miss{background:rgba(148,163,184,.95);}
.cal__dot--none{background:transparent;}
.cal__dot--warn{background:rgba(239,68,68,.85);}

/* Toggle simple */
.toggle{display:flex; gap:10px; align-items:center;}
.toggle input[type="checkbox"]{width:44px; height:24px; appearance:none; background:rgba(15,23,42,.15); border-radius:999px; position:relative; outline:none; cursor:pointer; transition:all .2s ease;}
.toggle input[type="checkbox"]::after{content:""; width:20px; height:20px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:all .2s ease; box-shadow:0 2px 8px rgba(15,23,42,.25);}
.toggle input[type="checkbox"]:checked{background:rgba(25,118,210,.95);}
.toggle input[type="checkbox"]:checked::after{left:22px;}
.hint{margin-top:6px; font-size:12px; color:rgba(15,23,42,.65);}

.small{font-size:12px;}


/* Sub-cards inside modals */
.subcard{border:1px solid var(--border);border-radius:var(--radius2);background:rgba(255,255,255,.72);padding:10px}
.subcard__title{font-weight:700}
.listrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:6px 0;border-bottom:1px solid rgba(15,23,42,.06)}
.listrow:last-child{border-bottom:0}
.mono{font-variant-numeric:tabular-nums}

/* Calendar */
.cal__head{font-size:11px;color:var(--muted);text-align:center;padding:4px 0}
.cal__day{border:1px solid rgba(15,23,42,.10);border-radius:12px;padding:8px;min-height:68px;background:rgba(15,23,42,.03);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.cal__day--dim{opacity:.45}
.cal__day--today{outline:2px solid var(--ring)}
.cal__top{display:flex;justify-content:space-between;align-items:center}
.cal__num{font-weight:700}
.cal__dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.cal__dot--ok{background:#16a34a}
.cal__dot--miss{background:#9ca3af}

.entrycard{background:rgba(255,255,255,.9)}

.entryhead{display:flex;align-items:center;justify-content:space-between;gap:12px}

.betweenCards{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:6px 0 0 0;width:100%}
.betweenArrow{font-size:16px;line-height:16px;color:var(--muted);opacity:.9}
.betweenBox{margin:6px 0;padding:6px 14px;border:1px dashed rgba(15,23,42,.18);border-radius:999px;background:rgba(15,23,42,.03);font-weight:800}

/* Loading overlay */
.loadingOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.40);z-index:9999}
.loadingOverlay--open{display:flex}
.loadingBox{background:#fff;border-radius:20px;border:1px solid rgba(15,23,42,.10);box-shadow:0 24px 60px rgba(15,23,42,.25);width:min(360px,calc(100% - 40px));padding:16px 18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.loadingText{font-weight:700}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(15,23,42,.15);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.noscroll{overflow:hidden}

.topbar__left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar__right{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:0}
.topbar__user{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topbar__user b{color:var(--text);font-weight:800}

/* Horario: mantener Entrada/Salida en la misma línea (móvil/iOS) */
.formrow--time{flex-wrap:nowrap;align-items:flex-start}
.formrow--time .field{flex:1 1 0;min-width:0}
.formrow--time .input{width:100%;min-width:0}

/* iOS/Safari: evitar tamaños raros y asegurar alineación */
.input[type="time"]{-webkit-appearance:none;appearance:none;font-size:16px;line-height:42px;padding-right:10px}
@supports (-webkit-touch-callout: none){
  .input[type="time"]{font-size:16px}
}

@media (max-width: 360px){
  .formrow--time{gap:8px}
}