/* ============================================================================
   Juicy — Dashboard Design System · TABLE (widget / inline)
   ----------------------------------------------------------------------------
   ESTA es la tabla de WIDGETS: una `<table>` de verdad, para bloques inline del
   dashboard (Órdenes recientes, Próximos a caducar).

   EL DS TIENE TRES TABLAS `<table>` REALES — no las mezcles (esta confusión ya
   costó tiempo más de una vez):
     · `.table`         ESTA. Celdas por CLASE (.table__head/.table__cell).
                        Bloques inline del dashboard, pocas filas.
     · `.data_table`    Abajo en ESTE archivo (§Data table). Celdas por ELEMENTO
                        (thead th/tbody td). Tablas dentro de lightboxes/modales.
     · `.archive-table` OTRO archivo (ds/archive.css). Celdas por ELEMENTO. Los
                        listados de archive (checkbox, paginación, acciones de
                        fila), header slate #939FAC. Es una `<table>` REAL, NO divs.
   Cuál usar: juicy-platform docs/05-diseno/02-ds-componentes.md §5.4 (tabla de
   decisión). Galería viva: styleguide/index.html. Ver también nota 1.

   Figma: "Tables" (1:3127). 15 variantes en dos piezas:
     Header Column  Type (Text|Icon)          × Align (Left|Center|Right)  h=45
     Table Column   Type (Text|Action|Badge)  × Align (Left|Center|Right)  h=50

   `Type` no es una variante del componente: es QUÉ metes en la celda. Un badge
   dentro de un td es un `.badge`, y una acción es un `.icon-chip` — los dos ya
   existen. Aquí solo queda la celda: alto, padding, borde, tipografía y alineado.

     <table class="table">
       <thead><tr>
         <th class="table__head">Producto</th>
         <th class="table__head table__head--right">Precio</th>
         <th class="table__head table__head--center"><svg>…</svg></th>
       </tr></thead>
       <tbody><tr>
         <td class="table__cell">Café americano</td>
         <td class="table__cell table__cell--right">$45.00</td>
         <td class="table__cell table__cell--center">
           <button class="icon-chip icon-chip--sm icon-chip--round icon-chip--soft tone-neutral-lv3">…</button>
         </td>
       </tr></tbody>
     </table>
   ============================================================================ */

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

/* `padding-block: 0` no es adorno: th/td traen 1px de padding por defecto del
   navegador, y sin esto el header mide 47 y la celda 53. El alto de Figma manda
   y el contenido se centra — como en el Button. (El `box-sizing: border-box`
   que también hace falta aquí lo da el reset global en `*`.) */
.table__head,
.table__cell {
  padding-block: 0;
  vertical-align: middle;
}

.table__head {
  height: 45px;
  padding-inline: 20px;
  background: var(--surface-sunken);
  color: var(--text-primary);

  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.table__cell {
  height: 50px;
  padding-inline: 20px;
  border-bottom: var(--stroke-thin) solid var(--border-default);
  color: var(--text-primary);

  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}

/* ---- Align --------------------------------------------------------------- */

.table__head--center,
.table__cell--center {
  text-align: center;
}

.table__head--right,
.table__cell--right {
  text-align: right;
}

/* ---- Icono en el header -------------------------------------------------- */

.table__head > i {
  font-size: 18px;
  line-height: 1;
}

.table__head > svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.table__head--center > svg { margin-inline: auto; }
.table__head--right  > svg { margin-inline-start: auto; }

/* ---- Data table: la <table> element-authored de los lightboxes ------------
   MISMA SANGRE que `.table` de arriba, pero AUTORA POR ELEMENTO (th/td pelón),
   como la escribieron ~10 lightboxes: detalle de orden, reembolso, factura,
   resumen y detalle de inventario, historial de timbres. Se queda element-
   authored a propósito: convertir cada celda a `.table__cell` sería tocar ~10
   plantillas y decenas de <td> a mano, justo el churn que la regla 11 castiga.

   Dos cosas cambian respecto a lo que era (main.css, pre-DS), y las dos son
   deuda que este esfuerzo existe para pagar:
     · EL HEADER ERA OSCURO (#939FAC, blanco encima = 2.69:1, reprueba AA). Ese
       gris es el de la ARCHIVE, y estas NO son archive: le tomaron prestado el
       header sin serlo. Ahora es el header CLARO del DS (`--surface-sunken` +
       `--text-primary`, 8.25:1), el mismo que la tabla de widgets. Nota 9.
     · TENÍA ZEBRA + borde exterior. El DS no tiene ninguno de los dos: la fila
       se separa por su `border-bottom`. Zebra fuera (nota 10).
   Es MÁS DENSA que la de widgets (10/12 vs 45/50) porque es tabla de modal, no
   de dashboard — pero comparte paleta, tipografía y tokens. */
.data_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data_table thead th {
  padding: 10px 12px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.data_table tbody td {
  padding: 10px 12px;
  border-bottom: var(--stroke-thin) solid var(--border-default);
  color: var(--text-primary);
  vertical-align: top;
}

/* La lista de atributos del producto bajo su nombre (orden, factura). El valor
   iba en `--info-600` (un alias de main.css); ahora en el primitivo `--blue-600`
   del DS, que es el mismo azul, sin depender de main.css. Nota 11. */
.data_table .product_attributes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  opacity: 0.8;
}

.data_table .product_attributes li {
  padding-left: 5px;
  font-size: 12px;
  line-height: 100%;
}

.data_table .product_attributes li .attribute_value {
  color: var(--blue-600);
  font-weight: 500;
}

/* ---- Data table · variante clave/valor -----------------------------------
   El desglose de costo (inventory-lots.php): NO es una tabla de columnas, es
   pares clave/valor con el `<th>` de fila a la izquierda. Misma familia, otra
   forma. Se tokeniza y se trae al DS para que TODA tabla que no es archive viva
   en un solo sitio; antes traía hex crudos de respaldo (`var(--x, #eee)`). */
.juicy_cost_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.juicy_cost_table th,
.juicy_cost_table td {
  padding: 6px 10px;
  border-bottom: var(--stroke-thin) solid var(--border-default);
  text-align: left;
}

.juicy_cost_table th {
  width: 40%;
  font-weight: 500;
  color: var(--text-secondary);
}

.juicy_cost_table td {
  color: var(--text-primary);
}

.juicy_cost_table .cost_src_note {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Data table · variante columnas: el desglose de la RECETA -------------
   Misma familia que la clave/valor de arriba, pero esta SÍ tiene columnas
   (ingrediente · cantidad · costo unitario · importe), así que el `<th>` vuelve
   a ser encabezado de columna y pierde el 40% de ancho de la otra variante. */
.juicy_recipe_table th {
  width: auto;
}

.juicy_recipe_table thead th {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.juicy_recipe_table tfoot th,
.juicy_recipe_table tfoot td {
  border-bottom: 0;
  border-top: var(--stroke-thin) solid var(--border-default);
  color: var(--text-primary);
}

/* El aire del propio resumen. Venía de `main.css`, y por eso el front lo pintaba 20px más corto:
   esa hoja legacy no la importa nadie en el SPA, a propósito. Se MUEVE, no se copia. Único emisor
   en toda la plataforma: juicy-core (`inventory-lots.php`, `recipe-cost.php`); el Hub no lo usa,
   así que no hay que darle esta capa. */
.juicy_cost_summary {
  margin: 6px 0 14px;
}

/* El título del resumen (`.juicy_cost_summary > h4`) va incluido: es hermano de
   "Desglose de costo" y "Por variación" y tiene que leerse igual, aunque su bloque no
   sea el del desglose. */
.juicy_recipe_cost h4,
.juicy_cost_summary > h4 {
  margin: 18px 0 6px;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.juicy_recipe_cost > .cost_src_note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================================
   NOTAS

   1. SON DOS COMPONENTES DISTINTOS, NO UNA CONTRADICCIÓN (confirmado por el
      dueño 2026-07-16). Medido por píxel sobre los frames:

                              header bg   chip de acción
        DS "Tables" (ESTE)    #E5EAEF     #E5EAEF     <table> real, widgets
        Dashboard · Órdenes   #E5EAEF     #E5EAEF     ✓ usa este
        Dashboard · Caducar   #E5EAEF     —           ✓ usa este
        Archive · Puntos      #939FAC     #00B4BD     OTRO comp. (.archive-table)

      La tabla de las Archive Pages es a propósito distinta: header oscuro,
      acciones cyan, y su propio archivo (ds/archive.css) porque lleva selección,
      orden y acciones en lote. (TAMBIÉN es una `<table>` real, autora por
      elemento — lo de "divs" de una versión previa de esta nota ya NO aplica; se
      migró a `.archive-table`.) NO intentar unificarlas ni meterle una variante
      a ésta: son dos cosas.
      Lo que sí sigue en pie es que la de la Archive tiene texto BLANCO sobre
      #939FAC = 2.69:1, que reprueba AA. Ese es un problema de ESE componente
      (pendiente, va cuando toque Archive Pages), no de éste. Éste da 8.25:1.

   2. MONTSERRAT LIGHT (300) en la celda, y ya NO es un caso aislado: van tres
      (placeholder del Search, número del Spinner, valor de celda). El patrón que
      se dibuja es Light = DATO que se lee, Regular = etiqueta, Medium = acción.
      Ojo con la excepción: el input del Text Field es Regular 12, no Light.
      Si el patrón es a propósito, vale la pena nombrarlo en el Figma.

   3. La celda (13px) es MÁS GRANDE que su header (12px). Poco común — el header
      suele ser igual o menor, no al revés. Transcrito.

   4. El chip de acción es fondo `neutral/200` con icono `neutral/300`, que es
      exactamente --tone-soft + --tone-on-soft de neutral-lv3. Pero la sección
      icon-chips NO tiene variante Soft (solo Fill|outline|single): está dibujado
      a mano. Añadí `.icon-chip--soft` — falta la variante en Figma.
      Contraste del icono contra su chip: 2.69:1. Es un menú de tres puntos; la
      afordancia se apoya en el círculo, no en el glifo.

   5. `Type=Badge` no necesita CSS: un badge en una celda es un `.badge`. Igual
      `Type=Action` es un `.icon-chip`. Lo único real de la tabla es la celda.

   6. Los anchos de Figma (194.333 / 126.222) son del mock: reparto en 6 y 9
      columnas del ancho de la tarjeta. La tabla real es fluida.

   7. El icono del header mide 18px — SÉPTIMO tamaño de icono del sistema
      (20 · 20/16 · 14 · 14 · 15 · 24 · 18). La escala razonable sigue siendo
      14/16/20/24.

   8. NO hay estado hover de fila, ni fila seleccionada, ni orden por columna, ni
      tabla vacía, ni zebra. En una tabla de dashboard el hover de fila es casi
      obligatorio, y la Archive Page tiene checkboxes de selección que implican
      un estado seleccionado que el componente no define.

   ─── `.data_table` y `.juicy_cost_table` (traídas de main.css, 0.9.5) ───────

   9. EL HEADER OSCURO NO ERA DISEÑO, ERA UN PRÉSTAMO. Las `.data_table` de los
      lightboxes pintaban el header con #939FAC + blanco = 2.69:1 (reprueba AA).
      Ese gris es literalmente el de la ARCHIVE (mira la tabla de la nota 1), y
      estas tablas NO son archive: le copiaron el header sin la razón para
      tenerlo. Ahora usan el header claro del DS, el mismo que la de widgets.
      Esto es lo que "mejorar de raíz, no parchar" significa en una línea: el
      look de hoy no dicta el de mañana.

  10. ZEBRA FUERA, A PROPÓSITO Y CON REGISTRO. La vieja `.data_table` rayaba las
      filas pares (`--neutral-150`) y encerraba todo en un borde. El DS separa
      las filas con su `border-bottom` y no tiene ni zebra ni borde exterior
      (nota 8). Se quitaron los dos para que TODAS las tablas del sistema se lean
      igual. Si en una tabla de modal muy densa el rayado ayuda a seguir el
      renglón, vuelve como una variante tokenizada (`--surface-sunken-light` en
      la fila par) — pero es decisión de producto, no un default. Anotado para
      que no reaparezca "porque sí".

  11. LA DENSIDAD SÍ DIVERGE, Y ESTÁ BIEN. La celda de widgets mide 45/50 de alto;
      la de modal usa padding 10/12. No es incoherencia: una tabla de tablero y
      una lista de renglones dentro de un modal quieren aire distinto. Lo que las
      hace "la misma tabla" es la paleta y los tokens, no el alto. El valor de
      atributo se mantiene azul, pero vía el primitivo `--blue-600` del DS (antes
      `--info-600`, un alias que solo existía en main.css).
   ============================================================================ */