/* ============================================================================
   Juicy — Dashboard Design System · WIDGET
   ----------------------------------------------------------------------------
   "Widget" es la FAMILIA, no un componente: en Figma la sección "Widgets"
   (1:3382) contiene Number, Icon First, Information Box, Content y Bars Chart.
   Todos son la misma carcasa con distinto relleno, así que aquí `.widget` ES la
   carcasa y cada miembro es un modificador. Ver nota 1.

     .widget            carcasa: blanco, radio 5, trazo, sombra
       .widget--kpi       Icon First / Number   (KPI de la home)
       .widget--info      Information Box
       .widget--content   Content Widget        (lista o tabla con cabecera)
       .widget--chart     Bars Chart

   Esto además reconcilia el `.widget` que el producto YA tenía (blanco + sombra,
   42 usos) — es la misma idea, sin radio ni trazo. Ver nota 2.

   Los 8 acentos son `widget/accent/…` y NO son tonos: dos de ellos (yellow,
   gw800) no tienen tono equivalente. Ver nota 6.
   ============================================================================ */

/* ---- Carcasa ------------------------------------------------------------- */

:where(.widget) {
  --widget-accent: var(--widget-accent-gw500);
}

.widget {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  /* Trazo por inset, no por `border`: en Figma va por DENTRO (la tarjeta mide
     289×153 CON su trazo). Un `border` sumaría 2px al alto. Mismo caso que el
     Outline del Button. Y así la sombra del token convive con el trazo. */
  box-shadow:
    inset 0 0 0 var(--stroke-thin) var(--border-default),
    var(--shadow-sm);

}

/* El CUERPO del widget. Venía de `main.css` (2026-07-28, juicy-core 0.9.115) y cruzó con la
   familia Formulario: `form_panel` emite `.widget > .widget_body`, así que este relleno es
   todo el espacio interior del panel de un formulario. Sin él, en el front nuevo el panel
   sale pegado a los bordes.
   Se movió SOLO esta regla, no el bloque entero: `.widget_body p` y
   `.widget_body .widget_header` se quedan en main.css porque visten prosa y cabeceras, no
   el formulario, y cruzarlas cambiaría los widgets del Hub el día que sincronice su copia
   del DS (su dashboard.css trae este `padding: 30px` con el mismo valor, pero no las otras
   dos). */
.widget_body{
	padding: 30px;
}

/* La carcasa NO impone disposición: solo pinta la superficie. La disposición la
   trae cada miembro. Si `.widget` forzara `flex-direction: column`, un
   `.widget.d-flex.align-items-center` (la fila del cliente de orderDetails)
   quedaría en columna — `.d-flex` pone `display` pero NO la dirección, así que
   la columna de la carcasa gana y el avatar se va ARRIBA del texto en vez de al
   lado. Pasó de verdad. Ver nota 15. */
.widget--kpi,
.widget--info,
.widget--content,
.widget--chart {
  display: flex;
  flex-direction: column;
}

/* ---- Cabecera compartida (content + chart) ------------------------------- */

.widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
  border-bottom: var(--stroke-thin) solid var(--border-default);
}

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

.widget__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dato secundario de la cabecera ("Por Semana", "$18,480 total"). */
.widget__meta {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--text-secondary);
}

/* Junto al título lleva viñeta; solo en la derecha va suelto. */
.widget__heading > .widget__meta::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  border-radius: var(--radius-round);
  background: currentColor;
  vertical-align: middle;
}

/* "Ver todas". Figma lo pone en SemiBold 600 — peso que la fuente del producto
   no carga. Ver nota 3. */
.widget__link {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--action-information-default);
  text-decoration: none;
  white-space: nowrap;
}
.widget__link::after {
  content: '\e104';
  font-family: uicons-regular-rounded;
  font-size: 14px;
}

.widget__body {
  padding: 20px;
}

/* Estado vacío de cualquier widget con lista o tabla. No existe en Figma: los
   mocks siempre tienen datos. Un POS recién dado de alta NO. */
.widget__empty {
  padding: 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
}

/* ---- widget--kpi (Icon First) -------------------------------------------- */

.widget--kpi {
  gap: 10px;
  padding: 20px;
}

.widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  background: var(--widget-accent);
  color: var(--text-on-color);
  /* Los iconos del producto son glifos de Flaticon (`<i class="fi …">`), no
     <svg>. Figma dibuja 21; --icon-md (20) es el escalón del sistema. */
  font-size: var(--icon-md);
  line-height: 1;
}

.widget__icon > svg {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
}

.widget--kpi .widget__title {
  margin-bottom: -3px;   /* Figma: 10 al icono, 7 entre título/cifra/subtítulo */
}

.widget__figure {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Primer y único Bold (700) del DS — ver nota 4. */
.widget__number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.widget__number small {
  font-size: 14px;
  font-weight: 500;
}

/* El delta ES el Badge, no una copia: se compone `.badge.badge--sm.widget__delta`
   y aquí solo se le pasa el acento del widget, que no es un tono. Ver nota 5.
   En `:where()` (especificidad 0) para que un `.tone-success` puesto al lado
   GANE y el delta pueda ir por dirección en vez de por acento — si fuera una
   clase normal empataría con `.tone-*` y decidiría el orden de carga. */
:where(.widget__delta) {
  --tone-fill: var(--widget-accent);
  --tone-fg:   var(--text-on-color);
}

.widget__delta > svg,
.widget__delta > .badge__icon {
  width: 10px;
  height: 10px;
}

.widget__subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: var(--widget-accent);
}

/* ---- widget_subtitle (legacy) ---------------------------------------------

   OJO: NO es `.widget__subtitle` de arriba, aunque se llamen casi igual. Aquel
   es el subtítulo DENTRO de un widget (12px, gris, sin margen); este es el
   ENCABEZADO DE SECCIÓN que el producto usa dentro de los lightboxes y de los
   paneles de detalle: "Productos", "Métodos de pago", "Movimientos".

   Vivía en `main.css` —el CSS legacy que el front nuevo NO importa a propósito—,
   así que en el front esos encabezados salían sin estilo. Es el quinto caso de lo
   mismo, y se cierra igual: la regla se MUEVE tal cual, sin redibujarla. Medida
   antes y después en una pantalla de PHP: 18px, mayúsculas, #3E4349, margen
   10/0/20.

   Se queda con el nombre viejo (guion bajo) a propósito: renombrarlo a BEM
   obligaría a tocar los cuatro sitios que lo usan y no arregla nada hoy. */
.widget_subtitle {
  font-size: 18px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 10px 0 20px;
}

/* ---- widget--content ----------------------------------------------------- */

/* Cuerpo tipo lista (Product Line). El cuerpo tipo tabla es `.table` a secas:
   se instancia dentro de `.widget__body--flush` y no necesita nada aquí. */

.widget__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 20px 20px;
}

.widget__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.widget__row-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-primary);   /* Figma pinta #596068, fuera del sistema — nota 7 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fila de DOS líneas: nombre arriba, dato secundario debajo (cantidad, lote, importe).

   DE DÓNDE VINO: `modules/caducidad/assets/caducidad.css` (`.expiring_name` /
   `.expiring_meta`). Movido, no copiado — y movido AHORA porque la segunda línea dejó
   de ser cosa de un módulo: es parte del contrato de paneles del resumen
   (`includes/dashboard-cards.php`), que cualquier módulo puede usar.

   Y si no se movía, cruzaba sin vestir: el front nuevo importa `@juicy/ui/ds.css` y NO
   la hoja del módulo, así que en React la segunda línea habría salido a 13px pegada al
   nombre. Es el mismo modo de fallo que `.avatar` y `.text-red` en `main.css`, una capa
   más adentro — la hoja de un módulo tampoco viaja al bundle. Cuarta vez.

   Modificador explícito en vez de `:has()`: el renderizador sabe si hay segunda línea y
   lo dice, que es más barato y no depende del soporte del selector. */
.widget__row-title--stacked {
  display: flex;
  flex-direction: column;
  white-space: normal;
}

.widget__row-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Una tabla llena el widget de borde a borde: su propio padding-inline de 20 ya
   alinea con la cabecera. */
.widget__body--flush {
  padding: 0;
}

/* ---- widget--chart (Bars Chart) ------------------------------------------ */

.widget__chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.widget__bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 170px;
}

.widget__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}

/* Figma: SemiBold 600 — ver nota 3. */
.widget__bar-value {
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-primary);
  white-space: nowrap;
}

.widget__bar {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--widget-accent-blue);
}

.widget__labels {
  display: flex;
  gap: 14px;
}

.widget__bar-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  color: var(--text-secondary);
  text-align: center;
}

/* ---- Modos de superficie ------------------------------------------------- */

/* Los `Mode` del Information Box SON los tokens `surface/…` — y eso explica el
   `surface/raised` = #3E4349 oscuro que parecía un nombre equivocado: no lo es,
   es esta caja. En el producto ya existían como `.dark_widget` / `.red_widget`.

   MODO ≠ DISPOSICIÓN: el modo solo pinta la superficie, `--info` solo coloca el
   contenido. Se componen. Así la fila del cliente de orderDetails (horizontal,
   con avatar) puede ser `.widget.widget--light` sin heredar el centrado.

   Una caja tintada NO lleva trazo ni sombra: el tinte ya la separa del fondo.
   Van DESPUÉS de `.widget--info` a propósito (misma especificidad, gana el
   último) — ver nota 12. */

.widget--light,
.widget--light2,
.widget--white,
.widget--raised,
.widget--red {
  box-shadow: none;
}

.widget--light  { background: var(--surface-sunken); }
.widget--light2 { background: var(--surface-sunken-light); }
.widget--white  { background: var(--surface-page); }
.widget--raised { background: var(--surface-raised); }
/* El 600 y no el `action/error/default` (500): esta caja es el "Cambio" y lleva
   TEXTO blanco encima, que sobre el 500 da 3.76. Mismo criterio y mismo valor
   que `--tone-fill` de `.tone-error` — ver la nota RELLENOS de tone.css. */
.widget--red    { background: var(--red-600); }

/* ---- widget--info (Information Box) -------------------------------------- */

/* Par etiqueta/valor centrado. 35 usos en el producto: fechas, horas, cajero,
   totales, cambio. Ver nota 2.

     <div class="widget widget--info widget--light">
       <span class="widget__info-label">Fecha</span>
       <span class="widget__info-value">Julio 16, 2026</span>
     </div> */

.widget--info {
  align-items: center;
  justify-content: center;
  gap: 3px;              /* era el margin-bottom del label; Figma dice 10 — nota 14 */
  padding: 20px;
  /* Llena su celda. Los 36 usos viven en un `col-* d-flex`, o sea que la caja es
     un ítem flex con `flex-basis:auto` y SIN esto se encoge al texto: "TOTAL"
     medía 103px en una celda de 255 y cada caja salía de un ancho distinto según
     lo largo de su etiqueta. Es el `w-100` que traía el markup viejo; va aquí
     porque lo quieren los 36. `width` y no `flex:1` para que también funcione
     con un padre que no sea flex. Ver nota 16. */
  width: 100%;
  text-align: center;
}

.widget__info-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* 18 y no los 32 del mock: estas cajas llevan FECHAS y NOMBRES, no cifras.
   Ver nota 14. */
.widget__info-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Contenido sobre superficie oscura. Medido: label 6.87 y valor 9.98 sobre
   raised — los dos pasan, y el muted da la jerarquía que pide el DS. */
.widget--raised .widget__info-label { color: var(--text-muted); }

/* En `--red` el label va BLANCO, no muted: sobre el rojo el muted daría 3.51 y
   el blanco 5.52. La jerarquía label/valor la hacen el tamaño (14 vs 18) y el
   peso, no el color. Nota 13. */
.widget--red .widget__info-label { color: var(--text-on-color); }

.widget--raised .widget__info-value,
.widget--red .widget__info-value,
.widget--raised .widget__number { color: var(--text-on-color); }

.widget--raised .widget__subtitle { color: var(--action-neutral-lv3-default); }

/* ---- Acentos ------------------------------------------------------------- */

.widget--green  { --widget-accent: var(--widget-accent-green); }
.widget--red    { --widget-accent: var(--widget-accent-red); }
.widget--yellow { --widget-accent: var(--widget-accent-yellow); }
.widget--orange { --widget-accent: var(--widget-accent-orange); }
.widget--blue   { --widget-accent: var(--widget-accent-blue); }
.widget--gw500  { --widget-accent: var(--widget-accent-gw500); }
.widget--gw400  { --widget-accent: var(--widget-accent-gw400); }
.widget--gw800  { --widget-accent: var(--widget-accent-gw800); }

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

   1. "WIDGET" ES LA FAMILIA, NO UN COMPONENTE. La primera versión de este
      archivo tomó `.widget` para el Number Widget solo. Estaba mal por dos
      lados: en Figma la sección agrupa cinco cosas distintas, y en el producto
      `.widget` ya existía como carcasa genérica. Ahora `.widget` es la carcasa
      y los cinco son modificadores.

   2. EL PRODUCTO YA TENÍA ESTE COMPONENTE, escrito con utilidades de Bootstrap.
      De 42 usos de `.widget` en juicy-core, 35 son literalmente el Information
      Box:
        27 ×  class="widget text-center d-flex flex-column align-items-center w-100"
         6 ×  class="widget dark_widget text-center …"   -> .widget--raised
         2 ×  class="widget red_widget text-center …"    -> quinto Mode, no está en Figma
      Y `.dark_widget` = `--neutral-500` = `surface/raised`, o sea que el "Raised
      oscuro" que yo había marcado como nombre confuso no lo era: es esto, y se
      usa 6 veces. Migrar esos 35 a `.widget--info` borra la sopa de utilidades.

   3. SEMIBOLD 600 NO EXISTE EN EL PRODUCTO. Figma lo usa en "Ver todas" y en las
      cifras de las barras. El tema carga `Montserrat:wght@300;400;500;700;900`
      (header.php:11) — sin 600. Y el dashboard tenía SIETE `font-weight: 600`
      que el navegador estaba resolviendo a 700: el SemiBold nunca llegó a la
      pantalla, ni aquí ni en el mock. Aquí van en 500 (Medium = acción, según la
      escala de la nota 4). Si se quiere el 600 de verdad, hay que añadirlo al
      `<link>` de Google Fonts; es una decisión, no un descuido.

   4. ESCALA DE PESOS del sistema, ya con todo escrito:
        Light 300 = dato · Regular 400 = etiqueta · Medium 500 = acción/título
        Bold 700 = cifra grande
      El 900 que carga el tema tampoco lo usa nadie.

   5. EL DELTA SE COMPONE, NO SE COPIA. Figma lo dibuja a mano con casi los
      mismos valores del `.badge--sm` (mismo padding 2/5, mismo radio 3, misma
      tipografía Medium 11) pero alto 17 en vez de 18 e icono 10 en vez de 14.
      Aquí se instancia el Badge y solo se le pasa el acento y el icono de 10.
      El 1px de alto lo pone el padding; no se fuerza.

   6. `widget/accent/…` DUPLICA 6 TONOS QUE YA EXISTEN:
        green → tone-success · red → tone-error · orange → tone-warning
        blue  → tone-information · gw500 → tone-primary · gw400 → tone-secondary
      Los otros dos NO tienen tono: `yellow` (orange/400) y `gw800` (ui/800).
      Por esos dos, el widget no puede consumir `.tone-…` y necesita su propio
      hook. Los nombres gw500/gw400/gw800 además son nomenclatura vieja: el
      primitivo se llama `ui/`.

   7. `Product Name` EN EL FIGMA ES #596068, QUE NO ERA NINGÚN PRIMITIVO — y
      resultó ser el hallazgo más útil del mock. Cae justo en el hueco de la
      rampa: ΔE 12.3 de neutral/500 y 14.1 de neutral/400, visible desde los
      dos. Y no estaba ahí por casualidad: en blanco da 6.37:1, mientras que
      neutral/400 da 3.86 (reprueba AA) y neutral/500 da 9.98. Es el MISMO
      hueco que obligó a inventar `--text-placeholder`, y el mismo que
      `.dash_tag` tapó con la rampa 700 — tres hallazgos independientes.
      RESUELTO: ese valor ES ahora `neutral/450`, y `text/secondary` apunta
      ahí (aprobado 2026-07-16). Ver primitives.css.
      Aquí el nombre de producto sigue en `text/primary`: el producto ya lo
      hacía (`.lowstock_name`) y un nombre de producto es contenido primario,
      no secundario.

   8. LOS DOS WIDGETS DEL MOCK USAN TRAZOS DISTINTOS: Icon First lleva #CFD7E1
      (border/strong) y Content/Chart llevan #E5EAEF (border/default). ΔE 7.4,
      visible. Aquí todos van con `border/default`; el trazo fuerte no tiene
      razón de ser en una tarjeta y son 4 tarjetas contra 6.

   9. LA CABECERA DEL CHART NO TIENE LÍNEA EN EL MOCK y la del Content sí,
      aunque las dos son "cabecera + cuerpo". Aquí la línea es de
      `.widget__header`, o sea que el chart la gana. Unificado a propósito.

  10. LA SOMBRA DEL WIDGET NO ES EL TOKEN. Figma la dibuja a mano y encima con
      dos bases distintas según el widget:
        Icon First  0 2px 3px rgba(33,51,59,.06) + 0 1px 1px rgba(33,51,59,.06)
        Content     0 2px 3px rgba(9,13,15,.06)  + 0 1px 1px rgba(9,13,15,.06)
        shadow-sm   0 1px 2px rgba(33,51,59,.06) + 0 2px 6px rgba(33,51,59,.06)
      Aquí usa `--shadow-sm`, que es el token que existe para esto. Los tres al
      6%; la diferencia es mínima.

  11. EL MOCK DEL DASHBOARD NO LIGA NI UNA VARIABLE. `get_variable_defs` sobre
      el frame entero devuelve `{}`: es otro archivo de Figma y está pintado a
      mano. Para esta pantalla el mock manda en el LAYOUT; en los valores manda
      el DS. Es al revés que en los componentes.

  12. MODO Y DISPOSICIÓN SON EJES SEPARADOS, y el producto lo pedía a gritos:
      además de los 35 Information Box hay 2 filas de cliente
      (`.widget.d-flex.align-items-center.w-100`, con avatar) que quieren la
      superficie tintada pero NO el centrado. Si el modo trajera la disposición
      pegada, no se podrían componer. Por eso `--light/--raised/--red` solo
      pintan y `--info` solo coloca.

  13. `--red` ES EL "CAMBIO" — el dinero que el cajero le devuelve al cliente, o
      sea el número más crítico de la pantalla — y no pasaba AA con nada: blanco
      sobre `action/error/default` (#F04438) daba 3.76, neutral/250 2.59 y
      neutral/200 3.10. RESUELTO (aprobado 2026-07-16) bajando el FONDO al 600
      (#C0362D): blanco da 5.52 ✓ y con ΔE 17 del 500 sigue siendo rojo. Mismo
      criterio y mismo valor que `--tone-fill` de `.tone-error`; ver la nota
      RELLENOS de tone.css, que corrige de paso un atajo mío: el 600 NO arregla
      los 5 rellenos, solo 3 — warning e inactive necesitan otra cosa.

  14. EL INFORMATION BOX DEL MOCK ES UNA INSTANCIA MÁS GRANDE, no otro
      componente — y aquí me corrijo a mí mismo. Yo había dicho que los 35 usos
      del producto "son literalmente el Information Box". El SHELL sí, exacto
      (bg surface/sunken, radio 5, padding 20, centrado — medido). El CONTENIDO
      no: mock 14/32 con gap 10 y 169 de alto, producto 13/18 con gap 3 y 75 de
      alto. Y el producto tiene razón: esas cajas llevan "Julio 16, 2026" y
      "Punto de venta", no cifras — 32px sería absurdo. El mock tiene UNA
      instancia decorativa; el producto tiene 35 reales. Manda el uso: el valor
      queda en 18. El label sí sube a 14 + tracking 2 para alinearse con el
      resto de títulos del sistema.

  15. LA CARCASA NO IMPONE DISPOSICIÓN — y esto lo aprendí rompiéndolo. La
      primera versión ponía `display:flex; flex-direction:column` en `.widget`.
      Parece inofensivo hasta que te topas con
      `class="widget d-flex align-items-center w-100"` (la fila del cliente de
      orderDetails): `.d-flex` pone el `display` pero NO la dirección, así que
      la columna de la carcasa ganaba y el avatar se iba ARRIBA del texto.
      Medido en el lightbox real: `flex-direction: column` donde tenía que decir
      `row`. También convertía en flex los `.widget` sueltos que eran bloques.
      Ahora la carcasa solo pinta y el flex lo traen `--kpi/--info/--content/
      --chart`. Es el mismo eje que la nota 12, un nivel más arriba: superficie,
      disposición y contenido son tres cosas y hay que poder componerlas.

  16. AL MATAR LA SOPA DE UTILIDADES SE FUE `w-100` CON ELLA. De las cinco
      (`text-center d-flex flex-column align-items-center w-100`), cuatro son la
      disposición INTERNA de la caja y se absorbieron aquí. La quinta no: dice
      cómo se relaciona con su PADRE. Al no reponerla, las 36 cajas se
      encogieron al texto — cada una de un ancho según lo largo de su etiqueta
      ("TOTAL" en 103px dentro de una celda de 255). Lo cazó el dueño de un
      vistazo; yo había verificado color, estructura y contraste, pero NO la
      geometría. Al migrar un componente hay que medir los DOS ejes.
      Va en el componente (y no en el markup) porque lo quieren los 36 usos.
   ============================================================================ */

/* ---- PROSA DENTRO DEL CUERPO DEL WIDGET ---------------------------------------
   DE DÓNDE VINO: `main.css`. Movido, no copiado.

   POR QUÉ AHORA: un campo `html` de un formulario emite su `<p>` aquí dentro —`/clientes/registrar`
   es el primero— y sin esta regla salía a 16px/24px en vez de 14px/21px, arrastrando 6px hacia
   abajo todo lo que iba debajo.

   `main.css` decía que esta regla se quedaba "porque cruzarla movería el Hub". Se comprobó antes de
   moverla, que es lo que esa nota no hizo: el Hub encola esta capa pero **no emite ni un `<p>`
   dentro de un `.widget_body`** en todo su repo. No se mueve nada.
   ---------------------------------------------------------------------------- */

.widget_body p{
	font-size: 14px;
	line-height: 150%;
}