/* =====================================================================
   Laboratorio - Pantallas
   Lo propio de una pantalla sola. Va después de componentes.css.
   ===================================================================== */

/* --------------------------------------------------------------------
   Login
   -------------------------------------------------------------------- */
.pagina-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--fondo);
}

.caja-login {
  width: 100%;
  max-width: 380px;
  margin: auto;
  padding: 30px 28px 34px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.caja-login h1 { font-size: 1.25rem; text-align: center; }
.caja-login .sub {
  text-align: center;
  color: var(--texto-tenue);
  font-size: .86rem;
  margin: 5px 0 20px;
}

.caja-login label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin: 12px 0 4px;
}

.caja-login .btn { margin-top: 20px; }

/* --------------------------------------------------------------------
   Lista de permisos del perfil
   -------------------------------------------------------------------- */
.lista-permisos { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.lista-permisos li { padding: 3px 0; }
.lista-permisos .permitido { color: var(--texto); }
.lista-permisos .negado { color: var(--texto-tenue); }

/* --------------------------------------------------------------------
   Formularios de dos columnas y textos de ayuda
   En FS vivían repartidos; acá van juntos porque los usan todas las
   pantallas de alta y edición.
   -------------------------------------------------------------------- */
.fila-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 18px;
}

.ayuda {
  margin: 4px 0 0;
  font-size: .8rem;
  color: var(--texto-tenue);
}

.error-campo {
  margin: 4px 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rojo);
}

/* --------------------------------------------------------------------
   Estados de un ingreso
   en_reparacion, pendiente y sin_reparacion ya vienen de componentes.css
   (son los mismos nombres que en FS); acá van los propios del laboratorio.
   -------------------------------------------------------------------- */
.etq-pend_revision { background: var(--acento-suave); color: var(--acento); }
.etq-en_prueba     { background: var(--violeta-bg);   color: var(--violeta); }
.etq-reparado      { background: var(--verde-bg);     color: var(--verde); }
.etq-urgente       { background: var(--rojo);         color: #fff; }
.etq-reingreso     { background: var(--ambar-bg);     color: var(--ambar); }

/* Columnas numéricas: alineadas a la derecha para comparar de un vistazo. */
.tabla th.num,
.tabla td.num { text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------------
   Bitácora de un ingreso
   -------------------------------------------------------------------- */
.bitacora-lista { list-style: none; margin: 14px 0 0; padding: 0; }

.bitacora-entrada {
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--borde-fuerte);
  margin-bottom: 8px;
}
.bitacora-entrada.bitacora-estado     { border-left-color: var(--acento); }
.bitacora-entrada.bitacora-asignacion { border-left-color: var(--violeta); }
.bitacora-entrada.bitacora-datos      { border-left-color: var(--ambar); }

.bitacora-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: .86rem;
}

.bitacora-texto { margin-top: 3px; white-space: normal; overflow-wrap: anywhere; }
.bitacora-entrada.bitacora-componente { border-left-color: var(--verde); }

/* --------------------------------------------------------------------
   Semáforo de días (colas)
   El contador .dias viene de componentes.css; los colores van acá porque
   en FS vivían en otra sección que no se trajo. Los umbrales se configuran
   en Ajustes.
   -------------------------------------------------------------------- */
.dias-verde { background: var(--verde-bg); color: var(--verde); }
.dias-ambar { background: var(--ambar-bg); color: var(--ambar); }
.dias-rojo  { background: var(--rojo-bg);  color: var(--rojo); }

.panel h3 { margin: 16px 0 6px; font-size: .95rem; }

/* --------------------------------------------------------------------
   Adjuntos
   -------------------------------------------------------------------- */
.adjuntos { list-style: none; margin: 0; padding: 0; }

.adjuntos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}
.adjuntos li:last-child { border-bottom: none; }

.adjuntos img {
  width: 62px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  display: block;
}

.adj-doc {
  width: 62px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rojo-bg);
  color: var(--rojo);
  font-weight: 700;
  font-size: .82rem;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
}
.adj-doc:hover { text-decoration: none; }

.adj-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.adj-info > a { font-size: .88rem; word-break: break-word; }
.adj-comentario { font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.adjunto-comentario-campo + .adjunto-comentario-campo { margin-top: 12px; }
[data-comentario-simple][hidden], [data-comentarios-archivos][hidden] { display: none; }

.adjuntos li > form { margin: 0; }
.progreso-subida { margin-top: 10px; display: grid; gap: 5px; font-size: .86rem; color: var(--texto-suave); }
.progreso-subida[hidden] { display: none; }
.progreso-subida span { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--acento) var(--progreso, 0%), var(--borde) var(--progreso, 0%)); }
.progreso-subida em { font-style: normal; }
.aviso-vivo { margin-bottom: 14px; padding: 9px 12px; border-left: 3px solid var(--acento); border-radius: var(--radio-chico); background: var(--acento-suave); color: var(--texto); }

@keyframes fila-actualizada {
  0%, 100% { background-color: transparent; }
  50% { background-color: var(--acento-suave); }
}

tr.es-actualizada > td {
  animation: fila-actualizada 0.8s ease-in-out 3;
  background-color: var(--acento-suave);
}

@media (prefers-reduced-motion: reduce) {
  tr.es-actualizada > td {
    animation: none;
    background-color: var(--acento-suave);
  }
}

.titulo-pagina-con-accion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-nueva-flotante { position: static; box-shadow: none; }

@media (max-width: 700px) {
  .btn-nueva-flotante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 30;
    box-shadow: var(--sombra);
  }
}



/* --------------------------------------------------------------------
   Pantalla del telefono: subir una foto por QR
   Estaba al final de fs.css, despues de la impresion y sin encabezado.
   -------------------------------------------------------------------- */

/* ====================================================================
   "Usar el movil": QR en la compu y pagina de subida en el telefono
   ==================================================================== */

/* Lo que fs.js esconde cuando hay JavaScript (queda como respaldo sin el). */
html.js .solo-sin-js { display: none; }

/* --- Enlace en la ficha, junto a la subida de adjuntos --- */
.adjuntos-movil {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde);
}
.btn-movil { white-space: nowrap; }

/* --- Pantalla del QR (compu) --- */
.movil-qr-grid {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.movil-qr-svg {
  flex: 0 0 auto;
  width: 240px;
  max-width: 60vw;
  padding: 12px;
  background: #fff;                 /* el QR siempre sobre blanco, aun en oscuro */
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.movil-qr-svg .qr { display: block; width: 100%; height: auto; }
.movil-qr-texto { flex: 1 1 260px; min-width: 240px; }
.movil-pasos { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; }
.movil-vence { margin: 0 0 14px; }
.movil-url-det summary { cursor: pointer; color: var(--acento); }
.movil-url {
  word-break: break-all;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  font-size: .85rem;
}

.movil-recibido {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.movil-recibido-titulo {
  color: var(--verde);
  font-size: 1.05rem;
  margin: 0 0 12px;
}
.movil-recibido-lista {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.movil-recibido-lista li {
  width: 96px;
  height: 96px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-suave);
}
.movil-recibido-lista img { width: 100%; height: 100%; object-fit: cover; }
.movil-recibido-lista .adj-doc { font-size: .75rem; padding: 6px; text-align: center; }

/* --- Pagina en el telefono (documento autonomo, fuera del layout) --- */
.movil-pagina {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 18px 24px;
  background: var(--fondo);
  color: var(--texto);
}
.movil-card {
  width: 100%;
  max-width: 460px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 20px 26px;
  text-align: center;
}
.movil-titulo { margin: 0 0 16px; font-size: 1.3rem; }
.movil-maquina {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.movil-uid { font-size: 1.5rem; font-weight: 700; }
.movil-form { display: flex; flex-direction: column; gap: 12px; }
.movil-form [data-comentario-simple] { text-align: left; }
.movil-form [data-comentario-simple] label { display: block; margin-bottom: 5px; font-weight: 600; }
.movil-form [data-comentario-simple] textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  color: var(--texto);
  background: var(--fondo-panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
}
.movil-form [data-comentario-simple] button { margin-top: 12px; }
.movil-o { margin: 2px 0; }
.movil-nota { margin-top: 14px; }
.movil-estado {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  margin: 0 0 14px;
}
.movil-estado-ok  { color: var(--verde); background: var(--verde-bg); }
.movil-estado-mal { color: var(--ambar); background: var(--ambar-bg); }

/* Botones grandes, para el pulgar. */
.btn-grande {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------
   Etiqueta para pegar en la pieza (90 × 50 mm)
   -------------------------------------------------------------------- */
.pagina-etiqueta { background: #fff; color: #000; padding: 16px; }

.etiqueta {
  width: 90mm;
  height: 50mm;
  box-sizing: border-box;
  border: 1px dashed #999;
  padding: 3mm;
  display: flex;
  gap: 3mm;
  align-items: center;
  overflow: hidden;
  font-family: var(--fuente);
  color: #000;
  background: #fff;
}

.etiqueta-qr { flex: 0 0 30mm; }
.etiqueta-qr svg { width: 30mm; height: 30mm; display: block; }
.etiqueta-datos { flex: 1; min-width: 0; line-height: 1.15; }
.etiqueta-numero { font-family: var(--fuente-display); font-size: 20pt; font-weight: 700; }
.etiqueta-npu { font-family: var(--fuente-mono); font-size: 11pt; font-weight: 600; }
.etiqueta-equipo { font-size: 9pt; font-weight: 600; margin-top: 1mm; max-height: 3.5em; overflow: hidden; }
.etiqueta-pie { font-size: 7.5pt; margin-top: 1mm; }
.etiqueta-acciones { margin-top: 16px; display: flex; gap: 8px; }

@media print {
  @page { margin: 5mm; }
  .pagina-etiqueta { padding: 0; }
  .etiqueta { border: none; }
  .etiqueta-acciones { display: none; }
}