/* ============================================================
   styles.css
   Proyecto: Asistente Inteligente de Materiales SAP - PAPELSA
   ============================================================
   Interfaz pensada para un ingeniero de planta, a menudo desde
   el telefono y fuera de horario laboral. Prioridad absoluta:
   que los codigos y las cantidades se lean sin ambiguedad.

   Variante A (por defecto): distinción resuelto/pendiente por
   color + tinte de fondo, densidad cómoda.
   Ver css/styles-variante-b.css para la variante compacta.
   ============================================================ */

/* ---------- Tokens de marca ---------- */
:root {
  --teal:        #006975; /* principal */
  --lima:        #A9C23F; /* principal — SOLO relleno/borde/acento grafico, nunca texto sobre claro */
  --teal-medio:  #4F868E;

  --tinta:       #333333;
  --tinta-suave: #6D6D6D;
  --borde:       #BCBCBC;

  --acento:      var(--teal);
  --acento-vivo: #00545D;

  --ok:          #1B7A43;
  --error:       #B3261E;
  --alerta:      #A15C00;

  --papel:       #F4F5F4;
  --superficie:  #FFFFFF;

  --radio:  10px;
  --sombra: 0 2px 10px rgba(0,0,0,.08);

  --marca: 'Comfortaa', ui-sans-serif, sans-serif; /* SOLO cabecera y titulos */
  --dato:  ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas,
           'Liberation Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: var(--tinta);
  background: var(--papel);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--acento); }
a:hover { color: var(--acento-vivo); }

/* Foco visible: nunca lima (RN de contraste), siempre teal */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ============================================================
   CABECERA CON LOGO
   ============================================================ */

.barra {
  border-bottom: 2px solid var(--lima);
}

.logo-barra {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.barra-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Franja de marca en la pantalla de acceso */
.tarjeta-acceso { border-top: 3px solid var(--lima); }

.logo-acceso {
  height: 34px;
  width: auto;
  margin-bottom: 18px;
}

.titulo-acceso {
  font-family: var(--marca);
  font-weight: 700;
}

.marca {
  font-family: var(--marca);
  color: var(--teal);
}

.indicador.verde { background: var(--ok); }

.pie { border-top: 1px solid var(--borde); }

/* ---------- Codigos y cantidades ----------
   Cifras tabulares: las columnas de numeros quedan
   alineadas y un codigo nunca se confunde con otro. */
.dato {
  font-family: var(--dato);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ============================================================
   PANTALLAS
   ============================================================ */
.pantalla { display: none; }
.pantalla.visible { display: block; }

/* ---------- Acceso ---------- */
.acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-acceso {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px 28px;
}

.marca {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 4px;
}

.titulo-acceso {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 24px;
  line-height: 1.25;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;          /* 16px evita el zoom automatico en iOS */
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.campo input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  cursor: pointer;
}

.boton:hover  { background: var(--acento-vivo); border-color: var(--acento-vivo); }
.boton:active { transform: translateY(1px); }

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

.boton:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.boton-discreto {
  width: auto;
  min-height: 44px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--tinta-suave);
  background: transparent;
  border-color: var(--borde);
}

.boton-discreto:hover {
  background: var(--papel);
  color: var(--tinta);
}

/* ============================================================
   AVISOS
   ============================================================ */
.aviso {
  display: none;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  border-radius: var(--radio);
  border-left: 3px solid;
}

.aviso.visible { display: block; }

.aviso-error {
  color: var(--error);
  background: #fdf2f0;
  border-color: var(--error);
}

.aviso-ok {
  color: var(--ok);
  background: #f0f7f2;
  border-color: var(--ok);
}

.aviso-atencion {
  color: var(--alerta);
  background: #fdf5ee;
  border-color: var(--alerta);
}

/* ============================================================
   APLICACION
   ============================================================ */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}

.barra-identidad {
  font-size: 14px;
  line-height: 1.3;
}

.barra-identidad strong { display: block; }

.barra-identidad span {
  font-size: 12px;
  color: var(--tinta-suave);
}

.etiqueta-rol {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento);
  background: #e6f0f1;
  border-radius: 3px;
}

.contenido {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

@media (min-width: 640px) {
  .contenido { padding: 24px 20px 48px; }
}

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .panel { padding: 20px; margin-bottom: 16px; }
}

.panel h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}

.linea-estado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--papel);
}

.linea-estado:last-child { border-bottom: none; }

.linea-estado span:first-child { color: var(--tinta-suave); }

.pie {
  padding: 20px;
  font-size: 12px;
  text-align: center;
  color: var(--tinta-suave);
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 480px) {
  .barra { flex-wrap: wrap; }
}
/* ============================================================
   RESULTADOS DE BUSQUEDA
   ============================================================
   La cantidad y el codigo son lo que el ingeniero lee primero,
   a veces con prisa y desde el telefono. Por eso van en
   monoespaciada y con contraste alto.
   ============================================================ */

.buscador {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.buscador input {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.buscador input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.buscador .boton {
  width: 100%;
  flex-shrink: 0;
  padding: 12px 22px;
}

@media (min-width: 480px) {
  .buscador .boton { width: auto; }
}

.ayuda-buscador {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--tinta-suave);
}

/* ---------- Tarjeta de resultado ---------- */
.resultado {
  padding: 16px;
  margin-top: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
}

.resultado-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.resultado-codigo {
  font-size: 17px;
  font-weight: 700;
  color: var(--acento);
}

.resultado-ambito {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-align: right;
}

.resultado-descripcion {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.35;
}

/* ---------- Cantidades ---------- */
.valor-ok     { color: var(--ok);     font-weight: 700; }
.valor-cero   { color: var(--tinta-suave); }
.valor-alerta { color: var(--alerta); font-weight: 700; }

/* RN-030: la advertencia de material comprometido no puede
   pasar desapercibida, pero tampoco debe ocultar el dato. */
.nota-comprometido {
  margin: 8px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--alerta);
  background: #fdf5ee;
  border-left: 3px solid var(--alerta);
  border-radius: 0 var(--radio) var(--radio) 0;
}

#resultados-busqueda:empty { display: none; }
/* ============================================================
   SOLICITUD CON VARIOS MATERIALES
   ============================================================ */

.item-solicitud {
  margin-top: 16px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--error);
  border-radius: var(--radio);
}

.item-solicitud.resuelto {
  border-left-color: var(--ok);
  background: #f7fbf8;
}

.item-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.item-numero {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--acento);
  border-radius: 50%;
}

.item-texto {
  font-size: 15px;
  font-weight: 600;
}

.item-nivel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 3px 10px 3px 0;
  font-size: 13px;
  color: var(--tinta-suave);
}

.item-nivel::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tinta-suave);
}

/* ---------- Cantidad ---------- */
.item-cantidad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.item-cantidad label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
}

.item-cantidad input {
  width: 96px;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--dato);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.item-cantidad input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* RN-004: la cantidad asumida no puede pasar desapercibida */
.aviso-cantidad {
  font-size: 12px;
  font-weight: 600;
  color: var(--alerta);
}

/* ---------- Candidatos seleccionables ---------- */
.candidato { cursor: default; }
.candidato:hover { background: var(--superficie); }

.candidato.elegido {
  border-left-color: var(--ok);
  border-color: var(--ok);
  background: #f4f9f5;
}

.candidato-accion {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acento);
  border-top: 1px solid var(--papel);
}

.candidato.elegido .candidato-accion {
  color: var(--ok);
}

.nota-sin-resultado {
  margin: 0;
  padding: 12px;
  font-size: 14px;
  color: var(--tinta-suave);
  background: var(--papel);
  border-radius: var(--radio);
}
/* ============================================================
   SALIDA PARA SAP
   ============================================================
   Se copia de madrugada y se pega en un sistema donde un error
   cuesta caro. Todo en monoespaciada, cifras alineadas y el
   bloque copiable claramente separado del resto.
   ============================================================ */

.salida {
  margin-top: 20px;
  border-left: 3px solid var(--ok);
}

/* Permite desplazar la tabla en pantallas estrechas */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}

.tabla-salida {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.tabla-salida th {
  padding: 9px 11px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.tabla-salida td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--papel);
}

.tabla-salida tr:last-child td {
  border-bottom: none;
}

.tabla-salida td.dato {
  font-weight: 600;
}

/* ---------- Bloque copiable ---------- */
.bloque-sap {
  margin: 0 0 12px;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--dato);
  font-size: 13px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  tab-size: 12;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  white-space: pre;
  user-select: all;
  -webkit-user-select: all;
}

/* RN-028: la responsabilidad sigue siendo del ingeniero */
.nota-responsabilidad {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
/* ---------- Encuesta de utilidad (RN-029) ---------- */
.encuesta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.encuesta-pregunta {
  font-size: 14px;
  font-weight: 600;
}

.encuesta .boton-discreto {
  min-width: 62px;
}

.encuesta-gracias {
  font-size: 14px;
  color: var(--ok);
}
/* ============================================================
   UBICACIONES DE UN MATERIAL (RN-033)
   ============================================================ */

.titulo-ubicaciones {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
}

.ubicacion {
  padding: 12px;
  min-height: 44px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
}

.ubicacion:hover {
  border-left-color: var(--acento);
  background: var(--superficie);
}

.ubicacion.activa {
  border-color: var(--ok);
  border-left-color: var(--ok);
  background: #f4f9f5;
}

.ubicacion-fila {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.ubicacion-fila + .ubicacion-fila {
  margin-top: 3px;
}

.ubicacion-ambito {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ubicacion-detalle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--tinta-suave);
}

/* ============================================================
   ITEMS DESPLEGABLES
   ============================================================
   Con varios materiales en una sola consulta, mostrarlo todo
   abierto obliga a desplazarse mucho. Lo resuelto se colapsa;
   lo pendiente queda a la vista.
   ============================================================ */

.item-cabecera.desplegable {
  cursor: pointer;
  margin-bottom: 0;
  padding: 6px 0;
  min-height: 44px;
  user-select: none;
}

.item-cabecera.desplegable:hover .item-texto {
  color: var(--acento);
}

/* Indicador de estado */
.indicador {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.indicador.rojo  { background: var(--error); }
.indicador.verde { background: var(--ok); }

.item-texto { flex: 1; }

.item-resumen {
  font-size: 13px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.flecha {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta-suave);
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.flecha.abierta { transform: rotate(-90deg); }

/* Cuerpo desplegable */
.item-cuerpo { display: none; }

.item-cuerpo.visible {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--papel);
}

@media (prefers-reduced-motion: reduce) {
  .flecha { transition: none; }
}
/* ---------- Resumen del item resuelto ---------- */
.item-resumen {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: right;
  font-size: 13px;
  color: var(--tinta-suave);
}

.resumen-codigo {
  font-weight: 700;
  color: var(--ok);
}

.resumen-descripcion {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

.resumen-almacen { font-size: 12px; }

/* La cabecera necesita permitir que el resumen se encoja */
.item-cabecera.desplegable { min-width: 0; }
.item-cabecera .item-texto { min-width: 0; }

@media (max-width: 620px) {
  .item-cabecera.desplegable { flex-wrap: wrap; }
  .item-resumen {
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }
  .resumen-descripcion { max-width: 100%; }
}
/* ---------- Aviso de búsqueda sin resultado ---------- */
.reporte-busqueda {
  margin-top: 14px;
  padding: 14px;
  background: var(--papel);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

.reporte-titulo {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.reporte-ayuda {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--tinta-suave);
}

.reporte-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reporte-texto {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.reporte-texto:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.reporte-enviar { flex-shrink: 0; }

.reporte-gracias {
  margin: 0;
  font-size: 14px;
  color: var(--ok);
}
/* ---------- Material marcado para baja (RN-034) ---------- */
.candidato.de-baja {
  border-left-color: var(--alerta);
  background: #fffdfa;
}

.aviso-baja {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--alerta);
  background: #fdf5ee;
  border-radius: var(--radio);
}

.aviso-baja::before {
  content: "!";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  background: var(--alerta);
  border-radius: 50%;
}
/* ============================================================
   HISTORIAL DE CONSULTAS
   ============================================================ */

.historial-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  user-select: none;
}

.historial-cabecera h2 { margin: 0; }

.historial-cabecera:hover h2 { color: var(--acento); }

.lista-historial { display: none; }

.lista-historial.visible {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--papel);
}

.historial-fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--papel);
}

.historial-fila:last-child { border-bottom: none; }

.historial-fila .indicador { margin-top: 5px; }

.historial-texto {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: break-word;
}

.historial-meta {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
  color: var(--tinta-suave);
}

@media (max-width: 560px) {
  .historial-fila { flex-wrap: wrap; }
  .historial-meta { width: 100%; text-align: left; }
}
/* ============================================================
   MÉTRICAS DEL PILOTO
   ============================================================ */

.metricas-titulo {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento);
}

.metricas-titulo:first-child { margin-top: 0; }

.linea-estado.destacada {
  padding: 11px 12px;
  margin: 4px 0;
  background: #e9f2f3;
  border-radius: var(--radio);
  border-bottom: none;
}

.linea-estado.destacada span:first-child {
  font-weight: 600;
  color: var(--tinta);
}

.linea-estado.destacada .dato {
  font-weight: 700;
  color: var(--acento);
}

.metricas-nota {
  margin: 16px 0 0;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-suave);
  border-top: 1px solid var(--papel);
}

/* ---------- Detalle del fallo (RN-029) ---------- */
.bloque-fallo {
  margin-top: 12px;
  border-left: 3px solid var(--alerta);
}

.motivos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.motivo-fallo {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
}

.motivo-fallo.activo {
  color: var(--acento);
  background: #e9f2f3;
  border-color: var(--acento);
  font-weight: 600;
}

@media (min-width: 600px) {
  .motivos {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .motivo-fallo { width: auto; }
}

/* ============================================================
   AVISO DE BUSQUEDA PLEGABLE
   ============================================================
   Disponible siempre, pero discreto: cuando la busqueda acierta
   no debe estorbar, y cuando falla tiene que estar a mano.
   ============================================================ */

.abrir-reporte {
  width: 100%;
  padding: 10px 0;
  min-height: 44px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--tinta-suave);
  background: transparent;
  border: none;
  cursor: pointer;
}

.abrir-reporte::after {
  content: "›";
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.abrir-reporte:hover { color: var(--acento); }

.abrir-reporte.activo {
  color: var(--acento);
}

.abrir-reporte.activo::after {
  transform: rotate(-90deg);
}

.reporte-cuerpo { display: none; }

.reporte-cuerpo.visible {
  display: block;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--borde);
}

@media (prefers-reduced-motion: reduce) {
  .abrir-reporte::after { transition: none; }
}

/* Motivo seleccionado en el aviso de búsqueda */
.motivo-busqueda.activo {
  color: var(--acento);
  background: #e9f2f3;
  border-color: var(--acento);
  font-weight: 600;
}

/* ============================================================
   SOLICITUD DE MATERIALES
   ============================================================
   La usan mecanicos y contratistas, a veces desde el telefono
   y con guantes. Campos grandes y accion clara.
   ============================================================ */

.bloque-solicitud {
  margin-top: 18px;
  border-left: 3px solid var(--lima);
}

.bloque-solicitud h2 {
  font-family: var(--marca);
  font-size: 17px;
}

.ayuda-campo {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--tinta-suave);
}

/* La orden de trabajo se teclea en el movil: cifras grandes
   y separadas para no equivocarse con siete digitos */
#sol-orden {
  font-size: 20px;
  letter-spacing: .12em;
  text-align: center;
}

/* ============================================================
   BANDEJA DE SOLICITUDES RECIBIDAS
   ============================================================
   El ingeniero la mira de madrugada: lo nuevo tiene que
   distinguirse de un vistazo.
   ============================================================ */

.contador-bandeja {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 6px;
  font-family: var(--dato);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--error);
  border-radius: 11px;
}

.solicitud-fila {
  padding: 14px;
  margin-bottom: 12px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
}

.solicitud-fila.nueva {
  border-left-color: var(--lima);
  background: var(--superficie);
}

.solicitud-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.solicitud-orden {
  font-size: 16px;
  font-weight: 700;
  color: var(--acento);
}

.solicitud-fecha {
  font-size: 12px;
  color: var(--tinta-suave);
}

.solicitud-quien {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.solicitud-materiales {
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.solicitud-fila.nueva .solicitud-materiales {
  background: var(--papel);
}

.solicitud-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .solicitud-acciones .boton { width: 100%; }
}

/* ---------- Copiar el número de orden ---------- */
.solicitud-orden-grupo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.copiar-orden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--tinta-suave);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 5px;
  cursor: pointer;
}

.copiar-orden:hover {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--papel);
}