/* Tema visual del sistema de Órdenes de Mantenimiento (RF-06.6).
   Los colores se definen como variables CSS para poder personalizarlos
   sin tocar el resto de la hoja de estilos. */
:root {
  --om-primary: #1b3a5c;
  --om-accent: #d97706;
  --om-ok: #198754;
  --om-warn: #ffc107;
  --om-danger: #dc3545;
  --om-muted: #6c757d;
  --om-radius: .6rem;
}

body {
  background-color: #f4f6f9;
}

.bg-om-primary {
  background-color: var(--om-primary) !important;
}

.text-om-primary {
  color: var(--om-primary) !important;
}

/* Tarjetas del tablero por edificio */
.tarjeta-edificio {
  border: 0;
  border-left: 5px solid var(--om-primary);
  border-radius: var(--om-radius);
  transition: transform .12s ease, box-shadow .12s ease;
}

.tarjeta-edificio:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.contador {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.contador-rojo {
  color: var(--om-danger);
}

.contador-verde {
  color: var(--om-ok);
}

/* Semáforo de estado (RF-05.4 y RF-05.7) */
.fila-vencida {
  border-left: 4px solid var(--om-danger);
}

.fila-respondida {
  border-left: 4px solid var(--om-ok);
}

.fila-pendiente {
  border-left: 4px solid var(--om-warn);
}

/* Línea de tiempo de evidencias */
.linea-evidencias {
  position: relative;
  padding-left: 2.2rem;
}

.linea-evidencias::before {
  content: '';
  position: absolute;
  left: .85rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dee2e6;
}

.evidencia {
  position: relative;
  margin-bottom: 1.1rem;
}

.evidencia::before {
  content: '';
  position: absolute;
  left: -1.53rem;
  top: 1.1rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--om-primary);
  border: 2px solid #fff;
}

.evidencia.nota-interna::before {
  background: var(--om-accent);
}

.evidencia.nota-interna .card {
  background-color: #fff8e6;
}

.badge-estado {
  font-weight: 500;
}

.tabla-ordenes td {
  vertical-align: middle;
}

.caja-login {
  max-width: 27rem;
  margin: 4rem auto;
}

@media (max-width: 576px) {
  .contador {
    font-size: 1.4rem;
  }

  .linea-evidencias {
    padding-left: 1.4rem;
  }

  .caja-login {
    margin: 1.5rem auto;
  }
}

/* =====================================================================
   Panel lateral de navegación
   Se oculta solo a los dos minutos de inactividad y reaparece al pasar
   el mouse por el borde izquierdo. El usuario puede dejarlo fijo.
   ===================================================================== */

:root {
  --om-panel-ancho: 15rem;
  /* Replegado queda el ancho justo para los iconos, que siguen a la
     vista: es la señal de dónde volver a abrir el menú. */
  --om-panel-ancho-replegado: 3.5rem;
}

.om-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--om-panel-ancho);
  background-color: var(--om-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow-x: hidden;
  overflow-y: auto;
  /* La transición hace evidente que el panel se retrae, en lugar de
     cambiar de golpe y dejar al usuario sin referencia. */
  transition: width .2s ease-in-out;
}

.om-panel.replegado {
  width: var(--om-panel-ancho-replegado);
}

/* Replegado solo se ven los iconos: el texto se oculta pero el elemento
   sigue en el DOM, para que los lectores de pantalla lo anuncien igual. */
.om-panel.replegado .om-panel-texto,
.om-panel.replegado .om-panel-separador span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.om-panel.replegado .om-panel-encabezado,
.om-panel.replegado .om-panel-enlace {
  justify-content: center;
}

.om-panel.replegado .om-panel-fijar {
  display: none;
}

.om-panel.replegado .om-panel-separador {
  padding-top: .55rem;
  padding-bottom: .1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: .4rem;
}


.om-panel-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.om-panel-marca {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.om-panel-marca .om-panel-texto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.om-panel-fijar {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .65);
  padding: .2rem .35rem;
  border-radius: .35rem;
  flex-shrink: 0;
}

.om-panel-fijar:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .12);
}

/* Estado fijado: el ícono cambia de inclinación y se resalta, para que se
   vea de un vistazo que el panel no se va a ocultar. */
.om-panel-fijar[aria-pressed="true"] {
  color: var(--om-warn);
  background-color: rgba(255, 255, 255, .12);
}

.om-panel-menu {
  flex: 1 1 auto;
  padding: .25rem 0;
}

.om-panel-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.om-panel-enlace {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .38rem .85rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-left: 3px solid transparent;
  width: 100%;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
}

.om-panel-enlace:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
}

.om-panel-enlace.activo {
  color: #fff;
  background-color: rgba(255, 255, 255, .14);
  border-left-color: var(--om-accent);
}

.om-panel-enlace i {
  font-size: 1.05rem;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

.om-panel-separador {
  padding: .55rem .85rem .2rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

.om-panel-cuenta {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding: .25rem 0;
  /* La cuenta queda fija al pie: es el acceso a salir del sistema y no
     debe quedar fuera de vista cuando hay muchas opciones de menú. */
  flex-shrink: 0;
}

.om-panel-salir {
  cursor: pointer;
}

/* El contenido se corre para dejar lugar al panel y acompaña su
   retracción, de modo que no queda una franja vacía. */
.om-contenido {
  margin-left: var(--om-panel-ancho);
  /* Bootstrap fija container-fluid en width: 100%. Sumado al margen del
     panel, el contenido siempre excedía el ancho de la ventana y aparecía
     la barra de desplazamiento horizontal. Con width auto el bloque toma
     el espacio que queda después del margen. */
  width: auto;
  transition: margin-left .2s ease-in-out;
}

body.om-panel-replegado .om-contenido {
  margin-left: var(--om-panel-ancho-replegado);
}

/* En pantallas chicas el panel se superpone en lugar de correr el
   contenido, que si no quedaría sin ancho útil. */
@media (max-width: 768px) {
  .om-contenido {
    margin-left: 0;
  }

  body.om-panel-replegado .om-contenido {
    margin-left: 0;
  }
}

/* =====================================================================
   Pantalla pública de ingreso de clientes (SRS anexo 6.5)
   ===================================================================== */

.om-barra-publica {
  padding: .6rem 0;
}

.om-barra-acciones {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.om-barra-icono {
  color: rgba(255, 255, 255, .85);
  font-size: 1.25rem;
  padding: .35rem .6rem;
  border-radius: .4rem;
  text-decoration: none;
}

.om-barra-icono:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .12);
}

.bienvenida-envoltorio {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

.bienvenida-tarjeta {
  background-color: #fff;
  border-radius: var(--om-radius);
  box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .08);
  padding: 2.5rem 2rem;
  max-width: 42rem;
  width: 100%;
  text-align: center;
}

.bienvenida-marca {
  color: var(--om-primary);
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: .75rem;
}

.bienvenida-marca-texto {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--om-muted);
  margin: .4rem 0 0;
}

.bienvenida-titulo {
  font-size: 1.9rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: .3rem;
}

.bienvenida-subtitulo {
  color: var(--om-muted);
  margin-bottom: 1.75rem;
}

.bienvenida-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 576px) {
  .bienvenida-opciones {
    grid-template-columns: 1fr;
  }
}

.bienvenida-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.6rem 1rem;
  border-radius: var(--om-radius);
  font-size: 1.15rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.bienvenida-opcion i {
  font-size: 1.9rem;
}

.bienvenida-opcion:hover {
  transform: translateY(-2px);
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .12);
}

.bienvenida-opcion-primaria {
  background-color: #3b82f6;
  color: #fff;
}

.bienvenida-opcion-primaria:hover {
  color: #fff;
}

.bienvenida-opcion-secundaria {
  background-color: #fff;
  color: #3b82f6;
  border: 1px solid #93c5fd;
}

.bienvenida-pie {
  margin: 1.75rem 0 0;
  color: var(--om-muted);
  font-size: .9rem;
}

.om-pie-publico {
  background-color: var(--om-primary);
  color: rgba(255, 255, 255, .85);
  text-align: center;
  padding: 1.1rem;
  font-size: .9rem;
}

/* La tarjeta de la portada crece cuando contiene el formulario de alta. */
.bienvenida-tarjeta-ancha {
  max-width: 52rem;
  text-align: center;
}

.bienvenida-tarjeta-ancha form {
  margin-top: 1.5rem;
}

/* =====================================================================
   Grabación de evidencias desde el navegador (SRS 6.5.2)
   ===================================================================== */

.evidencias-fila {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.evidencias-fila .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* Los botones son deliberadamente grandes: se usan manteniéndolos
   apretados, muchas veces desde un teléfono y con una sola mano. */
.boton-grabar {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 2px solid var(--om-primary);
  background-color: #fff;
  color: var(--om-primary);
  font-size: 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  /* Evita que mantener apretado dispare el menú contextual o la
     selección de texto en pantallas táctiles. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: transform .1s ease, background-color .1s ease;
}

.boton-grabar:hover:not(:disabled) {
  background-color: var(--om-primary);
  color: #fff;
}

.boton-grabar:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Mientras graba, el botón se pinta de rojo y late: es la única señal
   de que el micrófono está abierto. */
.boton-grabar.grabando {
  background-color: var(--om-danger, #dc3545);
  border-color: var(--om-danger, #dc3545);
  color: #fff;
  transform: scale(1.08);
  animation: latido-grabacion 1s ease-in-out infinite;
}

@keyframes latido-grabacion {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
  50% { box-shadow: 0 0 0 .6rem rgba(220, 53, 69, 0); }
}

/* Quien prefiera menos movimiento igual necesita ver que está grabando,
   así que el color queda y solo se quita la animación. */
@media (prefers-reduced-motion: reduce) {
  .boton-grabar.grabando {
    animation: none;
  }
}

.reloj-grabacion {
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
  min-height: .8rem;
}

.vista-previa {
  width: 100%;
  max-width: 22rem;
  margin-top: .6rem;
  border-radius: var(--om-radius);
  background-color: #000;
}

/* =====================================================================
   Consignas de contraseña
   ===================================================================== */

.lista-consignas {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  font-size: .85rem;
}

.consigna {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .1rem 0;
  transition: color .15s ease;
}

.consigna i {
  flex-shrink: 0;
  line-height: 1.4;
}

/* Rojo mientras no se cumple, verde una vez cumplida. El ícono cambia
   junto con el color: quien no distingue bien los colores necesita una
   segunda señal para leer el estado. */
.consigna.pendiente {
  color: #b02a37;
}

.consigna.cumplida {
  color: #146c43;
}


/* =====================================================================
   Adaptación a distintos tamaños de pantalla

   El sistema se usa tanto desde el escritorio de la administración como
   desde el teléfono del encargado parado en el pasillo. Los ajustes de
   abajo van de mayor a menor pantalla.
   ===================================================================== */

/* Los campos de formulario en 16px evitan que iOS haga zoom automático
   al enfocarlos, cosa que descoloca toda la pantalla. */
@media (max-width: 768px) {
  .form-control,
  .form-select {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  /* En pantallas medianas el panel queda siempre replegado a iconos y se
     superpone al expandirse, en lugar de empujar el contenido. */
  .om-contenido,
  body.om-panel-replegado .om-contenido {
    margin-left: var(--om-panel-ancho-replegado);
  }

  .om-panel:not(.replegado) {
    box-shadow: .4rem 0 1.2rem rgba(0, 0, 0, .25);
  }
}

@media (max-width: 768px) {
  /* Cualquier tabla puede desplazarse en horizontal antes que deformar
     la pantalla o cortar columnas. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .table {
    font-size: .85rem;
  }

  .contador {
    font-size: 1.6rem;
  }

  .bienvenida-tarjeta {
    padding: 1.5rem 1.1rem;
  }

  .bienvenida-titulo {
    font-size: 1.4rem;
  }

  /* Los botones de acción de las filas se apilan y ocupan el ancho:
     apretar un botón de 2 mm con el pulgar no funciona. */
  td .btn,
  td form {
    display: block;
    width: 100%;
    margin-bottom: .25rem;
  }

  .modal-dialog {
    margin: .5rem;
  }
}

@media (max-width: 576px) {
  .om-panel {
    --om-panel-ancho: 13rem;
  }

  /* El selector de archivos y los botones de grabación se apilan para
     que el nombre del archivo siga siendo legible. */
  .evidencias-fila {
    flex-wrap: wrap;
  }

  .evidencias-fila .form-control {
    flex: 1 0 100%;
    margin-bottom: .5rem;
  }

  .card-body {
    padding: 1rem;
  }

  h1.h4 {
    font-size: 1.15rem;
  }

  .lista-consignas {
    font-size: .8rem;
  }
}

/* Impresión: el panel y los botones no aportan nada en papel. */
@media print {
  .om-panel,
  .om-barra-publica,
  .btn,
  form {
    display: none !important;
  }

  .om-contenido {
    margin-left: 0 !important;
  }

  .card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
}


/* =====================================================================
   Compactado del panel en pantallas de poca altura

   Con el menú completo del administrador, un portátil de 768 px de alto
   obligaba a desplazarse dentro del panel para llegar a cerrar sesión.
   Se reduce el interlineado antes que recortar opciones.
   ===================================================================== */

@media (max-height: 820px) {
  .om-panel-enlace {
    padding-top: .28rem;
    padding-bottom: .28rem;
    font-size: .92rem;
  }

  .om-panel-enlace i {
    font-size: .98rem;
  }

  .om-panel-separador {
    padding-top: .4rem;
    padding-bottom: .1rem;
  }

  .om-panel-encabezado {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

@media (max-height: 680px) {
  .om-panel-enlace {
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: .88rem;
  }

  /* El subtítulo con el rol se oculta antes que perder una opción. */
  .om-panel-cuenta small {
    display: none;
  }
}

/* =====================================================================
   Fichas de edificio del tablero

   Cada edificio es un ícono con su nombre y dos subíndices: las órdenes
   abiertas y las que requieren acción. La grilla se adapta al ancho
   disponible, de modo que agregar edificios no genere desplazamiento
   horizontal: los que no entran pasan a la fila siguiente.
   ===================================================================== */

/* Los edificios van en una sola fila que se adapta al ancho de la
   ventana: las fichas se encogen hasta su mínimo y, si aun así no
   entran, la franja se desplaza en horizontal. Nunca saltan a una
   segunda fila, para que el tablero conserve su altura. */
.grilla-edificios {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .35rem;
  /* El desplazamiento se detiene en cada ficha, en vez de cortarlas. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Barra de desplazamiento discreta: la franja es angosta y una barra
   estándar se comería parte del alto. */
.grilla-edificios::-webkit-scrollbar {
  height: .4rem;
}

.grilla-edificios::-webkit-scrollbar-thumb {
  background-color: #c7ccd1;
  border-radius: .2rem;
}

.ficha-edificio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  /* Reparten el ancho disponible por igual y se encogen hasta 4,5 rem,
     que es lo mínimo para que el ícono y sus dos subíndices sigan
     siendo legibles. */
  flex: 1 1 0;
  min-width: 4.5rem;
  max-width: 9rem;
  scroll-snap-align: start;
  padding: .7rem .35rem .5rem;
  border: 1px solid #e3e6ea;
  /* La franja de color identifica al edificio, igual que en el resto del
     sistema, sin ocupar el espacio que tomaba el borde lateral. */
  border-top: 3px solid var(--color-edificio, var(--om-primary));
  border-radius: var(--om-radius);
  background-color: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .12s ease, transform .12s ease;
}

.ficha-edificio:hover {
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12);
  transform: translateY(-1px);
  color: inherit;
}

.ficha-icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.5rem;
  color: var(--color-edificio, var(--om-primary));
}

.ficha-subindice {
  position: absolute;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: .6rem;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Abiertas arriba a la izquierda; requieren acción abajo a la derecha.
   Separarlas en esquinas opuestas evita confundir un número con otro. */
.ficha-abiertas {
  top: -.35rem;
  left: -.55rem;
  background-color: var(--om-primary);
}

.ficha-accion {
  bottom: -.35rem;
  right: -.55rem;
  background-color: #b02a37;
}

.ficha-nombre {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  /* Dos líneas como máximo: un nombre largo no debe estirar la ficha y
     descolocar la grilla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Puntos de la referencia al pie de la grilla. */
.referencia-punto {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  position: static;
  min-width: 0;
  padding: 0;
  box-shadow: none;
  vertical-align: middle;
}

/* Los totales de arriba también se achican, que era la otra fuente de
   desplazamiento horizontal en pantallas angostas. */
.resumen-totales .contador {
  font-size: 1.7rem;
  line-height: 1.1;
}

.resumen-totales .card-body {
  padding: .6rem .5rem;
}

@media (max-width: 576px) {
  .grilla-edificios {
    gap: .4rem;
  }

  .ficha-edificio {
    min-width: 4.2rem;
  }

  .ficha-nombre {
    font-size: .72rem;
  }

  .resumen-totales .contador {
    font-size: 1.4rem;
  }
}