/* =====================================================================
   Backoffice del Checador — hoja de estilo única.
   Sin CDN: el kiosco puede vivir en una red sin salida a internet.
   Paleta alineada con la del kiosco (pizarra sobria).
   ===================================================================== */
:root{
  --bg:#f4f6f8; --panel:#ffffff; --borde:#dde3e9; --texto:#1f2b38; --suave:#63768a;
  --lateral:#1c2733; --lateral2:#2c3e50; --acento:#3d6f9e; --acento-claro:#8fb3cc;
  --ok:#2e7d52; --warn:#b7791f; --error:#b3453f; --sombra:0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);
     font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Estructura ---------- */
.wrap{display:flex;min-height:100vh}
.lateral{width:232px;flex:0 0 232px;background:linear-gradient(180deg,var(--lateral),var(--lateral2));
         color:#fff;display:flex;flex-direction:column}
.lateral .marca{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.10);
                display:flex;align-items:center;gap:10px}
.lateral .marca img{height:34px;opacity:.92}
.lateral nav{padding:10px 0;flex:1;overflow-y:auto}
.lateral nav a{display:block;padding:9px 18px;color:rgba(255,255,255,.78);font-size:14px;border-left:3px solid transparent}
.lateral nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.lateral nav a.on{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--acento-claro);font-weight:600}
.lateral nav .sep{padding:14px 18px 6px;font-size:11px;letter-spacing:1px;text-transform:uppercase;
                  color:rgba(255,255,255,.38)}
.lateral .pie{padding:12px 18px;border-top:1px solid rgba(255,255,255,.10);font-size:12px;color:rgba(255,255,255,.55)}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{background:var(--panel);border-bottom:1px solid var(--borde);padding:12px 22px;
       display:flex;align-items:center;justify-content:space-between;gap:12px}
.barra h1{margin:0;font-size:18px;font-weight:700}
.barra .quien{font-size:13px;color:var(--suave)}
.barra .quien b{color:var(--texto)}
.contenido{padding:22px;flex:1}

/* ---------- Tarjetas ---------- */
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:10px;
       box-shadow:var(--sombra);margin-bottom:18px}
.panel > h2{margin:0;padding:14px 18px;border-bottom:1px solid var(--borde);font-size:15px;font-weight:700}
.panel .cuerpo{padding:18px}
.panel .cuerpo.sinp{padding:0}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:16px;box-shadow:var(--sombra)}
.tarjeta .n{font-size:30px;font-weight:800;line-height:1.1}
.tarjeta .t{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.6px;margin-top:4px}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto}
table.datos{width:100%;border-collapse:collapse;font-size:13.5px}
table.datos th,table.datos td{padding:9px 12px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:middle}
table.datos th{background:#eef2f6;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
               color:var(--suave);white-space:nowrap;position:sticky;top:0}
table.datos tbody tr:hover{background:#f7fafc}
table.datos td.num,table.datos th.num{text-align:right;font-variant-numeric:tabular-nums}
table.datos td.cen,table.datos th.cen{text-align:center}

/* ---------- Formularios ---------- */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;min-width:0}
.campo label{font-size:12px;font-weight:600;color:var(--suave);margin-bottom:5px}
.campo .ayuda{font-size:11.5px;color:var(--suave);margin-top:4px}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],
input[type=email],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--borde);border-radius:7px;background:#fff;
  font:inherit;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento-claro);outline-offset:-1px;border-color:var(--acento)}
input[readonly]{background:#f1f4f7;color:var(--suave)}
textarea{min-height:90px;resize:vertical}
.acciones{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px}

.btn{display:inline-block;padding:8px 15px;border-radius:7px;border:1px solid var(--borde);
     background:#fff;color:var(--texto);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:#f1f4f7;text-decoration:none}
.btn.pri{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.pri:hover{filter:brightness(1.08);background:var(--acento)}
.btn.peligro{background:#fff;border-color:#e3b7b4;color:var(--error)}
.btn.peligro:hover{background:#fdf3f2}
.btn.chico{padding:5px 10px;font-size:12.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Avisos ---------- */
.msg{padding:11px 15px;border-radius:8px;margin-bottom:16px;border:1px solid;font-size:13.5px}
.msg.ok{background:#eaf6ef;border-color:#bfe0cc;color:#1d5c3a}
.msg.error{background:#fdf1f0;border-color:#f0c7c4;color:#8e332e}
.msg.warn{background:#fdf6e7;border-color:#f0dfb4;color:#7a5710}
.msg.info{background:#eef4fa;border-color:#c9dcee;color:#28516f}

.etiqueta{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;
          text-transform:uppercase;letter-spacing:.4px}
.etiqueta.alta{background:#eaf6ef;color:#1d5c3a}
.etiqueta.baja{background:#f1f3f5;color:#6b7785}
.etiqueta.rojo{background:#fdf1f0;color:#8e332e}
.etiqueta.ambar{background:#fdf6e7;color:#7a5710}
.etiqueta.azul{background:#eef4fa;color:#28516f}

/* ---------- Filtros ---------- */
.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filtros .campo{min-width:150px}

/* ---------- Rejilla de horarios ---------- */
table.rejilla{width:100%;border-collapse:collapse;font-size:13px}
table.rejilla th,table.rejilla td{border:1px solid var(--borde);padding:6px;text-align:center}
table.rejilla th{background:#eef2f6;font-size:11.5px;text-transform:uppercase;color:var(--suave)}
table.rejilla th.hoy{background:var(--acento);color:#fff}
table.rejilla td.emp{text-align:left;white-space:nowrap;background:#f7fafc;font-weight:600;position:sticky;left:0}
table.rejilla input{width:78px;padding:5px;text-align:center;font-variant-numeric:tabular-nums}
table.rejilla input.descanso{background:#f1f3f5;color:var(--suave)}
/* Los tres renglones de cada empleado: entrada, salida a comer y regreso */
table.rejilla td.tipo{text-align:left;font-size:11.5px;font-weight:600;color:var(--suave);
                      text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;background:#fbfcfd}
table.rejilla td.tipo-e{border-left:3px solid var(--acento)}
table.rejilla td.tipo-c{border-left:3px solid #b7791f}
table.rejilla td.tipo-r{border-left:3px solid #2e7d52}
table.rejilla tr.fin-emp td{border-bottom:2px solid #c8d2dc}
table.rejilla td.tipo-c + td input,
table.rejilla td.tipo-r + td input{background:#fcfdfe}

/* ---------- Login ---------- */
.login-fondo{min-height:100vh;display:flex;align-items:center;justify-content:center;
             background:linear-gradient(135deg,#1c2733 0%,#2c3e50 55%,#3d5266 100%);padding:20px}
.login-caja{background:var(--panel);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);
            padding:34px;width:100%;max-width:390px}
.login-caja .marca{text-align:center;margin-bottom:22px}
.login-caja .marca img{height:56px}
.login-caja h1{font-size:17px;text-align:center;margin:0 0 20px}

.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--borde);vertical-align:middle}
.foto-grande{width:120px;height:120px;border-radius:12px;object-fit:cover;border:1px solid var(--borde)}

.vacio{padding:34px;text-align:center;color:var(--suave)}
.nota{font-size:12.5px;color:var(--suave)}

@media (max-width:860px){
  .wrap{flex-direction:column}
  .lateral{width:100%;flex:none}
  .lateral nav{display:flex;flex-wrap:wrap;padding:6px}
  .lateral nav a{border-left:none;border-bottom:3px solid transparent;padding:8px 12px}
  .lateral nav a.on{border-left:none;border-bottom-color:var(--acento-claro)}
  .lateral nav .sep{display:none}
  .contenido{padding:14px}
}
@media print{
  .lateral,.barra,.acciones,.filtros,.no-print{display:none !important}
  body{background:#fff}
  .panel{border:none;box-shadow:none}
  .contenido{padding:0}
}