/*
 * Modo planta (ADR-041): tablet de planta y Sunmi V2 Pro (Android 7.1, Chrome 119, 360 × 720). Sin Tabler: paleta Magenta
 * propia, para que no se confunda con la oficina (violeta) ni con la plataforma (naranja), y la letra Barlow
 * (docs/diseno_interfaz.md); un dato por vez, campos y botones de 56 a 72 px y teclado numérico propio. Primero el
 * teléfono; desde 900 px de ancho, la tablet en tres columnas.
 */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/barlow-condensed-700.woff2") format("woff2"); }

:root {
  --marca: #a21caf; --marca-hover: #86198f; --marca-tinta: #86198f; --marca-suave: #f4e5f5; --acento: #e0aee4;
  --barra: #86198f; --fondo: #faf6fa; --superficie: #ffffff; --superficie-2: #f8f1f8;
  --tinta: #271428; --tenue: #6b566c; --linea: #ecdeec; --linea-fuerte: #dac2dc;
  --bien: #05603a; --bien-fondo: #d1fadf; --aviso: #93370d; --aviso-fondo: #fef0c7; --error: #b42318; --error-fondo: #fee4e2;
  --horno: #0e7490; --horno-fondo: #cff9fe; --neutro: #344054; --neutro-fondo: #eaecf0;
  --titulos: "Barlow Condensed", "Barlow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.planta { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--tinta); font: 16px/1.35 "Barlow", system-ui, sans-serif; }
a { color: var(--marca-tinta); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.p-icono { width: 24px; height: 24px; flex: none; }
.p-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.con-js) .requiere-js { display: none; }

/* Barra del lote */
.p-barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px; background: var(--barra); color: #fff; }
.p-barra :focus-visible { outline-color: #fff; }
.p-barra-boton { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 8px; color: #fff; text-decoration: none; }
.p-barra-boton:hover { background: rgba(255, 255, 255, .14); }
.p-barra-boton-claro { background: rgba(255, 255, 255, .14); }
.p-barra-logo { flex: none; margin: 0 6px 0 8px; }
.p-barra-texto { flex: 1; min-width: 0; line-height: 1.15; }
.p-barra-titulo { font: 700 21px/1.1 var(--titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-barra-subtitulo { font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-barra-usuario { display: none; align-items: center; gap: 8px; padding: 0 12px; font-weight: 600; }

.p-pagina { max-width: 1400px; margin: 0 auto; padding: 10px 12px 24px; }

/* Avisos */
.p-aviso { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.p-aviso ul { margin: 0; padding-left: 18px; }
.p-aviso-bien { background: var(--bien-fondo); color: var(--bien); }
.p-aviso-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.p-aviso-error { background: var(--error-fondo); color: var(--error); }
.p-aviso-info { background: var(--marca-suave); color: var(--marca-tinta); }

/* Etapas del lote: en el teléfono, una barra fina por etapa; en la tablet, tarjetas */
.p-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.p-paso { display: block; padding-top: 4px; border-top: 6px solid var(--linea-fuerte); color: var(--tenue); font-size: 12px; text-decoration: none; }
.p-paso.is-en_curso { border-top-color: var(--acento); }
.p-paso.is-completa { border-top-color: var(--bien); color: var(--bien); }
.p-paso.is-actual { border-top-color: var(--marca); color: var(--marca-tinta); font-weight: 700; }
.p-paso-marca, .p-paso-detalle { display: none; }
.p-paso-nombre { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tarjetas, títulos y textos */
.p-tarjeta { padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.p-titulo { margin: 18px 0 10px; font: 700 26px/1.15 var(--titulos); }
.p-subtitulo { margin: 0 0 8px; font: 700 20px/1.2 var(--titulos); }
.p-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-tinta); }
.p-tenue { color: var(--tenue); }
.p-chico { font-size: 14px; }
.p-vacio { margin: 4px 0 10px; color: var(--tenue); }
.p-pie { margin: 18px 0 0; text-align: center; font-size: 15px; }

/* Filas grandes */
.p-filas { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); text-decoration: none; }
a.p-fila:hover { border-color: var(--linea-fuerte); background: #fcf8fc; }
.p-fila.is-actual { border: 2px solid var(--marca); background: var(--marca-suave); }
.p-fila.is-falta .p-fila-valor { color: var(--aviso); }
.p-fila-texto { min-width: 0; }
.p-fila-titulo { display: block; font: 700 20px/1.15 var(--titulos); overflow-wrap: anywhere; }
.p-fila-detalle { display: block; font-size: 14px; color: var(--tenue); }
.p-fila-lado { flex: none; max-width: 60%; text-align: right; }
.p-fila-valor { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-filas-compactas .p-fila { min-height: 56px; }
.p-fila-con-baja { display: flex; gap: 8px; align-items: stretch; }
.p-fila-con-baja > .p-fila { flex: 1; min-width: 0; }

/* Chips */
.p-chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.p-chip-grande { padding: 4px 10px; font-size: 16px; }
.p-chip-bien { background: var(--bien-fondo); color: var(--bien); }
.p-chip-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.p-chip-error { background: var(--error-fondo); color: var(--error); }
.p-chip-horno { background: var(--horno-fondo); color: var(--horno); }
.p-chip-neutro { background: var(--neutro-fondo); color: var(--neutro); }
.p-chip-azul { background: #e0eaff; color: #1f3d99; }
.p-chip-naranja { background: #ffead5; color: #9c2a10; }

/* Botones */
.p-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 18px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--superficie); color: var(--tinta); font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.p-boton:hover { border-color: var(--marca); }
.p-boton-principal { border-color: var(--marca); background: var(--marca); color: #fff; }
.p-boton-principal:hover { background: var(--marca-hover); }
.p-boton-grande { min-height: 64px; font: 700 22px var(--titulos); }
.p-boton-ancho { display: flex; width: 100%; }
.p-boton-punteado { margin-top: 10px; border: 2px dashed var(--linea-fuerte); color: var(--marca-tinta); }
.p-boton-icono { flex: none; width: 56px; padding: 0; color: var(--error); }
.p-boton-etiqueta { color: var(--marca-tinta); }
.p-boton[disabled] { opacity: .6; cursor: progress; }
.p-boton-texto { padding: 14px 4px; border: 0; background: none; font-weight: 600; text-decoration: underline; cursor: pointer; }
.p-peligro { color: var(--error); }

/* Campos */
.p-etiqueta { display: block; margin: 12px 0 6px; font-weight: 600; }
.p-campo { width: 100%; min-height: 56px; padding: 0 14px; border: 2px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); font-size: 18px; }
.p-campo:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--marca-suave); }
.p-campo-codigo { text-transform: uppercase; letter-spacing: .02em; }
.p-check { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 8px; font-weight: 600; }
.p-check input { flex: none; width: 26px; height: 26px; accent-color: var(--marca); }

/* Opciones (radios con forma de botón) */
.p-opciones { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 4px; padding: 0; border: 0; }
.p-opciones legend { padding: 0; }
.p-opcion { position: relative; }
.p-opcion input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.p-opcion span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 52px; padding: 0 16px; border: 2px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); font-weight: 600; cursor: pointer; }
.p-opcion input:checked + span { border-color: var(--marca); background: var(--marca); color: #fff; }
.p-hornos { flex-wrap: nowrap; }
.p-hornos .p-opcion { flex: 1 1 0; max-width: 88px; }
.p-hornos .p-opcion span { width: 100%; min-width: 0; padding: 0 4px; font: 700 24px var(--titulos); }
.p-opcion input:focus-visible + span { outline: 3px solid var(--marca); outline-offset: 2px; }

/* Inicio: buscar y lotes */
.p-buscar .p-etiqueta { margin-top: 0; }
.p-buscar-fila { display: flex; gap: 8px; }
.p-buscar-fila .p-campo { flex: 1; min-width: 0; }
.p-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.p-lote { display: flex; flex-direction: column; gap: 4px; min-height: 100px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); color: var(--tinta); text-decoration: none; }
a.p-lote:hover { border-color: var(--marca); }
.p-lote-numero { font: 700 26px/1.1 var(--titulos); }
.p-lote-receta { font-size: 15px; color: var(--tenue); }
.p-lote-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.p-salir { margin-top: 28px; text-align: center; }

/* Etapa */
.p-etapa-cuerpo { display: grid; gap: 10px; }
.p-resumen-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 17px; }

/* Un dato por pantalla: en el teléfono todo en una columna, con Guardar siempre a mano */
.p-dato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
          grid-template-areas: "cabeza" "teclado" "extras" "acciones" "lista"; }
.p-dato-cabeza { grid-area: cabeza; }
.p-dato-teclado { grid-area: teclado; }
.p-dato-extras { grid-area: extras; }
.p-dato-lista { grid-area: lista; }
.p-dato-acciones { grid-area: acciones; position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 8px 0; background: var(--fondo); }
.p-dato-acciones .p-boton { flex: 1 1 0; }
.p-dato-acciones .p-boton-principal { flex: 1.6 1 0; }
.p-dato-extras .p-etiqueta:first-child, .p-dato-extras .p-opciones:first-child .p-etiqueta { margin-top: 0; }
.p-dato-cabeza > .p-eyebrow { display: none; }                     /* en el teléfono ya lo dice la barra */
.p-pregunta { display: block; margin: 6px 0 2px; font: 700 24px/1.15 var(--titulos); }
.p-detalle { margin: 0 0 8px; color: var(--tenue); }
.p-display { display: flex; align-items: center; gap: 8px; height: 76px; margin-top: 6px; padding: 0 16px; border: 2px solid var(--marca); border-radius: 12px; background: var(--superficie); }
.p-display:focus-within { box-shadow: 0 0 0 4px var(--marca-suave); }
.p-display-campo { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--tinta); text-align: right; font: 700 52px/1 var(--titulos); font-variant-numeric: tabular-nums; }
.p-display-campo:focus { outline: none; }
.p-display-campo::placeholder { color: var(--tenue); opacity: .55; }
.p-display-unidad { font: 600 24px var(--titulos); color: var(--tenue); }
.p-rinde-vivo { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--neutro-fondo); color: var(--neutro); font-size: 15px; font-weight: 600; }
.p-rinde-vivo.is-normal { background: var(--bien-fondo); color: var(--bien); }
.p-rinde-vivo.is-bajo { background: var(--error-fondo); color: var(--error); }
.p-rinde-vivo.is-alto { background: var(--aviso-fondo); color: var(--aviso); }
.p-baja { margin-top: 8px; text-align: center; }

/* Teclado numérico */
.p-dato-teclado { padding: 0; border: 0; background: none; }
.p-teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-tecla { display: flex; align-items: center; justify-content: center; height: 62px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: 700 30px var(--titulos); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.p-tecla:active { background: var(--marca-suave); border-color: var(--marca); }
.p-tecla .p-icono { width: 30px; height: 30px; }
.p-teclado-limpiar { display: none; }

/* Tablet: tres columnas (lista · pregunta · teclado), barra y pasos grandes */
@media (min-width: 900px) {
  .p-barra { min-height: 72px; gap: 12px; padding: 0 16px; }
  .p-barra-boton { width: 56px; height: 56px; }
  .p-barra-titulo { font-size: 26px; }
  .p-barra-usuario { display: inline-flex; }
  .p-pagina { padding: 16px 20px 28px; }
  .p-tarjeta { padding: 16px; border-radius: 14px; }

  .p-pasos { gap: 12px; margin-bottom: 16px; }
  .p-paso { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 16px; border: 2px solid var(--linea); border-radius: 12px; background: var(--superficie); color: var(--tinta); font-size: 14px; font-weight: 400; }
  .p-paso.is-en_curso, .p-paso.is-completa { border-color: var(--linea); }
  .p-paso.is-actual { border-color: var(--marca); background: var(--marca-suave); }
  .p-paso-marca { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--neutro-fondo); color: var(--neutro); font: 700 22px var(--titulos); }
  .p-paso.is-completa .p-paso-marca { background: var(--bien-fondo); color: var(--bien); }
  .p-paso.is-actual .p-paso-marca { background: var(--marca); color: #fff; }
  .p-paso-texto { min-width: 0; }
  .p-paso-nombre { font: 700 22px/1.1 var(--titulos); color: var(--tinta); }
  .p-paso-detalle { display: block; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-paso.is-completa .p-paso-detalle { color: var(--bien); }
  .p-paso.is-actual .p-paso-detalle { color: var(--marca-tinta); font-weight: 600; }

  .p-etapa-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .p-resumen { grid-column: 1 / -1; }

  .p-dato { grid-template-columns: 320px minmax(0, 1fr) 380px; grid-template-rows: auto auto 1fr; gap: 16px;
            grid-template-areas: "lista cabeza teclado" "lista extras teclado" "lista acciones teclado"; }
  .p-dato-sin-lista { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "cabeza teclado" "extras teclado" "acciones teclado"; }
  .p-dato-acciones { position: static; align-self: end; padding: 0; background: none; }
  .p-dato-cabeza > .p-eyebrow { display: block; }
  .p-pregunta { font-size: 34px; }
  .p-detalle { font-size: 17px; }
  .p-display { height: 128px; padding: 0 28px; background: var(--fondo); }
  .p-display-campo { font-size: 84px; }
  .p-display-unidad { font-size: 34px; }
  .p-rinde-vivo { padding: 12px 16px; font-size: 17px; }
  .p-boton-grande { min-height: 72px; font-size: 26px; }
  .p-opcion span { min-width: 64px; min-height: 56px; }
  .p-hornos .p-opcion span { font-size: 26px; }

  .p-dato-teclado { padding: 16px; border: 1px solid var(--linea); background: var(--superficie); }
  .p-teclas { gap: 12px; }
  .p-tecla { height: 100px; background: var(--superficie-2); font-size: 40px; border-radius: 12px; }
  .p-tecla .p-icono { width: 36px; height: 36px; }
  .p-teclado-limpiar { display: flex; margin-top: 12px; min-height: 64px; }
}

/* Horas (ADR-041): inicio y fin, minutos u horas. Se ve solo el modo elegido; sin :has() se ven los tres y el servidor
   igual usa el elegido. Con inicio y fin no hace falta el teclado; las personas solo cuentan con inicio y fin o minutos. */
.p-modos { margin-top: 10px; }
.p-modo { margin-top: 10px; }
.p-dato:has([data-modo-horas][value="inicio_fin"]:checked) .p-modo:not([data-modo="inicio_fin"]),
.p-dato:has([data-modo-horas][value="minutos"]:checked) .p-modo:not([data-modo="minutos"]),
.p-dato:has([data-modo-horas][value="horas"]:checked) .p-modo:not([data-modo="horas"]),
.p-dato:has([data-modo-horas][value="inicio_fin"]:checked) .p-dato-teclado,
.p-dato:has([data-modo-horas][value="horas"]:checked) .p-personas { display: none; }
.p-reloj { display: flex; gap: 8px; margin: 4px 0 10px; }
.p-reloj-campo { flex: 1; min-width: 0; min-height: 56px; font: 700 30px/1 var(--titulos); }
.p-personas { margin-top: 10px; }
.p-personas .p-campo { max-width: 8rem; font: 700 24px/1 var(--titulos); }

/* Quién trabajó (ADR-044): un botón por persona; las horas propias aparecen al marcarla */
.p-personal { margin: 12px 0 0; padding: 0; border: 0; }
.p-persona { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.p-opcion-persona { flex: 1; min-width: 0; }
.p-opcion-persona span { width: 100%; justify-content: flex-start; padding: 0 14px; text-align: left; overflow-wrap: anywhere; }
.p-persona-horas { width: 5.5rem; flex: none; text-align: right; font: 700 22px/1 var(--titulos); }
.p-persona:not(:has(input[data-persona]:checked)) .p-persona-horas { visibility: hidden; }

/* Etiquetas (ADR-042): qué dice, la vista previa en su ancho real de papel (48 mm) y cuántas copias */
.p-hoja-etiqueta { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.p-hoja-etiqueta .p-titulo { margin: 4px 0 0; }
.p-etiqueta-datos { margin: 0; padding: 0; list-style: none; }
.p-etiqueta-dato-principal { font: 700 20px/1.2 var(--titulos); }
.p-etiqueta-vista { padding: 12px; border-radius: 10px; background: var(--superficie-2); text-align: center; }
.p-etiqueta-imagen { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(28, 24, 48, .25); image-rendering: pixelated; }
.p-etiqueta-copias { display: flex; align-items: center; gap: 8px; }
.p-etiqueta-copias-texto { flex: 1; font-weight: 600; }
.p-boton-cuadrado { width: 56px; padding: 0; font-size: 26px; }
.p-etiqueta-copias-campo { width: 5rem; min-height: 56px; text-align: center; font: 700 26px/1 var(--titulos); }
.p-etiqueta-estado { margin: 0; min-height: 1.35em; font-weight: 600; }
.p-etiqueta-estado.is-error { color: var(--error); }
.p-etiqueta-estado.is-bien { color: var(--bien); }
.p-etiqueta-impresion { display: none; }
/* «Imprimir en red» (ADR-046): debajo de lo del Sunmi, separado por una raya; espacios con márgenes (Chrome 62) */
.p-etiqueta-red { padding-top: 12px; border-top: 1px solid var(--linea-fuerte); }
.p-etiqueta-red .p-subtitulo { margin: 0; }
.p-etiqueta-red .p-boton { margin-top: 16px; }
.p-escanear { margin-top: 10px; }

/* Probar impresora y lector (ADR-042) */
.p-diagnostico { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.p-diagnostico .p-titulo { margin: 4px 0 0; }
.p-diagnostico .p-subtitulo { margin: 8px 0 0; }
.p-diag-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.p-diag-datos dt { color: var(--tenue); }
.p-diag-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.p-diag-datos .is-bien, .p-diag-lector .is-bien { color: var(--bien); }
.p-diag-datos .is-error { color: var(--error); }
.p-diag-datos .is-aviso, .p-diag-lector .is-aviso { color: var(--aviso); }
.p-diag-agente { margin: 0; overflow-wrap: anywhere; }
.p-diag-lector { margin: 0; padding-left: 18px; }

/* Sin la app del Sunmi se imprime con el navegador: solo las copias, cada una de 48 mm de ancho y en su hoja */
@media print {
  body.planta.imprimiendo > *:not(main), body.planta.imprimiendo main > *:not(.p-etiqueta-impresion) { display: none !important; }
  body.planta.imprimiendo, body.planta.imprimiendo main { margin: 0; padding: 0; background: #fff; }
  body.planta.imprimiendo .p-etiqueta-impresion { display: block; }
  .p-etiqueta-impresion img { display: block; width: 48mm; height: auto; break-after: page; page-break-after: always; }
  .p-etiqueta-impresion img:last-child { break-after: auto; page-break-after: auto; }
}

/* El ingreso de la planta (planta_ingreso.php): franja magenta con el logo, como el ingreso de la plataforma */
body.p-ingreso { display: flex; flex-direction: column; min-height: 100vh; }
.p-ingreso-franja { padding: 28px 16px 64px; background: var(--barra); background: linear-gradient(180deg, var(--barra), var(--marca)); color: #fff; text-align: center; }   /* como la franja de granchef.css */
.p-ingreso-logo { display: block; margin: 0 auto 8px; }
.p-ingreso-sistema { margin: 0; font: 700 40px/1.05 var(--titulos); letter-spacing: .02em; text-transform: uppercase; }
.p-ingreso-marca { margin-top: 4px; font-size: 15px; opacity: .9; }
.p-ingreso-cuerpo { flex: 1 0 auto; margin-top: -44px; padding: 0 16px 24px; }
.p-ingreso-tarjeta { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; padding: 18px 16px 20px; box-shadow: 0 4px 16px rgba(39, 20, 40, .12); }
.p-ingreso-tarjeta .p-etiqueta { margin: 6px 0 0; }
.p-ingreso-tarjeta .p-campo { font-size: 20px; }
.p-ingreso-titulo { margin: 0 0 4px; text-align: center; font-size: 24px; }
.p-ingreso-boton { margin-top: 10px; }
.p-ingreso-pie { padding: 12px 16px 18px; text-align: center; font-size: 13px; color: var(--tenue); }
/* El pie de la planta: quién lo hizo y las versiones de la app y del sistema (para saber qué tiene instalado cada equipo) */
.p-pie-pagina { padding: 8px 16px 16px; text-align: center; font-size: 12px; color: var(--tenue); }

/* Chrome 62 (la vista web del Sunmi V2 PRO-ST-LA): sin «gap» en flex ni el «gap» de grid sin prefijo, y sin :has().
   planta.js pone «sin-gap» si el navegador no tiene gap en flex: ahí los espacios salen de márgenes. */
.p-dato[data-modo-activo="inicio_fin"] .p-modo:not([data-modo="inicio_fin"]),
.p-dato[data-modo-activo="minutos"] .p-modo:not([data-modo="minutos"]),
.p-dato[data-modo-activo="horas"] .p-modo:not([data-modo="horas"]),
.p-dato[data-modo-activo="inicio_fin"] .p-dato-teclado,
.p-dato[data-modo-activo="horas"] .p-personas { display: none; }
html.con-js .p-persona:not(.is-marcada) .p-persona-horas { visibility: hidden; }
html.con-js .p-persona.is-marcada .p-persona-horas { visibility: visible; }
.sin-gap .p-pasos { grid-gap: 6px; }
.sin-gap .p-lotes, .sin-gap .p-etapa-cuerpo, .sin-gap .p-dato { grid-gap: 10px; }
.sin-gap .p-teclas { grid-gap: 8px; }
.sin-gap .p-diag-datos { grid-gap: 4px 12px; }
.sin-gap .p-diag-datos dt { padding-right: 12px; }      /* por si tampoco toma el grid-gap */
.sin-gap .p-filas > * + * { margin-top: 8px; }
.sin-gap .p-hoja-etiqueta > * + *, .sin-gap .p-diagnostico > * + *, .sin-gap .p-ingreso-tarjeta > * + * { margin-top: 10px; }
.sin-gap .p-lote > * + * { margin-top: 4px; }
.sin-gap .p-barra > * + * { margin-left: 4px; }
.sin-gap .p-fila > * + * { margin-left: 10px; }
.sin-gap .p-check > * + * { margin-left: 10px; }
.sin-gap .p-fila-con-baja > * + *, .sin-gap .p-buscar-fila > * + *, .sin-gap .p-dato-acciones > * + *, .sin-gap .p-display > * + *,
.sin-gap .p-reloj > * + *, .sin-gap .p-persona > * + *, .sin-gap .p-etiqueta-copias > * + * { margin-left: 8px; }
.sin-gap .p-boton > .p-icono, .sin-gap .p-barra-usuario > .p-icono { margin-right: 8px; }
.sin-gap .p-boton-icono > .p-icono, .sin-gap .p-barra-boton > .p-icono { margin-right: 0; }
.sin-gap .p-opciones > * { margin: 0 8px 8px 0; }
.sin-gap .p-lote-pie > * { margin: 0 10px 6px 0; }
.sin-gap .p-resumen-datos > * { margin: 0 18px 6px 0; }
.sin-gap .p-fila-titulo, .sin-gap .p-diag-datos dd, .sin-gap .p-diag-agente { word-wrap: break-word; word-break: break-word; }
@media (min-width: 900px) {
  .sin-gap .p-pasos, .sin-gap .p-teclas { grid-gap: 12px; }
  .sin-gap .p-etapa-cuerpo, .sin-gap .p-dato { grid-gap: 16px; }
  .sin-gap .p-barra > * + * { margin-left: 12px; }
  .sin-gap .p-paso > * + * { margin-left: 12px; }
}