:root { --marcato: #123b45; --marcato-oscuro: #0c2a32; --acento: #f2a93b; }
body { background: #f6f8f8; }
.bg-marcato { background: var(--marcato); }
.btn-marcato { background: var(--marcato); color: #fff; }
.btn-marcato:hover, .btn-marcato:focus { background: var(--marcato-oscuro); color: #fff; }
a { color: var(--marcato); }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--acento) !important; }
.qr-box svg { width: 220px; height: 220px; }
.codigo-grande { font: 600 1.8rem/1.2 ui-monospace, monospace; letter-spacing: .2em; margin: .5rem 0; }
.table > :not(caption) > * > * { padding-left: .75rem; padding-right: .75rem; }

/* ---------- Tablero por áreas (paleta validada para daltonismo: azul / naranja / violeta) ---------- */
.tablero {
  --e-dentro: #2a78d6; --e-almuerzo: #eb6834; --e-pausa: #6250d6; --e-salio: #c3c2b7;
  --e-por_llegar: #e1e0d9; --e-sin_marcar: #d03b3b; --e-programados: #898781;
  --tinta-2: #52514e; --tinta-3: #898781; --grilla: #e1e0d9; --eje: #c3c2b7;
}
.tarjeta-area { cursor: pointer; transition: box-shadow .15s; border: 1px solid rgba(11,11,11,.08); }
.tarjeta-area:hover { box-shadow: 0 .25rem .75rem rgba(18,59,69,.12) !important; }
.tarjeta-area:focus-visible, .tarjeta-area[aria-expanded="true"] { outline: 2px solid var(--marcato); outline-offset: 2px; }
.tablero .cifra { font-size: 2rem; font-weight: 600; line-height: 1; }
.barra-estados { display: flex; gap: 2px; height: 10px; }
.barra-estados .seg { border-radius: 4px; min-width: 6px; }
.tablero .leyenda { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--tinta-2); }
.tablero .leyenda li { display: inline-flex; align-items: center; gap: .35rem; }
.tablero .punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.raya { width: 14px; height: 2px; display: inline-block; vertical-align: middle; margin-right: .35rem; }
.estado-bg-dentro, .raya.serie-dentro { background: var(--e-dentro); }
.estado-bg-almuerzo, .raya.serie-almuerzo { background: var(--e-almuerzo); }
.estado-bg-pausa, .raya.serie-pausa { background: var(--e-pausa); }
.estado-bg-marcaron { background: var(--tinta-2); }
.estado-bg-salio { background: var(--e-salio); }
.estado-bg-por_llegar { background: var(--e-por_llegar); }
.estado-bg-sin_marcar { background: var(--e-sin_marcar); }
.raya.serie-programados { background: var(--e-programados); }
.estado-dentro { color: var(--e-dentro); } .estado-almuerzo { color: var(--e-almuerzo); }
.estado-pausa { color: var(--e-pausa); } .estado-salio, .estado-libre, .estado-por_llegar { color: var(--tinta-3); }
.estado-sin_marcar, .estado-alerta { color: var(--e-sin_marcar); }
.viz-linea svg { display: block; overflow: visible; }
.viz-linea .serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-linea .serie-dentro { stroke: var(--e-dentro); fill: none; }
.viz-linea .serie-almuerzo { stroke: var(--e-almuerzo); fill: none; }
.viz-linea .serie-pausa { stroke: var(--e-pausa); fill: none; }
.viz-linea circle.serie-pausa { fill: var(--e-pausa); }
.viz-linea .serie-programados { stroke: var(--e-programados); stroke-width: 1.5; fill: none; }
.viz-linea circle.marca { stroke: #fff; stroke-width: 2; }
.viz-linea circle.serie-dentro { fill: var(--e-dentro); } .viz-linea circle.serie-almuerzo { fill: var(--e-almuerzo); }
.viz-linea circle.serie-programados { fill: var(--e-programados); }
.viz-linea .grilla { stroke: var(--grilla); stroke-width: 1; }
.viz-linea .eje { stroke: var(--eje); stroke-width: 1; }
.viz-linea .guia { stroke: var(--eje); stroke-width: 1; }
.viz-linea .tick { font-size: 10px; fill: var(--tinta-3); font-variant-numeric: tabular-nums; }
.viz-tooltip { position: fixed; z-index: 1080; pointer-events: none; background: #fff; color: #0b0b0b; font-size: .8rem;
  border: 1px solid rgba(11,11,11,.12); border-radius: .4rem; padding: .4rem .6rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
.tablero .kpi { background: #f6f8f8; border-radius: .5rem; padding: .5rem .65rem; height: 100%; }
.tablero .kpi-titulo { font-size: .75rem; color: var(--tinta-2); }
.tablero .kpi-valor { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.tablero .kpi-nota { font-size: .72rem; color: var(--tinta-3); }
.nav-pills.tablero-nav .nav-link { color: var(--marcato); }
.nav-pills.tablero-nav .nav-link.active { background: var(--marcato); color: #fff; }
/* Logo de la empresa en la barra: pastilla blanca para que se vea cualquier logo sobre el fondo oscuro */
.logo-empresa { display: inline-flex; align-items: center; vertical-align: middle; background: #fff; border-radius: .4rem; padding: 3px 8px; height: 32px; }
.logo-empresa img { max-height: 26px; max-width: 140px; object-fit: contain; }
/* Barras del tablero en vivo: cada estado contra el total de quienes trabajan hoy */
.barras-area { display: flex; flex-direction: column; gap: .35rem; }
.fila-barra { display: grid; grid-template-columns: 9.5rem 1fr 4.3rem; gap: .6rem; align-items: center; }
.fila-barra .etq { font-size: .8rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.fila-barra .pista { height: 10px; background: #f1f0ec; border-radius: 4px; overflow: hidden; }
.fila-barra .relleno { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.fila-barra .valor { font-size: .8rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-barra .valor b { color: #1f2937; font-weight: 600; }