/* ===========================================================================
   Panel del proveedor — lenguaje visual ASISTPRO (neutro, tipo GPT).

   Dos trabajos en un archivo:

   1. VESTIR el panel de Mercur con nuestro lenguaje: escala de grises, bordes
      finos, esquinas casi cuadradas. Sin verdes ni rojos de semáforo: el
      estado se distingue por el TONO del gris y el peso del texto, no por el
      color. Aplica en todas las pantallas.

   2. HACER USABLE el teléfono: los listados de Mercur son tablas de 6-8
      columnas pensadas para escritorio. Bajo 768 px cada fila se vuelve una
      ficha legible de una pasada. Las etiquetas las pone `movil.js` en
      `data-etq`, leyéndolas del encabezado real de la tabla.

   REGLA DE ORO
   Solo se tocan elementos marcados explícitamente por `movil.js` a partir de
   una tabla con encabezados, o seleccionados por su DOM concreto. Nada de
   adivinar contenedores por su forma: un intento anterior marcaba «cualquier
   fila con 3+ hijos que muestren cifras» y terminó marcando el contenedor del
   layout entero, empujando el panel a x=418 — la pantalla se veía vacía.
   =========================================================================== */

:root {
  /* Tinta */
  --ap-tinta: #0d0d0d;        /* texto principal */
  --ap-tinta-2: #5d5d6b;      /* etiquetas, texto secundario */
  --ap-tinta-3: #8e8ea0;      /* apoyo, marcas de agua */
  /* Superficies */
  --ap-papel: #ffffff;        /* tarjetas y contenedores */
  --ap-fondo: #f7f7f8;        /* lienzo detrás de las tarjetas */
  --ap-suave: #f0f0f3;        /* chips, campos, estados en reposo */
  /* Trazos */
  --ap-borde: #e5e5e7;
  --ap-borde-fuerte: #d3d3d8;
  /* Esquinas: casi cuadradas, nunca pastilla */
  --ap-r-ficha: 12px;
  --ap-r-boton: 8px;
  --ap-r-chip: 6px;
}

/* ---------------------------------------------------------------------------
   1. Vestido general (todas las pantallas)
   ------------------------------------------------------------------------- */

/* Los estados de Mercur vienen en verde/rojo/naranja/azul de semáforo. Se
   pasan a grises: lo que distingue un estado es el tono y el peso, no el
   color. Se ataca por la clase del componente, que es estable, y no por el
   color calculado. */
/* El fondo se toca SOLO en lo que de verdad es un chip (`bg-ui-tag-…`). Una
   versión anterior usaba `[class*="tag-orange"]`, que también engancha el
   `text-ui-tag-orange-text` de una cifra suelta y le pintaba un recuadro gris
   detrás —así quedaron los montos de Mi saldo. */
[class*="bg-ui-tag-"]:not([class*="-icon"]) {
  background-color: var(--ap-suave) !important;
  border-color: var(--ap-borde) !important;
}
/* El punto de dentro queda fuera: si tambien se le aplica el gris del chip, se
   vuelve indistinguible y encima `movil.js` lo da por neutralizado —lo mide por
   saturacion— y ya no puede separar «resuelto» de «pendiente». */
/* El color de texto sí se neutraliza en cualquier parte: dentro de un chip o
   en una cifra suelta como «Pendiente de pago». */
[class*="text-ui-tag-"],
[class*="bg-ui-tag-"] * {
  color: var(--ap-tinta) !important;
}
/* El punto de estado que va junto a «Capturado». Se le cambia SOLO el color,
   sin tocar caja ni borde: una version anterior pintaba de negro el elemento
   que lo contiene y el punto de color quedaba dentro, con aspecto de boton
   rojo con borde extrano. Relleno para lo resuelto, hueco para lo pendiente. */
span[class*="bg-ui-tag-green-icon"] { background-color: var(--ap-tinta) !important; }
span[class*="bg-ui-tag-red-icon"],
span[class*="bg-ui-tag-orange-icon"],
span[class*="bg-ui-tag-blue-icon"] {
  /* Hueco con contorno: se distingue de un vistazo del relleno de «resuelto»
     sin recurrir al rojo. */
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--ap-tinta-2) !important;
}

/* Mensajes de error del formulario: a tinta, el peso ya los distingue. */
[class*="text-ui-fg-error"] { color: var(--ap-tinta) !important; }

/* Esquinas: el panel mezcla 4, 6 y 999 px. Se unifica a casi cuadradas. */
button,
[role="button"],
input,
select,
textarea { border-radius: var(--ap-r-boton) !important; }
[class*="rounded-full"]:not([class*="h-2"]):not([class*="w-2"]):not([class*="size-2"]) {
  border-radius: var(--ap-r-chip) !important;
}
/* Salvo lo que es de verdad un círculo: avatares e indicadores redondos. */
img[class*="rounded-full"],
[class*="rounded-full"][class*="size-"],
span[class*="rounded-full"][style*="border-radius"] { border-radius: 999px !important; }

/* Los enlaces de accion venian en el azul de sistema de Medusa
   («Ver reservas →»). En este lenguaje el enfasis lo da el peso, no el color. */
[class*="text-ui-fg-interactive"] { color: var(--ap-tinta) !important; font-weight: 500; }

/* Boton principal: negro macizo, texto blanco, esquinas casi cuadradas y sin
   degradado ni sombra de color. */
button[class*="bg-ui-button-inverted"],
button[class*="bg-ui-bg-interactive"],
a[class*="bg-ui-button-inverted"] {
  background: var(--ap-tinta) !important;
  border-color: var(--ap-tinta) !important;
  box-shadow: none !important;
}
button[class*="bg-ui-button-inverted"],
button[class*="bg-ui-button-inverted"] *,
button[class*="bg-ui-bg-interactive"],
button[class*="bg-ui-bg-interactive"] *,
a[class*="bg-ui-button-inverted"] * { color: #ffffff !important; }

/* Contraste del lienzo. El panel pinta casi todo del mismo blanco y las
   tarjetas se pierden: no se distingue donde empieza cada bloque. El lienzo
   pasa a gris muy claro y las tarjetas quedan blancas con un trazo fino
   —sin sombra— para que se lean como piezas separadas. */
body { background-color: var(--ap-fondo) !important; }
[class*="shadow-elevation-card"] {
  background-color: var(--ap-papel) !important;
  border: 1px solid var(--ap-borde) !important;
  box-shadow: none !important;
  border-radius: var(--ap-r-ficha) !important;
}

/* ---------------------------------------------------------------------------
   2. El teléfono
   ------------------------------------------------------------------------- */

/* El panel no se amplia en el telefono: es decision de producto, para que la
   vista quede fija y no se descuadre al tocar un campo. El bloqueo real va en
   el <meta viewport> del index; aqui se acompana con lo demas que hace falta
   para que no haga falta ampliar.

   Los campos igual llevan 16 px: por debajo de eso iOS amplia solo al tocarlos,
   incluso con el zoom bloqueado, y deja la pantalla corrida. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
  /* Nada se sale de lo ancho: sin esto, bloquear el zoom deja contenido
     inalcanzable en vez de solo incomodo. */
  html, body { max-width: 100%; overflow-x: hidden; }
}

@media (max-width: 767px) {
  /* --- Encabezado de sección ------------------------------------------- */
  /* Título y bajada a la izquierda, chips de resumen a la derecha, todo en una
     fila que en escritorio no envuelve. En 390 px los chips se montaban ENCIMA
     del texto y el último se salía por el borde. Aquí bajan a su propia línea
     y envuelven entre ellos. */
  div.flex.items-center.justify-between.px-6.py-4 {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  div.flex.items-center.justify-between.px-6.py-4 > div.flex.gap-2 {
    flex-wrap: wrap;
    width: 100%;
  }
  div.flex.items-center.justify-between.px-6.py-4 > * { min-width: 0; }


  /* --- Listados: de tabla a fichas ------------------------------------- */
  table[data-movil="tarjetas"] {
    display: block;
    width: 100%;
    min-width: 0 !important;
    overflow-x: visible;
  }
  table[data-movil="tarjetas"] thead { display: none; }
  table[data-movil="tarjetas"] tbody { display: block; width: 100%; }

  /* Cada fila es una ficha con aire propio, separada de la siguiente por una
     línea fina. Sin fondos alternos: el ritmo lo da el espacio. */
  table[data-movil="tarjetas"] tbody tr {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: var(--ap-papel);
    border-bottom: 1px solid var(--ap-borde);
  }
  table[data-movil="tarjetas"] tbody tr:last-child { border-bottom: 0; }

  /* Cada dato, una línea: etiqueta a la izquierda, valor pegado a ella.
     Ambos alineados a la izquierda —con el valor a la derecha, los textos
     largos se partían y quedaban escalonados, que es lo que hacía ilegible
     Reservas. */
  table[data-movil="tarjetas"] tbody td {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: auto !important;
    max-width: none !important;
    /* La celda trae altura fija de fila (48 px) de escritorio: en la ficha
       cada dato ocupa lo suyo. */
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 13.5px;
    /* Cuando la celda trae dos datos (fecha + franja horaria) y no caben
       juntos, el segundo baja entero en vez de partir al primero por la mitad
       («2026-08-» / «06»). */
    flex-wrap: wrap;
  }

  table[data-movil="tarjetas"] tbody td::before {
    content: attr(data-etq);
    flex: 0 0 34%;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--ap-tinta-2);
  }
  /* Celdas sin encabezado (casillas, menú de acciones): sin etiqueta hueca, y
     su control se va al borde derecho. */
  table[data-movil="tarjetas"] tbody td[data-etq=""]::before { content: none; }
  table[data-movil="tarjetas"] tbody td[data-etq=""] { justify-content: flex-end; }

  /* La primera columna identifica la ficha: se lee como su título, a lo ancho
     y sin etiqueta delante. */
  table[data-movil="tarjetas"] tbody td[data-primera="1"] {
    display: block;
    padding-bottom: 10px !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--ap-tinta);
    line-height: 1.35;
  }
  table[data-movil="tarjetas"] tbody td[data-primera="1"]::before { content: none; }
  table[data-movil="tarjetas"] tbody td[data-primera="1"] > a { min-height: 32px; }

  /* El enlace de la celda ocupa el espacio del valor: tocar en cualquier
     punto de esa línea abre el detalle, no solo sobre el texto. */
  table[data-movil="tarjetas"] tbody td > a {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  table[data-movil="tarjetas"] tbody td > * { min-width: 0; max-width: 100%; }

  /* Dentro de cada celda, el panel envuelve el contenido en un div que trae el
     padding lateral de la tabla de escritorio (24 px a cada lado) y lo alinea
     al centro o a la derecha según la columna. En la ficha eso desalineaba el
     título y mandaba los importes al borde opuesto al de sus etiquetas. */
  table[data-movil="tarjetas"] tbody td [class*="ps-6"],
  table[data-movil="tarjetas"] tbody td [class*="pe-6"],
  table[data-movil="tarjetas"] tbody td [class*="px-6"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* La alineación de columna (importes a la derecha) vive en un div interno,
     a veces dos niveles adentro: en la ficha el valor va bajo su etiqueta, no
     contra el borde opuesto. */
  table[data-movil="tarjetas"] tbody td > *,
  table[data-movil="tarjetas"] tbody td [class*="justify-end"],
  table[data-movil="tarjetas"] tbody td [class*="text-right"] {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* El identificador viene con el estilo de «texto secundario compacto» de la
     tabla (13 px, gris, peso normal): dentro de la ficha es el título. */
  table[data-movil="tarjetas"] tbody td[data-primera="1"] *:not([data-ap-articulo]) {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ap-tinta) !important;
  }
  /* Lo que se compro va bajo el numero, como apoyo: no compite con el. */
  table[data-movil="tarjetas"] tbody td[data-primera="1"] [data-ap-articulo] {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--ap-tinta-2) !important;
  }

  /* El recorte con puntos suspensivos es de la columna estrecha de escritorio:
     en la ficha hay ancho de sobra. Va a todos los descendientes porque el
     `truncate` suele estar dos niveles adentro. */
  table[data-movil="tarjetas"] tbody td * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* Un correo largo no tiene espacios donde cortar: sin esto se sale de la
       ficha en vez de pasar a la línea siguiente. `break-word` y no `anywhere`
       porque este último parte también lo que sí cabe: «2026-08-06» se leía
       como «2026-08-» / «06». */
    overflow-wrap: break-word;
  }

  /* --- Barra de herramientas del listado -------------------------------- */
  button { white-space: nowrap; }
  /* El buscador trae ancho fijo de escritorio y, sumado al botón de filtros,
     empujaba el de ordenar fuera de la pantalla. Aquí cede él. */
  input[placeholder] { width: 100% !important; min-width: 0 !important; }
  div:has(> input[placeholder]) { min-width: 0; }
  div:has(input[placeholder]) { flex-shrink: 1 !important; min-width: 0 !important; }

  /* --- Indicadores de cifras (Mi saldo, Reservas) ----------------------- */
  /* Venían en una fila de cuatro y el último quedaba cortado por el borde.
     Pasan a dos por línea, con línea divisoria completa entre filas: antes
     los bordes quedaban a medias y parecían tarjetas rotas. */
  div:has(> div.flex-1.px-6.py-4) { flex-wrap: wrap; }
  div.flex-1.px-6.py-4 {
    flex: 1 1 50% !important;
    border-bottom: 1px solid var(--ap-borde);
  }

  /* --- Detalle del pedido: la linea del articulo ------------------------ */
  /* Precio, cantidad y total van en una rejilla de tres columnas que aqui
     queda en 150 px de ancho. El sello de estado («Asignado») mide 80 px, se
     desborda de su columna y se dibuja ENCIMA del total: se leia
     «$2Asignado». Con el ancho completo cada dato recupera su sitio. */
  div:has(> div.grid.grid-cols-3.items-center) {
    flex-wrap: wrap;
    /* Sin esto el bloque del titulo impone su ancho minimo y la fila entera
       empuja hacia afuera de la pantalla. */
    min-width: 0;
  }
  div.grid.grid-cols-3.items-center {
    /* `flex-basis: 100%` la baja a su propia linea; el ancho lo pone el
       contenedor. Fijar `width: 100%` ademas la hacia MAS ancha que su sitio
       —el padre ya tiene padding— y el ultimo importe se salia por la derecha. */
    flex: 1 0 100%;
    min-width: 0;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    justify-items: start;
    padding-top: 6px;
  }
  div.grid.grid-cols-3.items-center > * { min-width: 0; }
  div.grid.grid-cols-3.items-center > *:last-child { justify-self: end; }

  /* Variante encontrada 11-ago-2026: en el detalle del pedido la fila del
     artículo NO cuelga de un flex — vive dentro de OTRO grid de 2 columnas
     (miniatura+título | precio/cantidad/total). El fix de arriba nunca se
     disparaba ahí (su `:has(> div.grid...)` esperaba un padre flex), así
     que la sub-grilla de 3 columnas seguía apretada en ~150 px y el sello
     de estado se dibujaba encima del total. Se apila la grilla de 2 en una
     sola columna: cada bloque pasa a ocupar la fila completa. */
  div.grid.grid-cols-2.items-center.gap-x-4 {
    grid-template-columns: 1fr !important;
    row-gap: 10px;
  }

  /* --- Formularios ------------------------------------------------------ */
  /* Los campos de alta (Técnicos, Zonas) quedan a lo ancho y con el mismo
     trazo que el resto. */
  form input, form select, form textarea { width: 100%; }
}

/* ---------------------------------------------------------------------------
   3. Orden del menú
   ---------------------------------------------------------------------------
   Mercur va poniendo sus secciones y luego las nuestras por `rank`, así que
   «Inicio» caía en medio de la lista y lo del mismo tema quedaba disperso:
   Reservas lejos de Agenda, Mi saldo lejos de Pagos.

   El nav es una columna flex, así que se reordena entero con `order` sin
   tocar el paquete. El criterio es el día del proveedor: primero lo que pide
   respuesta hoy, después cómo se ejecuta, luego la relación con el cliente,
   el catálogo, y al final la plata.

   Los encabezados de grupo van como `::before` del primer ítem de cada bloque
   —no hay dónde insertar un elemento propio sin tocar el paquete— y se ocultan
   cuando la barra está colapsada.
   ------------------------------------------------------------------------- */

nav:has(a[href*="/seller/"]) > div { order: 50; }

/* Buscar: siempre arriba del todo. */
nav:has(a[href*="/seller/"]) > div:not(:has(a[href*="/seller/"])) { order: 0; }

nav > div:has(a[href$="/seller/inicio"])       { order: 1; }

/* Tu día: lo que hay que atender */
nav > div:has(a[href$="/seller/orders"])       { order: 10; }
nav > div:has(a[href$="/seller/reservas"])     { order: 11; }
nav > div:has(a[href$="/seller/solicitudes"])  { order: 12; }
nav > div:has(a[href$="/seller/presupuestos"]) { order: 13; }

/* En terreno: con qué y quién se cumple */
nav > div:has(a[href$="/seller/agenda"])       { order: 20; }
nav > div:has(a[href$="/seller/tecnicos"])     { order: 21; }
nav > div:has(a[href$="/seller/zonas"])        { order: 22; }
nav > div:has(a[href$="/seller/envios"])       { order: 23; }

/* Clientes: la conversación */
nav > div:has(a[href$="/seller/mensajes"])     { order: 30; }
nav > div:has(a[href$="/seller/preguntas"])    { order: 31; }
nav > div:has(a[href$="/seller/reviews"])      { order: 32; }
nav > div:has(a[href$="/seller/customers"])    { order: 33; }

/* Catálogo: lo que se vende */
nav > div:has(a[href$="/seller/products"])     { order: 40; }
nav > div:has(a[href$="/seller/inventory"])    { order: 41; }
nav > div:has(a[href$="/seller/price-lists"])  { order: 42; }
nav > div:has(a[href$="/seller/promotions"])   { order: 43; }
nav > div:has(a[href$="/seller/drops"])        { order: 44; }

/* Dinero */
nav > div:has(a[href$="/seller/saldo"])        { order: 50; }
nav > div:has(a[href$="/seller/payouts"])      { order: 51; }
nav > div:has(a[href$="/seller/apex"])         { order: 52; }

/* Encabezados de grupo. */
nav > div:has(a[href$="/seller/orders"])::before   { content: "Tu día"; }
nav > div:has(a[href$="/seller/agenda"])::before   { content: "En terreno"; }
nav > div:has(a[href$="/seller/mensajes"])::before { content: "Clientes"; }
nav > div:has(a[href$="/seller/products"])::before { content: "Catálogo"; }
nav > div:has(a[href$="/seller/saldo"])::before    { content: "Dinero"; }

nav > div:has(a[href$="/seller/orders"])::before,
nav > div:has(a[href$="/seller/agenda"])::before,
nav > div:has(a[href$="/seller/mensajes"])::before,
nav > div:has(a[href$="/seller/products"])::before,
nav > div:has(a[href$="/seller/saldo"])::before {
  display: block;
  padding: 14px 8px 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ap-tinta-3);
}

/* En una pantalla táctil no hay puntero que se retire: el fondo del hover se
   queda pegado en la última fila tocada y parece seleccionada. */
@media (hover: none) {
  /* El realce lo pintan clases `hover:` y `group-hover:` en divs internos, no
     el <tr>: hay que apagarlas ahí. */
  table[data-movil="tarjetas"] tbody td [class*="group-hover"],
  table[data-movil="tarjetas"] tbody td [class*="hover:bg"] {
    background-color: transparent !important;
  }
  table[data-movil="tarjetas"] tbody tr:hover { background: var(--ap-papel) !important; }
}

/* ---------------------------------------------------------------------------
   3. Doble-tap zoom (11-ago-2026)
   El pellizco con dos dedos ya no se puede bloquear en iOS moderno pese al
   meta viewport (user-scalable=no / maximum-scale=1) — Apple lo fuerza desde
   iOS 10 por accesibilidad (WCAG 1.4.4), sin excepción por sitio. Lo único
   que sigue siendo controlable por CSS es el doble-tap-para-zoom: se apaga
   acá para que un tap rápido en un botón no dispare el gesto de zoom.
   ------------------------------------------------------------------------- */
html { touch-action: manipulation; }