/* Portal de proveedores (#471): hoja de estilos sin compilar.
   Herramienta de trabajo de un proveedor, no un sitio de marketing: densa, clara y
   sobria, en escritorio y en celular. Los tokens son los del diseño. */

:root {
  --fondo: #f6f7f9;
  --placa: #ffffff;
  --tinta: #1b2430;
  --tenue: #5c6b7a;
  --linea: #dde3e9;
  /* El acento se puede sobrescribir con EMPRESA_COLOR (llega como --empresa-color). */
  --acento: var(--empresa-color, #1f6feb);
  --acento-tinta: #ffffff;
  --alerta: #b54708;
  --radio: 8px;
  --ancho: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101418;
    --placa: #182027;
    --tinta: #e4e9ee;
    --tenue: #93a1af;
    --linea: #2a3540;
    --acento: #5b9bff;
    --alerta: #f0a35e;
    --acento-tinta: #0d1117;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

.app { min-height: 100vh; }

/* Los números se alinean en columna; los folios y los montos van en mono. */
.num, td, th { font-variant-numeric: tabular-nums; }
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- botones y campos ---------------------------------------------------- */

button {
  font: inherit;
  cursor: pointer;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: 14px;
  font-weight: 500;
}

.boton:hover { filter: brightness(1.06); }
.boton[disabled] { opacity: .55; cursor: default; }

.boton-soso {
  background: transparent;
  border-color: var(--linea);
  color: var(--tinta);
}

.boton-texto {
  background: none;
  border: 0;
  padding: 0;
  color: var(--tenue);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.boton-texto:hover { color: var(--tinta); }

label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 5px; }

.campo {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--placa);
  color: var(--tinta);
  font: inherit;
}

.campo::placeholder { color: var(--tenue); opacity: .7; }

.campo-codigo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: .38em;
  text-align: center;
  padding: 8px 0 8px .38em;
}

/* --- la marca de la empresa --------------------------------------------- */

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

.logo { height: 26px; width: auto; display: block; }

.marca-inicial {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.marca-texto { font-weight: 600; white-space: nowrap; }

/* --- entrar -------------------------------------------------------------- */

.entrar {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.tarjeta-entrar {
  width: 100%;
  max-width: 360px;
  background: var(--placa);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 26px 24px 22px;
}

.tarjeta-entrar h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 16px 0 20px;
}

.paso + .paso { margin-top: 20px; }

.separador-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--tenue);
  font-size: 12px;
}

.separador-paso::before,
.separador-paso::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.acciones { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.acciones .boton { flex: 1; justify-content: center; }

.aviso {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--tenue);
}

.aviso-error { color: var(--alerta); }

/* #494: el aviso del expediente que bloquea la subida, con el borde izquierdo de la
   pantalla del expediente (no un texto naranja suelto). */
.aviso.aviso-bloqueo {
  border-left: 3px solid var(--alerta);
  padding: 8px 12px;
  color: var(--tinta);
}

/* --- barra superior ------------------------------------------------------ */

.barra {
  border-bottom: 1px solid var(--linea);
  background: var(--placa);
}

.barra-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.barra-titulo { color: var(--tenue); font-size: 14px; }

.usuario { color: var(--tenue); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.usuario strong { color: var(--tinta); font-weight: 500; }

/* --- contenido ----------------------------------------------------------- */

.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 26px 20px 64px;
}

.cabecera-lista {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

h1 { font-size: 20px; font-weight: 600; margin: 0; }

.pestanas { display: flex; gap: 4px; }

.pestana {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 7px 10px;
  color: var(--tenue);
  font-size: 14px;
}

.pestana[aria-selected="true"] {
  color: var(--tinta);
  border-bottom-color: var(--acento);
  font-weight: 500;
}

.cuenta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--tenue);
  margin-left: 2px;
}

/* El enlace a «Facturas y pagos» y las pestañas de la lista comparten renglón. */
.cabecera-acciones {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- tabla de órdenes (escritorio) -------------------------------------- */

.placa {
  background: var(--placa);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--tenue);
  padding: 11px 16px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }

.folio { font-weight: 500; }
.folio a { color: inherit; text-decoration: none; }
.folio a:hover { color: var(--acento); text-decoration: underline; }

.monto { white-space: nowrap; }

/* --- la columna Recepción: lo memorable de la pantalla ------------------- */

.recepcion { display: flex; align-items: center; gap: 10px; min-width: 190px; }

.barra-recepcion {
  flex: none;
  width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--linea);
  overflow: hidden;
}

.barra-recepcion > span {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 3px;
}

.recepcion-texto { color: var(--tenue); font-size: 13px; white-space: nowrap; }

/* --- estado: etiqueta de texto con un punto, no una píldora -------------- */

.estado { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14px; }

.punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); }

.estado-por_confirmar { color: var(--alerta); }
.estado-por_confirmar .punto { background: var(--alerta); }
.estado-confirmada { color: var(--acento); }
.estado-confirmada .punto { background: var(--acento); }
.estado-recibida_en_parte { color: var(--tinta); }
.estado-recibida_en_parte .punto { background: var(--tinta); }
.estado-cerrada { color: var(--tenue); }
.estado-cerrada .punto { background: var(--tenue); }
.estado-por_cuadrar { color: var(--acento); }
.estado-por_cuadrar .punto { background: var(--acento); }
/* El cuadre (#468) usa los mismos tokens: el acento para lo que ya quedó en SAP y la
   alerta para lo que el proveedor tiene que atender. */
.estado-aceptada, .estado-cuadrando { color: var(--acento); }
.estado-aceptada .punto, .estado-cuadrando .punto { background: var(--acento); }
.estado-registrada { color: var(--acento); }
.estado-registrada .punto { background: var(--acento); }
.estado-rechazada_cuadre, .estado-rechazada_b1, .estado-rechazada_manual, .estado-error_b1 { color: var(--alerta); }
.estado-rechazada_cuadre .punto, .estado-rechazada_b1 .punto, .estado-rechazada_manual .punto, .estado-error_b1 .punto { background: var(--alerta); }
/* Estatus de pago (#469): mismos tokens del diseño, sin colores nuevos. */
.estado-pagada { color: var(--acento); }
.estado-pagada .punto { background: var(--acento); }
.estado-pagada_parcialmente { color: var(--alerta); }
.estado-pagada_parcialmente .punto { background: var(--alerta); }
.estado-cerrada_sin_pago_completo { color: var(--alerta); }
.estado-cerrada_sin_pago_completo .punto { background: var(--alerta); }
.estado-cancelada { color: var(--tenue); }
.estado-cancelada .punto { background: var(--tenue); }

/* --- lista de tarjetas (móvil) ------------------------------------------ */

.lista-oc { display: none; margin: 0; padding: 0; list-style: none; }

.tarjeta-oc {
  background: var(--placa);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.tarjeta-oc-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tarjeta-oc-pie {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: center;
}

.tarjeta-oc-pie dt { color: var(--tenue); font-size: 13px; }
.tarjeta-oc-pie dd { margin: 0; }

/* La barra de recepción ocupa el ancho de la tarjeta, debajo del total y la entrega. */
.tarjeta-oc-recepcion { grid-column: 1 / -1; min-width: 0; margin-top: 6px; }
.tarjeta-oc .recepcion { min-width: 0; }
.tarjeta-oc .barra-recepcion { flex: 1 1 auto; width: auto; min-width: 48px; }

/* --- vacío y errores ----------------------------------------------------- */

.vacio {
  padding: 40px 20px;
  text-align: center;
  color: var(--tenue);
}

/* --- detalle ------------------------------------------------------------- */

.volver { margin-bottom: 14px; }

.encabezado-oc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.datos-oc {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 18px;
  margin: 12px 0 0;
  font-size: 14px;
}

.datos-oc dt { color: var(--tenue); }
.datos-oc dd { margin: 0; }

/* La entrega de B1 se movió en SAP después de confirmar: se dice sin dramatizar. */
.nota-entrega {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--alerta);
}

.total-grande { font-size: 20px; font-weight: 500; }

.bloque { margin-top: 18px; }

.titulo-bloque {
  font-size: 13px;
  font-weight: 500;
  color: var(--tenue);
  margin: 0 0 10px;
}

/* La lista de facturas va entre dos títulos de bloque: sin este margen «Partidas» queda pegado. */
.tabla-facturas { margin-bottom: 24px; }

/* --- tarjeta de confirmar entrega --------------------------------------- */

.confirmar {
  background: var(--placa);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.confirmar h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }

.confirmar form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.confirmar .campo-fecha { width: 190px; }

/* La fecha elegida, en el formato del portal. Va fuera del renglón del formulario para
   que el botón quede alineado con el campo y no con el eco. */
.fecha-elegida {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--tenue);
  min-height: 19px;
}

.confirmar-nota { color: var(--tenue); font-size: 13px; margin: 0; }

.confirmado {
  margin: 10px 0 0;
  color: var(--acento);
  font-size: 14px;
  font-weight: 500;
}

/* --- tarjeta de subir factura (#467) ------------------------------------- */

.facturar {
  background: var(--placa);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.facturar h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }

.facturar-nota { color: var(--tenue); font-size: 13px; margin: 0; }

.archivos {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.campo-archivo-grupo { flex: 1 1 240px; min-width: 0; }

.campo-archivo { width: 100%; font-size: 14px; color: var(--tenue); }

/* El botón nativo del campo de archivo, con la pinta discreta del portal. */
.campo-archivo::file-selector-button {
  font: inherit;
  font-size: 13px;
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--placa);
  color: var(--tinta);
  cursor: pointer;
}

.campo-archivo::file-selector-button:hover { border-color: var(--acento); }

.facturar .boton { margin-top: 14px; }

.revisando { margin: 12px 0 0; font-size: 13px; color: var(--tenue); }

/* --- la lista de revisión: lo memorable de la tarjeta -------------------- */

.revision {
  margin-top: 14px;
  border-top: 1px solid var(--linea);
  padding-top: 13px;
}

.veredicto { margin: 0 0 10px; font-size: 15px; font-weight: 500; }

.revision-buena .veredicto { color: var(--acento); }
.revision-mala .veredicto { color: var(--alerta); }

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

.revision-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 3px 0;
  font-size: 14px;
}

/* El ancho fijo mantiene los mensajes alineados, que es como se leen de un tirón. */
.marca-check { flex: none; width: 12px; text-align: center; font-weight: 600; }

.revision-item-ok .marca-check { color: var(--acento); }
.revision-item-no .marca-check { color: var(--alerta); }
.revision-item-sin-verificar, .revision-item-sin-verificar .marca-check { color: var(--tenue); }

.revision-aviso { color: var(--alerta); }

/* --- facturas de la OC ---------------------------------------------------- */

.vacio-chico { padding: 22px 20px; }

/* Los motivos del cuadre (#468): por partida, en lenguaje de proveedor y en tenue para
   que no compitan con el chip de estado. */
.motivos {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--tenue);
}

.motivos li { margin: 2px 0; }

/* Las partidas registradas (#468): de qué base salió cada una, también en tenue. */
.partidas-factura {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--tenue);
}

.partidas-factura li { margin: 2px 0; }

.motivo-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tenue);
  overflow-wrap: anywhere;
}

.reintentar { display: inline-block; margin-top: 6px; }

/* Estatus y pagos (#469): el resumen y los pagos de una factura, en tenue para que el
   chip del estado siga siendo lo primero que se ve. */
.nota-lista { color: var(--tenue); font-size: 13px; margin: 0 0 14px; }
.doc-b1 { display: block; color: var(--tenue); font-size: 12px; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.pago-resumen { margin: 2px 0 4px; font-size: 13px; }
.pago-resumen-tenue { color: var(--tenue); }
.pagos-lista { margin: 0; padding: 0; list-style: none; color: var(--tenue); font-size: 13px; }
.pagos-lista li { margin: 2px 0; }
.celda-pago { min-width: 190px; }

/* --- móvil (448 px) ------------------------------------------------------ */

@media (max-width: 700px) {
  body { font-size: 14px; }
  .barra-interior, .contenido { padding-left: 14px; padding-right: 14px; }
  .contenido { padding-top: 18px; }

  /* La barra superior tiene que caber en 448 px: el nombre del proveedor se recorta
     antes que empujar la página a lo ancho. */
  .barra-interior { gap: 10px; }
  .marca-texto { font-size: 14px; }
  .usuario { font-size: 13px; min-width: 0; gap: 6px; }
  .usuario strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* La tabla se vuelve una lista de tarjetas. */
  .tabla-oc { display: none; }
  .lista-oc { display: block; }

  .cabecera-lista { align-items: flex-start; }
  h1 { font-size: 18px; }

  /* El detalle va en una sola columna, con la tarjeta de confirmar arriba de las partidas. */
  /* Las tablas de partidas y de facturas se vuelven listas de tarjetas: en 448 px no
     caben de otra forma. */
  .detalle-partidas, .tabla-facturas { border: 0; background: none; }
  .detalle-partidas thead, .tabla-facturas thead { display: none; }
  .detalle-partidas, .detalle-partidas tbody, .detalle-partidas tr, .detalle-partidas td,
  .tabla-facturas, .tabla-facturas tbody, .tabla-facturas tr, .tabla-facturas td {
    display: block;
    width: 100%;
  }
  .detalle-partidas tr, .tabla-facturas tr {
    background: var(--placa);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .detalle-partidas td, .tabla-facturas td { border: 0; padding: 2px 0; }
  .detalle-partidas td[data-etiqueta]::before,
  .tabla-facturas td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: inline-block;
    min-width: 92px;
    color: var(--tenue);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    margin-right: 8px;
  }
  .detalle-partidas .celda-descripcion { font-weight: 500; }
  .detalle-partidas .celda-descripcion::before { content: none; }

  /* Los dos campos de archivo, cada uno a lo ancho. */
  .campo-archivo-grupo { flex-basis: 100%; }
  .revision-item { font-size: 13px; }
}

/* --- complemento de pago (#470) ------------------------------------------ */

.form-complemento { display: grid; gap: 8px; justify-items: start; }
.complemento-fecha { margin: 2px 0 0; color: var(--tenue); font-size: 13px; }

@media (max-width: 700px) {
  /* El nombre largo de la empresa no puede encimarse con el del proveedor. */
  .barra-pagos .marca-texto { overflow: hidden; text-overflow: ellipsis; }
}