/* Lo agregado para la versión Firebase: ingreso, usuario en la barra y pantalla de usuarios.
   Usa los mismos tokens de app.css para que se vea parte del mismo sistema. */
.login{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login-card .eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.login-card h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.login-card .actions{justify-content:space-between}
.login-card .link{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;text-decoration:underline}
.login-card .link:disabled{opacity:.5;cursor:not-allowed}
.login-card .estado{font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.login-card .msg{min-height:0}
.emu{border:1px dashed var(--warn);color:var(--warn);background:var(--warn-bg)}
.u-sel{width:auto;min-width:120px;padding:5px 8px;font-size:13px}
.u-nom{min-width:140px;padding:5px 8px;font-size:13px}
/* (i) de los supuestos: la ayuda se abre bajo la casilla, con el ancho de la casilla, así nunca se sale de la pantalla. */
label.f.sup{position:relative}
.f-top{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.info{appearance:none;flex:none;width:17px;height:17px;border-radius:50%;border:1px solid var(--accent);background:var(--surface);color:var(--accent);font:italic 700 11px/15px Georgia,"Times New Roman",serif;padding:0;margin-left:2px;cursor:help;position:relative}
.info::after{content:"";position:absolute;inset:-6px}
.info:hover,.info.open{background:var(--accent);color:var(--accent-ink)}
.info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.info-tip{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:400;line-height:1.45;padding:8px 10px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:pre-line}
.info:hover + .info-tip,.info:focus-visible + .info-tip,.info.open + .info-tip{display:block}
/* Configuración: índice por módulo a la izquierda, una sección abierta a la derecha. */
.cfg{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.cfg{grid-template-columns:minmax(0,1fr)}}
.cfg-idx{display:flex;flex-direction:column;gap:4px;padding:10px}
.cfg-mod{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 8px 2px}
.cfg-item{appearance:none;font:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;border:1px solid transparent;border-radius:6px;background:none;color:var(--ink);padding:8px 10px;cursor:pointer}
.cfg-item:hover{background:var(--surface2)}
.cfg-item[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent)}
.cfg-item b{font-weight:600;font-size:13.5px}
.cfg-item span{font-size:12px;color:var(--muted)}
.cfg-item em{font-style:normal;font-size:11.5px;color:var(--accent);font-weight:600}
.cfg-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cfg-det{display:flex;flex-direction:column;gap:12px}
.cfg-det .sub{margin:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{appearance:none;font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:999px;padding:5px 12px;cursor:pointer}
.seg button:hover{background:var(--surface2)}
.seg button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg .n{display:inline-block;min-width:18px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;padding:0 5px;text-align:center}
#ay-form{display:flex;flex-direction:column;gap:14px}
.ay-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ay-list textarea{min-height:0;font-size:13px;field-sizing:content}
.ay-orig{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:400;color:var(--accent);cursor:pointer;text-decoration:underline;align-self:flex-start}

/* Informe Tusan: controles a la izquierda y hoja a la derecha, alineados arriba y con los mismos bordes.
   En pantallas angostas van uno bajo el otro, ambos a todo el ancho. */
.inf-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.inf-grid .sheet{max-width:none;margin:0}
.inf-ctl{position:sticky;top:20px}
.inf-ctl .form{grid-template-columns:minmax(0,1fr)!important;align-items:stretch}
.inf-ctl .form > *{grid-column:auto!important}
.inf-ctl .form .f[style]{justify-content:flex-start!important}
.inf-ctl .actions .btn{flex:1 1 100%}
@media (max-width:1100px){.inf-grid{grid-template-columns:minmax(0,1fr)}.inf-ctl{position:static}.inf-ctl .actions .btn{flex:0 1 auto}}

/* ── Órdenes de trabajo ─────────────────────────────────────────────── */
.pill.azul{background:var(--accent-soft);color:var(--accent)}
.ot-filtros{align-items:flex-end}
.ot-filtros .f{width:150px}
.ot-filtros .f:last-child{width:200px}
.ot-sel{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding:10px 12px;margin-bottom:12px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft)}
.ot-sel b{align-self:center;margin-right:4px}
.ot-sel .f{width:150px}
.ot-row{cursor:pointer}
.ot-scroll{max-height:460px;overflow:auto}
#ot-dlg{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:0;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
#ot-dlg::backdrop{background:rgba(0,0,0,.45)}
.ot-dlg-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--line)}
.ot-dlg-h h2{margin:6px 0 2px;font-family:var(--f-display);font-size:18px}
.ot-dlg-h .sub{margin:0;color:var(--muted);font-size:12.5px}
.ot-dlg-b{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px}
.ot-dlg-b h3{margin:10px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ot-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:13px}
.ot-dl dt{color:var(--muted)} .ot-dl dd{margin:0}
.ot-firma{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ot-firma img{max-width:280px;border:1px solid var(--line);border-radius:6px;background:#fff}
.ot-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:60;max-width:min(92vw,520px);font-size:13.5px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.ot-toast.err{background:var(--bad);color:#fff}
/* Validación de jornada */
.ov-cq{border:1px solid var(--line);border-radius:6px;margin-bottom:10px;background:var(--surface)}
.ov-cq.open{border-color:var(--accent)}
.ov-head{appearance:none;width:100%;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:none;border:0;padding:10px 12px;cursor:pointer}
.ov-head b{font-family:var(--f-display);font-size:15px;min-width:34px}
.ov-n{color:var(--ink2);font-size:12.5px}
.ov-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ov-body{padding:0 12px 12px;border-top:1px solid var(--line)}
.ov-pie{margin-top:10px}
/* Mis órdenes (celular primero) */
#v-misot{max-width:640px;width:100%;margin:0 auto}
.mo-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;flex-wrap:wrap}
.mo-top h2{margin:2px 0 0;font-family:var(--f-display);font-size:22px}
.mo-top .eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mo-dia{display:flex;gap:6px;align-items:center}
.mo-dia input{width:auto}
.mo-res{margin:10px 0 4px;color:var(--ink2);font-size:13px}
.mo-ok{margin-top:12px;padding:10px 12px;border-radius:6px;background:var(--good-bg);color:var(--good);font-weight:600}
.mo-lista{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mo-item{appearance:none;font:inherit;color:var(--ink);text-align:left;display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;min-height:64px}
.mo-item:hover,.mo-item:focus-visible{border-color:var(--accent);outline:none}
.mo-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;display:grid;place-items:center;font-size:13px}
.mo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mo-t > span{font-size:12.5px;color:var(--ink2)}
.mo-dev{display:block;margin-top:4px;padding:6px 8px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600}
.mo-ficha{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:12px}
.mo-ficha h2{margin:8px 0 2px;font-family:var(--f-display);font-size:19px}
.mo-ficha p{margin:4px 0;font-size:13.5px}
.mo-fh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mo-acc,.mo-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mo-form input,.mo-form select{font-size:16px;padding:10px 11px}
.mo-big{padding:13px 16px;font-size:15px;width:100%}
.mo-firma{width:100%;height:150px;background:#fff;border:1px solid var(--line);border-radius:8px;touch-action:none}
.mo-item .pill{flex:none;max-width:42%;white-space:normal;text-align:center}