/* SCR Sistema Control de Registro · estilos del panel */
:root { --azul:#0b2046; --celeste:#00aeef; --ok:#0ca678; --mal:#e03131; --aviso:#f59f00; --gris:#64748b; --fondo:#f1f5f9; --borde:#e2e8f0; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI", system-ui, sans-serif; background:var(--fondo); color:#0f172a; font-size:14px; }
header { background:var(--azul); color:#fff; padding:12px 20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
header h1 { font-size:16px; margin:0; flex:1; min-width:180px; }
header select, header button { height:34px; border-radius:8px; border:none; padding:0 10px; font-size:13px; }
header button { background:#1e3a6e; color:#fff; cursor:pointer; }
nav { background:#fff; border-bottom:1px solid var(--borde); display:flex; gap:2px; padding:0 14px; overflow-x:auto; }
nav button { border:none; background:none; padding:12px 14px; font-size:14px; font-weight:600; color:var(--gris); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
nav button.sel { color:#0077a8; border-bottom-color:var(--celeste); }
nav button.cfg { margin-left:auto; }
#subtabs { background:#f4f8fb; padding:6px 14px; gap:6px; } #subtabs.oculto { display:none; }
#subtabs button { border:1px solid transparent; border-radius:999px; padding:6px 14px; font-size:13px; }
#subtabs button:hover { background:#e8f1f7; } #subtabs button.sel { background:#fff; border-color:var(--borde); color:#0077a8; }
main { padding:18px; max-width:1240px; margin:0 auto; }
.card { background:#fff; border:1px solid var(--borde); border-radius:12px; padding:16px; margin-bottom:16px; }
.card h2 { margin:0 0 10px; font-size:15px; }
.fila { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:10px; }
.campo { display:flex; flex-direction:column; gap:4px; }
.campo label { font-size:11px; font-weight:700; color:var(--gris); text-transform:uppercase; }
input, select { height:36px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; font-size:14px; background:#fff; }
button.b { height:36px; border:none; border-radius:8px; padding:0 14px; font-weight:600; cursor:pointer; background:var(--celeste); color:#fff; }
button.b.sec { background:#e2e8f0; color:#0f172a; }
button.b.mal { background:#fee2e2; color:var(--mal); }
button.b:disabled { opacity:.5; cursor:not-allowed; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); vertical-align:middle; }
th { font-size:11px; text-transform:uppercase; color:var(--gris); }
.tabla { overflow-x:auto; }
.tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; font-weight:600; background:#e2e8f0; }
.tag.ok { background:#d3f9e8; color:#087f5b; } .tag.mal { background:#ffe3e3; color:var(--mal); } .tag.av { background:#fff3bf; color:#8a5a00; }
.msg { padding:10px 12px; border-radius:8px; margin:8px 0; }
.msg.ok { background:#d3f9e8; color:#087f5b; } .msg.mal { background:#ffe3e3; color:var(--mal); } .msg.av { background:#fff3bf; color:#8a5a00; }
.peq { font-size:12px; color:var(--gris); }
#login { max-width:340px; margin:80px auto; }
.oculto { display:none !important; }
.canales label { display:flex; gap:8px; align-items:center; padding:6px 0; font-size:14px; }
.canales input { height:auto; }
.velo { position:fixed; inset:0; background:rgba(11,32,70,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.dlg { background:#fff; border-radius:14px; padding:20px; width:100%; max-width:460px; max-height:90vh; overflow:auto; }
.dlg h3 { margin:0 0 12px; font-size:16px; }
.dlg .campo { margin-bottom:10px; } .dlg input[type=text], .dlg input[type=password], .dlg input[type=email], .dlg input:not([type]), .dlg select { width:100%; }
.dlg .pie { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.dlg label.chk { display:flex; gap:8px; align-items:center; font-size:14px; padding:3px 0; } .dlg label.chk input { height:auto; }
.franja { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-bottom:16px; }
.franja:empty { display:none; }
#toasts { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:80; width:min(540px, calc(100vw - 24px)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; gap:12px; align-items:flex-start; background:#1e293b; color:#fff; border-radius:12px; padding:12px 14px; border-left:4px solid var(--c, #f59f00); box-shadow:0 10px 28px rgba(15,23,42,.35); font-size:14px; animation:sube .28s ease-out; }
.toast.mal { --c:#e03131; }
.toast b { display:block; margin-bottom:2px; }
.toast button { margin-left:auto; background:none; border:none; color:#cbd5e1; font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
@keyframes sube { from { transform:translateY(28px); opacity:0; } to { transform:none; opacity:1; } }
.lic { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--borde); border-left:4px solid var(--c); border-radius:12px; padding:10px 14px; }
.lic.ok { --c:#0ca678; } .lic.av { --c:#f59f00; background:#fffbeb; } .lic.mal { --c:#e03131; background:#fff5f5; } .lic.nd { --c:#94a3b8; }
.lic.ancho { grid-column:1 / -1; }
.lic .pto { width:10px; height:10px; border-radius:50%; background:var(--c); margin-top:5px; flex:none; }
.lic .t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); }
.lic .v { font-weight:700; font-size:14px; }
.lic.mal .v { color:var(--mal); } .lic.av .v { color:#8a5a00; }
.lic .s { font-size:12px; color:var(--gris); margin-top:2px; }
body[data-fmt="mayusculas"] input.nom { text-transform:uppercase; }

#aviso { position:fixed; right:20px; bottom:20px; z-index:90; width:min(400px, calc(100vw - 24px)); pointer-events:none; }
#aviso .msg { margin:0; padding:11px 16px; border-radius:10px; font-weight:600; box-shadow:0 8px 24px rgba(15,23,42,.18); animation:sube .25s ease; transition:opacity .4s; }
#aviso .msg.sale { opacity:0; }
@keyframes baja { from { transform:translateY(-14px); opacity:0; } to { transform:none; opacity:1; } }
.form { display:grid; gap:14px 16px; grid-template-columns:repeat(12,1fr); }
.form .campo { grid-column:span 3; min-width:0; } .form .campo.c4 { grid-column:span 4; } .form .campo.c6 { grid-column:span 6; } .form .campo.c12 { grid-column:1 / -1; }
.form input, .form select { width:100%; }
@media (max-width:760px) { .form .campo, .form .campo.c4, .form .campo.c6 { grid-column:1 / -1; } }
.sec-t { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); margin:20px 0 8px; padding-top:14px; border-top:1px solid var(--borde); }
.sec-t.p { margin-top:0; padding-top:0; border:none; }
.opts { display:flex; flex-wrap:wrap; gap:6px 20px; }
.opts label { display:flex; gap:7px; align-items:center; font-size:14px; font-weight:400; text-transform:none; color:#0f172a; margin:0; }
.opts input { height:auto; width:auto; }
.pie-f { display:flex; justify-content:flex-end; margin-top:18px; }
.card h2 small { font-weight:500; color:var(--gris); font-size:12px; margin-left:6px; }
.card .sub { margin:-4px 0 14px; }
td .peq a, .lnk { color:#0077a8; cursor:pointer; font-weight:600; background:none; border:none; padding:0; font-size:12px; }
.acc { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.acc button.b { height:30px; padding:0 11px; font-size:12px; }

.b.g { background:#fff; border:1px solid #d5dde8; color:#1e293b; height:30px; padding:0 11px; font-size:12px; font-weight:600; border-radius:8px; cursor:pointer; white-space:nowrap; }
.b.g:hover { background:#f8fafc; border-color:#b8c4d4; }
.b.g.mal { color:var(--mal); border-color:#f5c2c2; background:#fff; } .b.g.mal:hover { background:#fff5f5; }
.cab-card { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.cab-card h2 { margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
table.us { table-layout:auto; } table.us th { padding:10px 14px; font-weight:700; letter-spacing:.04em; border-bottom:1px solid #cbd5e1; }
table.us td { padding:14px; vertical-align:middle; } table.us tr:last-child td { border-bottom:none; }
table.us .pn { font-weight:600; } table.us .pn small { display:block; font-weight:400; color:var(--gris); font-size:12px; margin-top:2px; }
table.us .tag, table.us td.nw { white-space:nowrap; }
.us-nota { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--borde); }

.form2 { display:grid; gap:12px 16px; grid-template-columns:1fr 1fr; } .form2 .campo { min-width:0; } .form2 input, .form2 select { width:100%; }
@media (max-width:560px) { .form2 { grid-template-columns:1fr; } .hoDia { grid-template-columns:110px 1fr 14px 1fr; } .hoDia .hoNota { grid-column:1/-1; } }
.hoDia { display:grid; grid-template-columns:130px 110px 18px 110px 1fr; gap:8px; align-items:center; padding:3px 0; }
.hoDia input[type=time] { width:100%; } .hoDia .chk { margin:0; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:6px 0 14px; } .kpis:empty { display:none; }
.kpi { border:1px solid var(--borde); border-radius:10px; padding:10px 14px; background:#fff; } .kpi b { display:block; font-size:20px; } .kpi span { font-size:12px; color:var(--gris); }
.kpi.mal { border-color:#f5c2c2; background:#fff5f5; } .kpi.mal b { color:var(--mal); } .kpi.av { border-color:#f3dc9a; background:#fffbeb; } .kpi.av b { color:#8a5a00; }
.seg { display:inline-flex; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; align-self:flex-end; height:36px; }
.seg button { border:none; background:#fff; padding:0 14px; font-size:13px; font-weight:600; color:var(--gris); cursor:pointer; } .seg button.sel { background:var(--azul); color:#fff; }
.req { font-size:12px; color:var(--gris); line-height:1.5; }
code { background:#f1f5f9; padding:2px 6px; border-radius:6px; word-break:break-all; }

/* Listas largas: paginación y tablas densas */
.pager { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 4px 0; border-top:1px solid #e5eaf0; margin-top:4px; }
.pager .pg { display:flex; align-items:center; gap:10px; font-size:13px; color:#334155; }
.pager .b.g:disabled { opacity:.45; cursor:default; }
.pager select { height:28px; padding:0 6px; font-size:12px; width:auto; }
table.den th { padding:10px 8px; font-size:11px; } table.den td { padding:10px 8px; font-size:13px; }
.acc.emp { justify-content:flex-start; max-width:none; flex-wrap:nowrap; } .acc.emp button.b { padding:0 9px; white-space:nowrap; }
@media (max-width:1150px) { nav button { padding:12px 9px; font-size:13px; } }

/* Checadas anuladas: se ven tachadas pero siguen ahí */
tr.anulada td { color:var(--suave,#64748b); }
tr.anulada td:not(:last-child) { text-decoration:line-through; }
tr.anulada td .tag, tr.anulada td .peq { text-decoration:none; display:inline-block; }

/* La barra de arriba (logo, empresa y pestañas) siempre se queda visible al bajar */
#barra { position:sticky; top:0; z-index:40; box-shadow:0 2px 6px rgba(15,23,42,.12); }

/* Nómina: reglas agrupadas por tema */
.cfg-grupo { border:1px solid var(--borde); border-radius:12px; padding:14px 16px 16px; margin:14px 0; background:#fbfdff; }
.cfg-grupo h3 { margin:0 0 4px; font-size:14px; }
.cfg-grupo > .peq.sub { margin:0 0 12px; }

/* Login neutro (sin marca de ninguna empresa) */
/* Fondo opcional: pon tu imagen en panel/img/fondo-login.jpg. Si no existe, se ve el degradado. */
body:has(#login:not(.oculto)) { min-height:100vh; background:linear-gradient(rgba(15,23,42,.72),rgba(15,23,42,.72)), url("../img/fondo-login.jpg") center/cover no-repeat, radial-gradient(1200px 600px at 50% -10%, #1e293b 0%, #0f172a 60%) #0f172a; }
#login { max-width:360px; margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 32px); padding:28px 26px; border:0; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
#login::before { content:""; display:block; width:52px; height:52px; margin:0 auto 12px; background:url("../img/logo-login.svg") center/contain no-repeat; }
#login.conlogo::before { display:none; }
#login h2 { text-align:center; font-size:17px; margin:0 0 4px; }
#login .peq { text-align:center; margin:0 0 16px !important; }
#login input { padding:10px 12px; }
#login .b { background:#0f172a; padding:11px; }
#login .b:hover { background:#1e293b; }

/* Chat del asistente */
.ia-burbuja { border-radius:12px; padding:12px 14px; line-height:1.5; font-size:14px; max-width:92%; }
.ia-yo { align-self:flex-end; background:#e0f4fd; color:#0b4a6b; border-bottom-right-radius:4px; white-space:pre-wrap; }
.ia-resp { align-self:flex-start; background:#fff; border:1px solid #dbe4ef; border-left:4px solid var(--celeste, #19b5ee); box-shadow:0 2px 8px rgba(15,23,42,.06); border-bottom-left-radius:4px; }
.ia-quien { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#0077a8; margin-bottom:6px; }
.ia-h { font-weight:700; color:#0f2a4a; margin:12px 0 4px; padding-bottom:3px; border-bottom:1px solid #e8eef6; }
.ia-h:first-of-type { margin-top:0; }
.ia-p { margin:4px 0; }
.ia-ul { margin:4px 0 4px 2px; padding-left:20px; }
.ia-ul li { margin:4px 0; }
.ia-pensando { color:#64748b; font-style:italic; }

/* Enlaces y QR: tarjetas una junto a otra, con el QR centrado */
.qrGrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin-top:8px; }
.qrCard { background:#fff; border:1px solid var(--borde); border-radius:16px; padding:18px 16px 16px; text-align:center; box-shadow:0 2px 10px rgba(11,32,70,.07); display:flex; flex-direction:column; align-items:center; gap:8px; }
.qrCard .qrTipo { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:99px; }
.qrCard.cel .qrTipo { background:#e0f4fd; color:#0077a8; }
.qrCard.tab .qrTipo { background:var(--azul); color:#fff; }
.qrCard h3 { margin:2px 0 0; font-size:16px; color:var(--azul); }
.qrCard .qrSub { font-size:12px; color:var(--gris); min-height:16px; }
.qrMarco { background:#fff; padding:12px; border:2px solid var(--celeste); border-radius:16px; line-height:0; margin:6px 0; }
.qrCard.tab .qrMarco { border-color:var(--azul); }
.qrLink { font-family:ui-monospace, Consolas, monospace; font-size:11px; color:var(--gris); word-break:break-all; max-width:100%; background:var(--fondo); border-radius:8px; padding:6px 8px; }
.qrAcc { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

.banner-prueba { background:#fff3bf; color:#8a5a00; padding:8px 20px; font-size:13px; text-align:center; border-bottom:1px solid #f5d76e; }
.banner-prueba.fin { background:#ffe3e3; color:var(--mal); border-color:#ffc9c9; }
.banner-prueba a { color:inherit; font-weight:700; margin-left:6px; text-decoration:underline; }

/* Acciones por empleado: un botón visible + menú "⋯" */
.menuAcc { position:relative; display:inline-block; }
.menuAcc > summary { list-style:none; cursor:pointer; height:30px; width:34px; display:grid; place-items:center; border-radius:8px; background:#eef2f7; color:var(--azul); font-weight:800; font-size:18px; line-height:1; user-select:none; }
.menuAcc > summary::-webkit-details-marker { display:none; }
.menuAcc[open] > summary { background:var(--azul); color:#fff; }
.menuAccLista { position:absolute; right:0; top:36px; z-index:50; min-width:200px; background:#fff; border:1px solid var(--borde); border-radius:12px; box-shadow:0 12px 30px rgba(11,32,70,.15); padding:6px; display:flex; flex-direction:column; }
.menuAccLista button { all:unset; box-sizing:border-box; width:100%; padding:9px 12px; border-radius:8px; font-size:13px; color:#1e293b; cursor:pointer; }
.menuAccLista button:hover { background:#f1f5f9; }
.menuAccLista button.peligro { color:var(--mal); border-top:1px solid var(--borde); border-radius:0 0 8px 8px; margin-top:4px; }
.menuAccLista button.peligro:hover { background:#fff5f5; }
.acc.emp { align-items:center; }
.menuAccLista { width:210px; }

/* Sucursales del empleado: cuadrícula ordenada */
.sucGrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:6px 0 6px; }
.sucOpc { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--borde); border-radius:10px; background:#fff; cursor:pointer; font-size:13px; line-height:1.3; text-align:left; transition:border-color .15s, background .15s; }
.sucOpc:hover { border-color:#94a3b8; }
.sucOpc input { width:16px; height:16px; margin:0; flex:none; accent-color:var(--azul); }
.sucOpc span { overflow:hidden; text-overflow:ellipsis; }
.sucOpc:has(input:checked) { border-color:var(--celeste); background:#ecfaff; font-weight:600; }
@media (max-width:480px) { .sucGrid { grid-template-columns:1fr; } }
.campo .sucOpc { color:#1e293b; font-weight:500; letter-spacing:0; text-transform:none; font-size:13px; margin:0; min-height:44px; }
.campo .sucOpc:has(input:checked) { font-weight:600; color:var(--azul); }

/* ===================== Botones Teknovista (sistema unificado) ===================== */
button.b { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; border:1px solid transparent; border-radius:10px; padding:0 16px;
  font-weight:600; font-size:13.5px; letter-spacing:.1px; white-space:nowrap; cursor:pointer;
  background:linear-gradient(180deg,#0e2a5c,#0b2046); color:#fff;
  box-shadow:0 1px 2px rgba(11,32,70,.25), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .12s, box-shadow .15s, border-color .15s, color .15s, background .15s; }
button.b:hover:not(:disabled) { box-shadow:0 6px 16px rgba(11,32,70,.22); transform:translateY(-1px); }
button.b:active:not(:disabled) { transform:none; box-shadow:0 1px 2px rgba(11,32,70,.25); }
button.b:focus-visible { outline:2px solid var(--celeste); outline-offset:2px; }
button.b svg.ic { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button.b.acento { background:linear-gradient(180deg,#14bdf5,#00a3e0); }
button.b.sec, button.b.g { background:#fff; color:#0b2046; border-color:#d5dde8; box-shadow:0 1px 2px rgba(15,23,42,.05); }
button.b.sec:hover:not(:disabled), button.b.g:hover:not(:disabled) { border-color:var(--celeste); color:#0077a8; background:#fff; box-shadow:0 4px 12px rgba(0,174,239,.12); }
button.b.mal, button.b.g.mal { background:#fff; color:var(--mal); border-color:#f3c4c4; box-shadow:none; }
button.b.mal:hover:not(:disabled) { background:#fff5f5; border-color:var(--mal); color:var(--mal); box-shadow:none; }
button.b:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
button.b.g { height:38px; padding:0 14px; font-size:13px; }
.acc button.b, .acc.emp button.b, .pager button.b { height:32px; padding:0 12px; font-size:12.5px; border-radius:8px; }
button.b.g svg.ic, .acc button.b svg.ic { width:15px; height:15px; }
.dlg button.b { height:38px; }
.menuAcc > summary { height:32px; width:36px; background:#fff; border:1px solid #d5dde8; color:#0b2046; border-radius:8px; transition:border-color .15s; }
.menuAcc > summary:hover { border-color:var(--celeste); }
.menuAcc[open] > summary { background:var(--azul); border-color:var(--azul); color:#fff; }
#login .b { background:linear-gradient(180deg,#0e2a5c,#0b2046); padding:0 16px; height:42px; }

/* Filas cebra en todas las tablas + resaltado al pasar el mouse */
table tbody tr:nth-child(even) td { background:#f5f7fb; }
table tbody tr:hover td { background:#eaf7fd; }
table tbody tr td { transition:background .12s; }

/* Guía para conectar relojes */
.guiaReloj { margin:0; padding-left:20px; line-height:1.55; font-size:14px; color:#1e293b; }
.guiaReloj li { margin-bottom:10px; }
.datoReloj { display:flex; justify-content:space-between; gap:12px; align-items:baseline; background:#f1f5f9; border-radius:8px; padding:8px 12px; margin-top:6px; font-size:13px; }
.datoReloj span { color:var(--gris); } .datoReloj b { color:var(--azul); font-family:ui-monospace,Consolas,monospace; }

/* Relojes encontrados en la red */
.rlLista { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.rlItem { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--borde); border-radius:12px; padding:12px 14px; background:#fff; }
.rlItem:hover { border-color:var(--celeste); }

/* ---------- Nómina: pestañas internas y orden ---------- */
.nomTabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; padding:4px; background:#eef3f8; border-radius:12px; width:fit-content; max-width:100%; }
.nomTabs button { border:1px solid transparent; background:transparent; border-radius:9px; padding:8px 16px; font-size:14px; font-weight:600; color:#4a5a70; cursor:pointer; }
.nomTabs button:hover { color:#0b1f44; } .nomTabs button.sel { background:#fff; border-color:var(--borde); color:#0077a8; box-shadow:0 1px 3px rgba(11,31,68,.08); }
.nomBarra { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; padding:12px 14px; margin:12px 0 14px; background:#f6f9fc; border:1px solid var(--borde); border-radius:12px; }
.nomBarra .campo { margin:0; } .nomBarra input[type=date] { width:150px; }
.nomKpis { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.nomKpis .kpi { padding:10px 12px; } .nomKpis .kpi b { font-size:20px; }
.nomNota { margin:10px 0 0; padding:10px 12px; background:#f6f9fc; border-radius:10px; }
.nomNota:empty { display:none; }
.cfgCols { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
.cfgCols .cfg-grupo .form .campo.c4 { grid-column:span 6; }
@media (max-width:900px) { .cfgCols { grid-template-columns:1fr; } }
.nomPer td { vertical-align:middle; } .nomPer input { width:100%; }

/* ---- Diseño de configuración (tarjetas, interruptores, chips de días) ---- */
.cfgTarjetas { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-bottom:12px; }
.cfgTarj { border:1px solid var(--borde); border-radius:12px; padding:14px 16px; background:#fbfdff; }
.cfgTarj h3 { margin:0 0 6px; font-size:15px; color:var(--azul); }
.cfgTarj .canales label { flex-direction:row-reverse; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #eef2f7; }
.cfgTarj .canales label:last-child { border-bottom:none; }
.cfgTarj .canales label small { display:block; color:var(--gris); font-size:12px; }
input.tgl { -webkit-appearance:none; appearance:none; flex:0 0 auto; width:42px; height:24px !important; border-radius:99px; background:#cbd5e1; position:relative; cursor:pointer; transition:background .15s; border:none; margin:0; padding:0; }
input.tgl::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s; }
input.tgl:checked { background:var(--celeste); } input.tgl:checked::after { left:21px; }
input.tgl:disabled { opacity:.55; cursor:not-allowed; }
input.tgl:focus-visible { outline:2px solid var(--celeste); outline-offset:2px; }
.dlg label.chk:has(input.tgl) { flex-direction:row-reverse; justify-content:space-between; gap:12px; }
.diasChips { display:flex; gap:4px; margin-bottom:4px; }
.diasChips span { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:700; background:#e2e8f0; color:#94a3b8; }
.diasChips span.on { background:var(--azul); color:#fff; }
.tag.radio { background:#e6f7ef; color:#087f5b; }

/* ---- Alertas en tarjetas compactas con filtro por tipo ---- */
.alChips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.alChips button { border:1px solid var(--borde); background:#fff; border-radius:99px; padding:5px 12px; font-size:13px; color:#334155; cursor:pointer; }
.alChips button b { margin-left:4px; color:var(--gris); }
.alChips button.sel { background:var(--azul); border-color:var(--azul); color:#fff; } .alChips button.sel b { color:#9fdcf5; }
.alLista { display:flex; flex-direction:column; gap:8px; }
.alItem { display:flex; gap:14px; align-items:center; justify-content:space-between; border:1px solid var(--borde); border-left:4px solid #cbd5e1; border-radius:10px; padding:10px 14px; background:#fff; }
.alItem.sev-alta { border-left-color:var(--mal); } .alItem.sev-media { border-left-color:var(--aviso); }
.alInfo { min-width:0; flex:1; } .alTit { font-size:14px; } .alEmp { font-size:13px; color:#334155; margin-top:2px; }
.alDet summary { cursor:pointer; font-size:12px; color:#0077a8; margin-top:4px; } .alDet .peq { margin-top:4px; max-width:760px; }
.alAcc { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto; }
@media (max-width:760px) { .alItem { flex-direction:column; align-items:stretch; } .alAcc { justify-content:flex-start; } }

/* Campana de avisos con pendientes */
#btnAvisos.conAvisos { background:#00aeef; color:#fff; font-weight:700; }

/* ---------- Ficha del empleado: ventana amplia por secciones ---------- */
.dlg.amplio { max-width:980px; padding:22px 24px; }
.fichaGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.fichaSec { border:1px solid var(--borde); border-radius:12px; padding:14px 16px 6px; background:#fbfdff; }
.fichaSec h4 { margin:0 0 10px; font-size:13px; letter-spacing:.03em; color:#0b2046; }
.fichaCol { display:flex; flex-direction:column; gap:14px; min-width:0; }
.fichaCampos { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 12px; }
.fichaCampos > .campo { min-width:0; } .fichaCampos > .campo.ancho, .fichaSec.org .fichaCampos > .campo:has(#edJefe) { grid-column:1 / -1; }
.fichaCampos .sucGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:820px) {
  .fichaGrid { grid-template-columns:1fr; }
  .dlg.amplio { padding:16px; max-height:94vh; }
}
@media (max-width:520px) { .fichaCampos, .fichaCampos .sucGrid { grid-template-columns:1fr; } .velo { padding:8px; } }
/* Pestañas internas en celular: se pueden deslizar */
@media (max-width:600px) { .nomTabs { width:100%; flex-wrap:nowrap; overflow-x:auto; } .nomTabs button { white-space:nowrap; padding:8px 12px; } }

/* ===== Pulido visual (nov 2026) ===== */
/* Campos que nunca se salen de su tarjeta */
.campo input, .campo select, .campo textarea { max-width:100%; }
/* Tablas anchas: se desplazan dentro de la tarjeta con una sombra que avisa que hay más columnas */
.card, .tabla { overflow-x:auto; }
.tabla, .card > table { background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) right center / 12px 100% no-repeat scroll; }
/* Filas con efecto al pasar el mouse y números alineados */
tbody tr:hover td { background:#f8fbfe; }
td { font-variant-numeric:tabular-nums; }
/* Foco visible y uniforme en todos los controles (accesibilidad) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--celeste); outline-offset:1px; border-color:var(--celeste); }
button:focus-visible { outline:2px solid var(--celeste); outline-offset:2px; }
/* Encabezado compacto en celular: la empresa ya está en el selector */
@media (max-width:700px) {
  header { padding:10px 14px; gap:8px; }
  header h1 { font-size:15px; flex-basis:100%; }
  header h1 > span { display:none; }
  header select { flex:1 1 100%; min-width:0; }
  header button { padding:0 9px; font-size:12px; }
  main { padding:12px 10px; }
  .card { padding:14px 12px; border-radius:10px; }
}

/* Video de fondo del acceso: cubre la pantalla en cualquier tamaño, detrás de una capa oscura para que se lea el formulario */
#loginVideo { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; object-fit:cover; object-position:75% 50%; z-index:-2; display:none; }
body:has(#login:not(.oculto)) #loginVideo { display:block; }
body:has(#login:not(.oculto))::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(15,23,42,.50), rgba(15,23,42,.70)); pointer-events:none; }
@media (max-width:700px) { #login { padding:24px 20px; } }

/* ===== Modo celular (nov 2026) ===== */
#btnMenu { display:none; }
@media (max-width:700px) {
  /* Encabezado en una sola franja: empresa + botones chicos */
  header { flex-wrap:wrap; padding:8px 12px; }
  header h1 { font-size:14px; }
  #hdRol { display:none; }
  header select { flex:1 1 0; height:34px; font-size:13px; }
  /* Menú desplegable en lugar de la tira de pestañas */
  #btnMenu { display:flex; align-items:center; gap:8px; width:100%; border:none; border-bottom:1px solid var(--borde); background:#fff;
    padding:12px 16px; font-size:15px; font-weight:700; color:#0b2046; cursor:pointer; text-align:left; }
  #btnMenu .flecha { margin-left:auto; color:var(--gris); }
  #tabs { display:none; }
  #tabs.abierto { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px 12px; max-height:70vh; overflow-y:auto;
    box-shadow:0 10px 20px rgba(15,23,42,.18); }
  #tabs.abierto button { border:1px solid var(--borde); border-radius:10px; padding:12px 10px; font-size:14px; text-align:left; margin:0; white-space:normal; }
  #tabs.abierto button.sel { background:#e6f6fc; border-color:var(--celeste); color:#0077a8; }
  #tabs.abierto button.oculto { display:none; }
  /* Botones de acción a todo lo ancho y fáciles de tocar */
  .card > .b, .card .acciones > .b { min-height:42px; }
  /* Tablas como tarjetas: cada fila es una tarjeta con "columna: valor" */
  .tabla:has(table.tm), .card:has(> table.tm) { overflow-x:visible; }
  .tabla:has(table.tm) , .card > table.tm { background:none; }
  table.tm, table.tm tbody, table.tm tr, table.tm td { display:block; width:auto; }
  table.tm thead { display:none; }
  table.tm tr { border:1px solid var(--borde); border-radius:12px; margin:0 0 10px; padding:8px 12px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05); }
  table.tm td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border:none; text-align:right; font-size:14px; min-height:0; }
  table.tm td + td { border-top:1px dashed #edf1f5; }
  table.tm td::before { content:attr(data-l); flex:0 0 38%; text-align:left; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gris); }
  table.tm td[data-l=""] { justify-content:flex-end; flex-wrap:wrap; }
  table.tm td[data-l=""]::before { display:none; }
  table.tm td:empty { display:none; }
  tbody tr:hover td { background:none; }
  table.tm .acc { justify-content:flex-end; flex-wrap:wrap; }
}
@media (max-width:700px) {
  table.tm tr, table.tm tr:nth-child(even) { background:#fff; } table.tm td, table.tm tr:nth-child(even) td { background:transparent; }
  table.tm td[colspan] { justify-content:center; text-align:center; }
}
@media (max-width:700px) { table.tm .tmv { display:block; min-width:0; } table.tm .tmv .peq, table.tm .tmv small { display:block; } }