/* Piezas del repaso (2026-11-08): menú por apartados, equipo (fichajes y accesos), carga de material, ubicaciones,
   acceso al portal y a la app de técnicos. Lo cargan las tres pantallas.
   Código de color, el mismo en toda la app: ámbar = nos toca, violeta = esperamos a otro (cliente o proveedor),
   azul = planificado, tinta = en marcha, verde = hecho, rojo = problema, gris = cerrado. Furgonetas y ubicaciones, en neutro. */

.violeta-t { color: var(--violeta); }

/* Menú lateral: más compacto para que quepa entero en pantallas bajas; si no cabe, se desplaza */
.lateral { gap: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.marca-logo { height: 52px; }
#menu a { padding: 7px 10px; }
.oficina-enlaces a { padding: 7px 10px; }
/* Navegación de semana o mes: en una píldora blanca, se lea encima del fondo que sea */
.semana-nav { align-self: flex-start; padding: 4px 6px; background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; box-shadow: var(--sombra); }
.semana-nav .btn.pequeno { border: 0; width: 30px; padding: 0; justify-content: center; }
.semana-nav b { padding: 0 6px; }
.menu-grupo { margin: 14px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
#menu .menu-grupo:first-child { margin-top: 0; }
#hoja-mas .menu-grupo { color: var(--tenue); margin: 10px 12px 2px; }
#hoja-mas .menu-grupo:first-child { margin-top: 2px; }
.oficina-enlaces .menu-grupo { margin: 0 10px 4px; }
.oficina-enlaces a .ic { width: 16px; height: 16px; opacity: .8; }

.ubi.furgo { background: #e8edf0; color: var(--tinta); }
.hueco.furgo { background: #f3f6f8; border-color: var(--linea); }
.burbuja.cliente { background: var(--papel); border: 1px solid var(--linea); }

.persona { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); }
.persona > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.persona b { font-weight: 600; }
a:hover .persona { text-decoration: none; }
.cifra.aviso { border-color: #f3dfb8; }
.cifra.aviso b { color: var(--ambar); }
.cifra.aviso::after { background: var(--ambar); opacity: .8; }
.cuenta { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--linea-2); color: var(--suave); }
.en-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-f); }
.dato-linea { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; }
.dato-linea .ic { width: 16px; height: 16px; color: var(--verde); }
.cita { margin: 0; padding: 10px 14px; border-left: 3px solid var(--marca); background: var(--linea-2); border-radius: 0 10px 10px 0; color: var(--tinta); }
.acciones-fila { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pin { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-weight: 600; }
.acceso-datos { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; font-size: 15px; }
.acceso-datos dt { color: var(--suave); }
.acceso-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Equipo hoy (inicio): el punto de la jornada sobre el avatar */
.avatar { position: relative; }
.punto-j { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--papel); background: var(--tenue); }
.punto-j.trabajando { background: var(--verde); }
.punto-j.pausa { background: #e0a100; }
.punto-j.terminada { background: var(--gris); }

/* Fichajes */
.semana-f th:first-child { min-width: 170px; }
.semana-f td, .semana-f th { vertical-align: middle; }
.semana-f .hoy { background: var(--marca-claro); }
.celda-f { display: flex; flex-direction: column; color: var(--tinta); line-height: 1.25; }
.celda-f:hover { text-decoration: none; color: var(--marca); }
.celda-f b, .celda-f small { font-variant-numeric: tabular-nums; }
.tabla tr.marcada td { background: var(--marca-claro); }
.tabla tfoot td { padding: 10px 14px; border-top: 1px solid var(--linea); color: var(--suave); }
.panel:not(.sin-relleno) .tabla tfoot td:first-child { padding-left: 0; }
.panel:not(.sin-relleno) .tabla tfoot td:last-child { padding-right: 0; }

/* Orden: pestañas y material */
.columna > .pestanas { align-self: flex-start; }
.sub-panel { margin: 18px 0 8px; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pie-tabla { margin: 10px 0 0; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pie-tabla > span { color: var(--suave); margin-right: auto; }
.pie-tabla small + b { margin-left: 10px; }
.cargas { list-style: none; margin: 0; padding: 0; }
.cargas li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea-2); align-items: center; }
.cargas li:first-child { border-top: 0; }
.cargas .h { font-size: 12.5px; color: var(--suave); display: flex; flex-direction: column; line-height: 1.2; }
.cargas small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.carga-cab { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.carga-previsto { align-self: flex-start; }
.carga-lineas { display: flex; flex-direction: column; gap: 6px; }
.carga-linea { display: grid; grid-template-columns: minmax(0, 1fr) 118px minmax(150px, 190px) 34px; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #fafbfc; }
.carga-art { min-width: 0; }
.carga-art small { display: block; }
.carga-cant { display: flex; align-items: center; gap: 6px; }
.carga-cant input.mini.num { width: 76px; min-width: 0; text-align: right; }
.carga-falta { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; color: var(--rojo); padding: 2px 4px; }
.carga-falta .ic { width: 15px; height: 15px; }
.hoja-carga-cab { margin: 0; color: var(--suave); }
.hoja-carga label { gap: 12px; }
.hoja-carga .ubi { min-width: 64px; text-align: center; }
.hoja-carga .ubi.falta { background: var(--rojo-f); color: var(--rojo); }
.hoja-carga label > span:nth-of-type(2) { flex: 1; min-width: 0; }

/* Formulario de artículo */
.form-grupo { margin: 4px 0 -2px; font-size: 12px; color: var(--marca-2); text-transform: uppercase; letter-spacing: .06em; }
.form-grupo:not(:first-child) { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--linea-2); }
.margen { font-style: normal; font-weight: 600; color: var(--verde); margin-left: 6px; }
.campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Ubicaciones */
button.hueco { font: inherit; text-align: left; cursor: pointer; }
.hueco small { display: flex; justify-content: space-between; gap: 6px; }
.hueco.libre { background: var(--papel); border-style: dashed; color: var(--tenue); }
.hueco.libre b { color: var(--suave); }

/* Acceso y jornada (portal y app de técnicos) */
.banda-acc { display: inline-flex; align-items: center; gap: 8px; }
.icono-btn { border: 0; cursor: pointer; }
button.icono-btn .ic { width: 18px; height: 18px; }
.acceso .cuerpo { margin-top: -30px; }
.quien-soy button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--linea-2); background: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.quien-soy button:first-child { border-top: 0; }
.quien-soy button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.quien-soy b { font: 600 15px Poppins, sans-serif; }
.quien-soy .ic { color: var(--tenue); }
.pin-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 14px; }
.pin-puntos { display: flex; gap: 14px; }
.pin-puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--marca); }
.pin-puntos i.lleno { background: var(--marca); }
.pin-puntos.error i { border-color: var(--rojo); background: var(--rojo); }
.teclado { display: grid; grid-template-columns: repeat(3, 68px); gap: 14px 18px; }
.teclado button { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font: 500 24px Poppins, sans-serif; color: var(--tinta); cursor: pointer; }
.teclado button:active { background: var(--marca-claro); }
.jornada { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jornada > div:first-child { display: flex; flex-direction: column; }
.jornada b { font: 600 22px Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.jornada .fila-botones { margin-top: 0; }
.jornada.dentro { border-color: #bfe3cf; box-shadow: inset 4px 0 0 var(--verde), var(--sombra); }
.jornada.en-pausa { border-color: #f3dfb8; box-shadow: inset 4px 0 0 var(--ambar), var(--sombra); }
.jornada.hecha b { color: var(--suave); }
.menu-abajo.cinco { grid-template-columns: repeat(5, 1fr); }
.idiomas-fila { margin: 4px 0 0; }

@media (max-width: 820px) {
  .carga-cab, .campos.tres { grid-template-columns: minmax(0, 1fr); }
  .carga-linea { grid-template-columns: minmax(0, 1fr) auto; }
  .carga-art { grid-column: 1 / -1; }
  .carga-linea select { grid-column: 1; }
  .carga-linea .btn-icono { grid-column: 2; grid-row: 2 / 4; }
  .cargas li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .acciones-fila { justify-content: flex-start; }
}

/* La M decorativa del fondo no puede ensanchar la página en el móvil */
.principal { overflow-x: clip; }

/* Material de la orden en el móvil: cada artículo en su fila, con las cifras debajo */
@media (max-width: 820px) {
  .tabla.material thead { display: none; }
  .tabla.material tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linea-2); align-items: end; }
  .tabla.material tr:last-child { border-bottom: 0; }
  .tabla.material td { padding: 0 !important; border: 0; text-align: left; }
  .tabla.material td:first-child { grid-column: 1 / -1; }
  .tabla.material td:last-child { grid-column: 1 / -1; }
  .tabla.material td[data-et]::before { content: attr(data-et); display: block; font-size: 11px; color: var(--tenue); }
}
.hoja-carga label > span.ubi { flex: none; }