/* ════════════════════════════════════════════════════════════════════
   La jornada del administrativo · E5 · 5-nov-2026
   De la maqueta aprobada (`docs/aud/mockups/jornada-administrativo/jor.css`,
   Dirección 4-nov 18:25), con los tokens del 08. Sin colores ni medidas
   propias: todo sale de `orvik-tokens.css`.
   ════════════════════════════════════════════════════════════════════ */

/* «Día de trabajo» sólo existe con `cierre_jornada_admin_activo` encendido
   y si `dia_de_trabajo_personas()` trae a alguien (auditor, 5-nov 12:45). */
body:not(.jor-dia-on) [data-tab="jornada_dia"],
body:not(.jor-dia-on) [data-tab-mas="jornada_dia"] { display: none !important }

/* a) El indicador, dentro de la barra de vidrio que ya existe. */
#app .jchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 32px; padding: 0 12px; margin-right: 8px;
  border-radius: var(--r-chico);
  background: var(--exito-suave); color: var(--exito-texto);
  font: 600 13px/18px var(--fuente); white-space: nowrap;
}
#app .jchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block }
/* En el celular va pegado al logotipo; la campana sigue a la derecha. */
#app header.topbar .jchip { margin-right: 0 }

/* b) y c) Las tarjetas flotantes (cuenta regresiva y Registro). */
.jcard {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-barra);
  width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde); border-radius: var(--r-tarjeta);
  box-shadow: var(--vidrio-sombra);
  padding: var(--e-4) var(--e-5);
  display: flex; flex-direction: column; gap: 10px;
  color: var(--texto); font: var(--t-cuerpo);
}
.jcard .t { font: 600 13px/18px var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3) }
.jcard .reloj { font: 600 30px/36px var(--fuente); font-variant-numeric: tabular-nums }
.jcard .jc-tit { font: var(--t-tarjeta); margin: 0 }
.jcard .s { color: var(--texto-2); font: var(--t-sec) }
.jcard .prim {
  min-height: var(--toque); border-radius: var(--r-control); border: 0; cursor: pointer;
  background: var(--marca-principal); color: var(--marca-sobre-principal); font: 600 15px/20px var(--fuente);
}
.jcard .prim:disabled { opacity: .6; cursor: default }
.jcard .barra { display: block; height: 6px; border-radius: var(--r-pildora); background: var(--control); overflow: hidden }
.jcard .barra b { display: block; height: 100%; width: 0; background: var(--aviso-texto) }
/* Al llegar a 00:00 la cuenta y su barra se quitan (Dirección, 4-nov 20:10). */
.jcard [hidden] { display: none !important }
@media (max-width: 768px) {
  .jcard { left: 16px; right: 16px; bottom: 104px; width: auto; max-width: none }
}

/* d) «Día de trabajo». */
#jm { display: flex; flex-direction: column; gap: 20px }
#jm .card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--e-4) var(--e-5) }
#jm h1 { font: var(--t-pantalla); margin: 0; color: var(--texto) }
#jm h2 { font: var(--t-tarjeta); margin: 0 0 var(--e-2); color: var(--texto) }
#jm .s { color: var(--texto-2); font: var(--t-sec) }
#jm .jm-sub { margin: 4px 0 0 }
#jm .n { color: var(--texto-3); font: var(--t-nota) }
#jm .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
#jm .kpi { display: flex; flex-direction: column; gap: 4px }
#jm .kpi b { display: block; font: var(--t-cifra); color: var(--texto) }
#jm .fila { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: var(--e-3) 0; border-top: 1px solid var(--linea); color: var(--texto); font: var(--t-cuerpo) }
#jm h2 + .fila { border-top: 0 }
#jm .h { font: 600 15px/20px var(--fuente); color: var(--texto) }
#jm .ins { font: 600 13px/18px var(--fuente); padding: 4px 8px; border-radius: var(--r-chico); display: inline-block; white-space: nowrap }
#jm .ok { background: var(--exito-suave); color: var(--exito-texto) }
#jm .av { background: var(--aviso-suave); color: var(--aviso-texto) }
#jm .neu { background: var(--control); color: var(--texto-2) }
#jm .pel { background: var(--peligro-suave); color: var(--peligro-texto) }
#jm .gap { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--control) 6px 12px); border-radius: var(--r-chico); padding: 8px 12px }
#jm .bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
#jm .jm-hueco { flex: 1 }
#jm .jbtn {
  min-height: var(--toque); box-sizing: border-box; border-radius: var(--r-control);
  font: 600 15px/20px var(--fuente); display: inline-grid; place-items: center; padding: 0 var(--e-5);
  border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); cursor: pointer;
}
#jm span.jbtn { cursor: default }
#jm .jbtn:disabled { color: var(--texto-3); cursor: default }
@media (max-width: 768px) {
  #jm .kpis { grid-template-columns: 1fr 1fr }
  #jm .fila { grid-template-columns: 52px 1fr }
  #jm .fila > .ins { grid-column: 2; justify-self: start }
  #jm .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  #jm .bar .jm-fecha { grid-column: 1 / -1; grid-row: 1 }
  #jm .bar .jm-hueco { display: none }
  #jm .bar [data-jm-otra], #jm .bar [data-jm-descargar] { grid-column: 1 / -1 }
}