/* =============================================================================
   Fraxis Platform — PX-15 · Modulo Despachos · sistema visual responsive

   NACE MULTIPLATAFORMA, no se adapta despues. La regla de composicion es una
   sola y se aplica en los dos sentidos:

     pantalla angosta  ->  UN panel a la vez (lista, o detalle)
     pantalla ancha    ->  DOS paneles simultaneos (lista + detalle)

   No hay una hoja "movil" y otra "escritorio": hay una rejilla que cambia de
   numero de columnas. Por eso el detalle no es una pagina distinta, sino el
   segundo panel de la misma vista.

   Hereda los tokens de `compartido/estilos/plataforma.css`: aqui NO se define
   ni un color de marca. El unico acento es `--acento`, que fija la paleta
   predefinida de la empresa (regla 66).
   ========================================================================== */

.despachos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Respeta el area segura de los telefonos con notch/barra inferior. */
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* --- Barra superior -------------------------------------------------------- */
.despachos-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.despachos-titulo {
  margin: 0;
  /* Tipografia fluida: una sola declaracion cubre de 360px a 1600px sin saltos. */
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-family: 'Space Grotesk Variable', system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* --- Filtros --------------------------------------------------------------- */
/* En angosto se desplazan en horizontal en vez de apilarse en cuatro lineas y
   empujar la lista fuera de la pantalla. */
.despachos-filtros {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto-2);
  border-radius: 999px;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  /* 44px es el objetivo tactil minimo comodo; en escritorio no estorba. */
  min-height: 44px;
}

.chip:hover { border-color: var(--linea-fuerte); }
.chip:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.chip-activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* --- Rejilla principal ----------------------------------------------------- */
.despachos-cuerpo {
  display: grid;
  grid-template-columns: 1fr;   /* angosto: una columna */
  gap: 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .despachos-cuerpo {
    grid-template-columns: minmax(20rem, 24rem) 1fr;  /* ancho: dos paneles */
  }
  .despachos-lista { position: sticky; top: 1rem; max-height: calc(100dvh - 8rem); overflow-y: auto; }
  .despachos-cerrar { display: none; }   /* con dos paneles no hay que "volver" */
}

/* En angosto, abrir el detalle oculta la lista: dos paneles en 380px no son
   dos paneles, son dos mitades inservibles. */
@media (max-width: 899px) {
  .despachos-cuerpo:has(.despachos-detalle-abierto) .despachos-lista { display: none; }
  /* PX-17: "un panel a la vez" incluye los controles del panel de lista. Con
     el detalle abierto, el titulo de la bandeja, sus botones, los chips y el
     selector de transportista se ocultan tambien: el detalle empieza arriba,
     no a media pantalla, y "Volver a la lista" los trae de vuelta. */
  .despachos-vista-bandeja:has(.despachos-detalle-abierto) > :not(.despachos-cuerpo) { display: none; }
}

/* PX-17: cada vista separa sus filas de controles. Sin esto los botones de la
   barra y los chips de filtro se tocaban (0 px): un toque impreciso caia en
   el vecino. */
.despachos-vista-bandeja, .despachos-vista-crear, .despachos-vista-transportistas { display: flex; flex-direction: column; gap: .75rem; }
.despachos-vista-bandeja .despachos-filtros { padding-bottom: .25rem; }
.despachos-vista-transportistas > .detalle-nota { margin: 0; }

@media (max-width: 640px) {
  .despachos { gap: .75rem; }
}

/* PX-17: telefono apaisado (alto corto). La cabecera del Hub ya no es fija;
   aqui se compacta el aire del modulo para que la lista asome cuanto antes. */
@media (max-height: 500px) {
  .despachos, .despachos-vista-bandeja, .despachos-vista-crear, .despachos-vista-transportistas { gap: .5rem; }
  .despachos-titulo { font-size: 1.2rem; }
  .despachos-nav-enlace { padding-block: .5rem; min-height: 40px; }
  .despachos-conteo { margin-bottom: .25rem; }
}

/* --- Tarjetas de la bandeja ------------------------------------------------ */
.despachos-conteo { margin: 0 0 .5rem; color: var(--texto-3); font-size: .85rem; }

.despachos-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.despacho-tarjeta {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  padding: .85rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}

.despacho-tarjeta:hover { border-color: var(--linea-fuerte); }
.despacho-tarjeta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.despacho-tarjeta-activa {
  border-color: var(--acento);
  box-shadow: inset 3px 0 0 var(--acento);
}

.despacho-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.despacho-ref { font-weight: 650; overflow-wrap: anywhere; }
.despacho-comprador { color: var(--texto-2); font-size: .9rem; overflow-wrap: anywhere; }
.despacho-direccion { color: var(--texto-3); font-size: .82rem; overflow-wrap: anywhere; }
.despacho-pie { display: flex; flex-wrap: wrap; gap: .75rem; }
.despacho-meta { color: var(--texto-3); font-size: .78rem; }

/* --- Insignias de estado --------------------------------------------------- */
/* Los semanticos NO son personalizables: un estado significa lo mismo en todas
   las empresas, asi que no salen de la paleta de marca. */
.insignia {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.insignia[data-estado="pendiente"]         { background: #eef2f8; color: #44546f; border-color: #dfe5ee; }
.insignia[data-estado="en_preparacion"]    { background: #fff8e8; color: #8a5300; border-color: #f0e0bc; }
.insignia[data-estado="listo_para_enviar"] { background: #e8f4ff; color: #1f6feb; border-color: #cfe4fb; }
.insignia[data-estado="en_transito"]       { background: #eef0ff; color: #4526ad; border-color: #dcdcfb; }
.insignia[data-estado="entregado"]         { background: #e6f7f2; color: #0b7a6b; border-color: #c8ece1; }
.insignia[data-estado="con_problema"]      { background: #fff1f4; color: #b3123c; border-color: #f7d0da; }
.insignia[data-estado="cancelado"]         { background: #f2f4f7; color: #4b5768; border-color: #e2e6ec; } /* 4.5:1 sobre su fondo (PX-17) */

/* --- Detalle ---------------------------------------------------------------- */
.despachos-detalle { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.despachos-cerrar { align-self: flex-start; }

.detalle-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--linea);
}

.detalle-titulo {
  margin: 0;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem);
  font-family: 'Space Grotesk Variable', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.detalle-bloque {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  padding: .9rem;
  min-width: 0;
}

.detalle-bloque h3 {
  margin: 0 0 .6rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}

/* Etiqueta sobre valor en angosto; dos columnas en cuanto hay sitio. */
.detalle-datos { display: grid; grid-template-columns: 1fr; gap: .1rem .9rem; margin: 0; }

@media (min-width: 520px) {
  .detalle-datos { grid-template-columns: minmax(7rem, auto) 1fr; }
}

.detalle-datos dt { color: var(--texto-3); font-size: .8rem; }
.detalle-datos dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.detalle-vacio { color: var(--texto-3); font-style: italic; margin: 0; }
.detalle-nota { color: var(--texto-3); font-size: .78rem; margin: .5rem 0 0; }

/* Una tabla no se "hace responsive": se le da su propio scroll para que la
   pagina nunca se desplace en horizontal. */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.detalle-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 24rem; }
.detalle-tabla th, .detalle-tabla td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linea); }
.detalle-tabla th { color: var(--texto-3); font-weight: 600; font-size: .78rem; }
/* La celda de cantidad hereda el tamano de la tabla (13.8 px): iOS hace zoom
   al enfocar un control menor de 16 px. Se fija en 1rem. */
.detalle-tabla .entrada-cantidad { font-size: 1rem; }
.detalle-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Acciones --------------------------------------------------------------- */
.acciones-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.acciones-fila .boton { flex: 1 1 auto; min-height: 44px; }

@media (min-width: 640px) { .acciones-fila .boton { flex: 0 0 auto; } }

.detalle-bloqueado {
  margin: 0; color: var(--texto-2); background: var(--lienzo-2);
  border-left: 3px solid var(--linea-fuerte); padding: .6rem .75rem; border-radius: var(--radio-s);
}

.detalle-resultado { margin: .7rem 0 0; padding: .6rem .75rem; border-radius: var(--radio-s); font-size: .9rem; }
.detalle-resultado-ok { background: #e6f7f2; color: #0b7a6b; }
.detalle-resultado-error { background: var(--peligro-fondo); color: var(--peligro); }

/* --- Bitacora ---------------------------------------------------------------- */
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bitacora-item { border-left: 2px solid var(--linea); padding-left: .7rem; }
.bitacora-cabecera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.bitacora-tipo { font-weight: 600; font-size: .84rem; }
.bitacora-fecha { color: var(--texto-3); font-size: .78rem; }
.bitacora-transicion { display: block; color: var(--texto-2); font-size: .82rem; }
.bitacora-comentario { margin: .2rem 0 0; color: var(--texto-2); font-size: .85rem; overflow-wrap: anywhere; }

/* --- Estados de carga y aviso ------------------------------------------------ */
.despachos-cargando { color: var(--texto-3); margin: 0; }

.despachos-aviso {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio-m); padding: .9rem;
}
.despachos-aviso p { margin: .35rem 0 0; color: var(--texto-2); }
.despachos-aviso-error { border-color: #f7d0da; background: var(--peligro-fondo); }
.despachos-aviso-error strong { color: var(--peligro); }

@media (prefers-reduced-motion: reduce) {
  .chip, .despacho-tarjeta { transition: none; }
}

/* Entorno declarado por el backend. Solo se pinta cuando NO es produccion:
   saber que se esta operando sobre QA evita el error mas caro de todos. */
.despachos-entorno {
  align-self: center;
  border: 1px solid var(--aviso);
  color: var(--aviso);
  background: var(--aviso-fondo);
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* =============================================================================
   PX-16 · paridad funcional: navegacion interna, formularios, documentos,
   conversacion y dialogos. Mismos tokens; ningun color de marca nuevo.
   ========================================================================== */

/* Botones que el modulo usa y la hoja compartida no define. */
.boton-primario { background: var(--acento); color: #fff; width: auto; }
.boton-primario:hover:not([disabled]) { background: var(--acento-fuerte); }
.boton-peligro { background: var(--peligro); color: #fff; width: auto; }
.boton-peligro:hover:not([disabled]) { filter: brightness(.92); }
.boton-compacto { min-height: 2.5rem; padding: .45rem 1rem; font-size: .9rem; width: auto; }
.boton-peligro-suave { color: var(--peligro); border-color: #f7d0da; }

/* --- Navegacion interna del modulo ------------------------------------------ */
.despachos-nav {
  display: flex; gap: .5rem; overflow-x: auto; border-bottom: 1px solid var(--linea);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.despachos-nav-enlace {
  flex: 0 0 auto; padding: .7rem .9rem; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--texto-2); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; font-size: .92rem;
}
.despachos-nav-enlace:hover { color: var(--texto); }
.despachos-nav-enlace[aria-current="page"] { color: var(--acento); border-bottom-color: var(--acento); }
.despachos-nav-enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.despachos-subtitulo {
  margin: 0; font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-family: 'Space Grotesk Variable', system-ui, sans-serif; letter-spacing: -.01em;
}
.despachos-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* --- Filtro por operador ----------------------------------------------------- */
.despachos-operador-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.despachos-operador-etiqueta { color: var(--texto-3); font-size: .85rem; }
.despachos-operador {
  min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s);
  background: var(--panel); font: inherit; color: inherit; max-width: 100%;
}
.despacho-transporte { font-weight: 600; color: var(--texto-2); }
.insignia-origen { background: var(--aviso-fondo); color: var(--aviso); border-color: #f0e0bc; }

/* --- Formularios del modulo -------------------------------------------------- */
.formulario-rejilla { display: grid; grid-template-columns: 1fr; gap: .2rem .9rem; align-items: end; }
@media (min-width: 640px) { .formulario-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .despachos-vista-crear .formulario-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formulario-rejilla > .boton, .formulario-rejilla > .acciones-fila, .formulario-rejilla > .subtitulo-form,
.formulario-rejilla > .despachos-aviso, .formulario-rejilla > .detalle-resultado, .formulario-rejilla > .items-edicion { grid-column: 1 / -1; }
/* PX-17: un boton suelto en la rejilla (p. ej. «Agregar producto») quedaba a
   3 px de la fila de acciones; se separa como objetivo tactil. */
.formulario-rejilla > .boton { margin-block: .3rem; }
.formulario-rejilla > .acciones-fila { margin-top: .3rem; }
.campo-modulo { margin-bottom: .8rem; min-width: 0; }
.campo-modulo select, .campo-modulo textarea, .campo-modulo input[type="file"] {
  width: 100%; min-height: 3rem; padding: .6rem .8rem; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-s); background: var(--panel-2); font: inherit; color: inherit;
}
.campo-modulo textarea { min-height: 4.5rem; resize: vertical; }
.campo-modulo select:focus, .campo-modulo textarea:focus, .campo-modulo input:focus {
  background: var(--panel); border-color: var(--acento); box-shadow: 0 0 0 3px rgb(31 111 235 / 18%); outline: none;
}
.campo-modulo input[readonly], .campo-modulo input[disabled], .campo-modulo select[disabled] { background: var(--lienzo-2); color: var(--texto-2); }
.campo-modulo[hidden] { display: none; }
.subtitulo-form { margin: .6rem 0 .3rem; font-size: .85rem; color: var(--texto-2); font-weight: 650; }
.lista-errores { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--peligro); }
.lista-errores li { margin: .15rem 0; }
.interruptor { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-bottom: .6rem; cursor: pointer; }
.interruptor input { width: 1.3rem; height: 1.3rem; accent-color: var(--acento); }

/* Filas de items / documentos pendientes: una columna en angosto, en linea en ancho. */
.items-edicion { display: grid; gap: .6rem; margin: .4rem 0; }
.item-fila {
  display: grid; grid-template-columns: 1fr; gap: .2rem .6rem; align-items: end;
  padding: .6rem; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--lienzo-2);
}
.item-fila .campo-modulo { margin-bottom: .3rem; }
@media (min-width: 720px) { .item-fila { grid-template-columns: minmax(7rem, 1fr) minmax(5rem, .6fr) minmax(9rem, 2fr) auto; } }
.item-fila .boton { margin-bottom: .3rem; }

.resultados-busqueda { list-style: none; margin: -.4rem 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.resultado-busqueda {
  width: 100%; text-align: left; padding: .6rem .8rem; min-height: 44px; border: 1px solid var(--linea);
  border-radius: var(--radio-s); background: var(--panel); font: inherit; color: inherit; cursor: pointer;
}
.resultado-busqueda:hover { border-color: var(--acento); }
.resultado-busqueda:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cliente-seleccionado {
  border-left: 3px solid var(--acento); background: var(--lienzo-2); padding: .6rem .8rem;
  border-radius: var(--radio-s); margin-bottom: .8rem; display: grid; gap: .4rem;
}
.crear-seccion { margin-bottom: .9rem; }
.crear-pie { display: grid; gap: .6rem; padding-bottom: 1rem; }
.crear-resultado { display: grid; gap: .5rem; }
.lista-adjuntos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.adjunto { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; }
.adjunto-invalido { color: var(--peligro); }

/* --- Detalle: acciones rapidas, compartir, documentos, conversacion ---------- */
.detalle-rapidas { display: grid; gap: .6rem; }
.compartir-previa {
  margin: 0; padding: .8rem; background: var(--lienzo-2); border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-s); font: .84rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto;
}
.celda-accion { white-space: nowrap; }
.entrada-cantidad { width: 5rem; min-height: 2.5rem; padding: .3rem .5rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); font: inherit; margin-right: .5rem; }
.documentos, .transportistas-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.documento-item, .transportista-item {
  display: grid; gap: .35rem; padding: .7rem; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--lienzo-2);
}
.documento-cabecera, .transportista-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* Texto secundario sobre --lienzo-2: --texto-3 no alcanza 4.5:1 (WCAG AA). */
.documento-item .despacho-meta, .transportista-item .despacho-meta, .transportista-item .detalle-nota,
.mensaje .bitacora-fecha, .item-fila .ayuda, .cliente-seleccionado .detalle-nota, .detalle-bloqueado { color: var(--texto-2); }
/* Tachado con --texto-2: --texto-3 sobre --lienzo-2 no llega a 4.5:1 (axe). */
.documento-item[data-estado="anulado"] strong, .transportista-item[data-activo="false"] .transportista-nombre { color: var(--texto-2); text-decoration: line-through; }
.enlace-descarga { color: var(--acento); font-weight: 600; }
.conversacion { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.mensaje { padding: .6rem .8rem; border-radius: var(--radio-s); background: var(--lienzo-2); border: 1px solid var(--linea); max-width: 46rem; }
.mensaje-propio { border-color: var(--acento); border-left-width: 3px; }
.mensaje-texto { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversacion-form { display: grid; gap: .4rem; }
.despachos-vista-transportistas .transportistas-cuerpo { display: grid; gap: .9rem; }
.detalle-edicion { border-color: var(--acento); }
.detalle-eliminacion { border-color: #f7d0da; }
.despachos-vista { min-width: 0; }

/* --- Dialogo de confirmacion -------------------------------------------------- */
.despachos-dialogo {
  border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 1.2rem; max-width: min(92vw, 28rem);
  background: var(--panel); color: var(--texto); box-shadow: var(--sombra-panel);
}
.despachos-dialogo::backdrop { background: rgb(12 23 42 / 45%); }
.dialogo-titulo { margin: 0 0 .5rem; font-size: 1.1rem; font-family: 'Space Grotesk Variable', system-ui, sans-serif; }
.despachos-dialogo p { margin: 0 0 1rem; color: var(--texto-2); }
.despachos-dialogo .acciones-fila { justify-content: flex-end; }

/* Un input de archivo dentro de una etiqueta-boton: accesible y sin salir de la CSP. */
.boton input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.boton:has(input[type="file"]) { position: relative; cursor: pointer; }
.boton:has(input[type="file"]:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }