/* ============================================================================
 * EL MONTO · assets/css/pe-monto.css · LA COLA 602 (C-399 a C-402) y C-404 (2026-10-26) · core/dinero/monto_doble_helper.php (pe_monto_armar)
 * El propietario: «el desde tiene que ir al lado de los dólares; debajo exactamente del 30 USD, perfectamente organizados, armónicos, con un
 * símbolo de igual». Una cuadrícula de DOS columnas —[etiqueta] [valor]— en la que cada fila (.pe-monto__fila) se reparte (display: contents):
 *      Desde 30 USD
 *            = 94.753 COP
 *            = 27 EUR
 * La etiqueta (si lleva) junto a la cifra; cada equivalencia en su línea, empezando exactamente bajo la cifra en dólares, con su «=» en
 * dorado: nada se reparte con el ancho de la pantalla. La fila de los dólares hereda el color y el tamaño de donde va (la tarjeta, el KPI,
 * la celda); las de abajo, más pequeñas y en un gris neutro (contraste medido, regla 53). Sin etiqueta, la primera columna no ocupa nada.
 * vertical-align: top: el texto de al lado se alinea con la PRIMERA fila (un bloque en línea toma por base su ÚLTIMA línea).
 * Su propia hoja: la cargan los tres paneles (en sus paquetes, core/servidor/paquetes.php), la portada y los catálogos
 * (pe_tarjetas_recursos), la ficha (pe_ficha_recursos) y lo público (includes/header.php).
 * ========================================================================== */
.pe-monto {
    display: inline-grid;
    grid-template-columns: auto auto;
    row-gap: .1rem;
    align-items: baseline;
    vertical-align: top;
    line-height: 1.2;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.pe-monto__fila { display: contents; }
.pe-monto__antes { grid-column: 1; justify-self: start; font-size: .78rem; font-weight: 400; letter-spacing: .02em; color: var(--pe-txt-muted, #9d9da3); }
.pe-monto__antes:not(:empty) { margin-right: .45em; }
.pe-monto__valor { grid-column: 2; justify-self: start; white-space: nowrap; }
.pe-monto__cod { margin-left: .25em; }
.pe-monto__usd .pe-monto__cod { font-size: .8em; letter-spacing: .05em; }

/* las de abajo: pequeñas y neutras; el «=» en dorado, el código un punto más tenue */
.pe-monto-abajo .pe-monto__valor { font-size: .78rem; font-weight: 400; letter-spacing: .01em; color: var(--pe-txt-dim, #d4d4d8); }
.pe-monto-abajo .pe-monto__signo { margin-right: .35em; font-weight: 600; color: #c9a227; }
.pe-monto-abajo .pe-monto__cod { font-size: .7rem; letter-spacing: .06em; color: var(--pe-txt-muted, #9d9da3); }

/* C-404, CUARTA VUELTA (el propietario, 2026-10-25 noche: «cómo lee un humano cuando está de afán»): la COLUMNA ROTULADA de pe_monto_tabla,
   la de las tarjetas, la ficha y el filtro del catálogo. Dos columnas: [nombre de la moneda, a la izquierda] [precio, a la derecha], SIN
   códigos (C-405: «si ya dice Dólares, ¿por qué poner USD?»); el título («Desde») a todo el ancho, centrado y en dorado; la fila de los
   dólares, en dorado. Los precios de las tres filas terminan en la misma vertical; el nombre nunca se corta (si no cabe, baja de línea). */
.pe-monto--tabla { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75em; row-gap: .2rem; align-items: baseline; width: 100%; }
.pe-monto--tabla .pe-monto__titulo { grid-column: 1 / -1; justify-self: center; margin-bottom: .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #f3d77a; }
.pe-monto--tabla .pe-monto__rotulo { grid-column: 1; min-width: 0; line-height: 1.15; font-size: .76rem; font-weight: 400; color: var(--pe-txt-muted, #a1a1aa); }
.pe-monto--tabla .pe-monto__num { grid-column: 2; justify-self: end; white-space: nowrap; }
.pe-monto--tabla .pe-monto__usd .pe-monto__num { font-size: 1.12rem; font-weight: 700; color: #f3d77a; }
.pe-monto--tabla .pe-monto-abajo .pe-monto__num { font-size: .86rem; font-weight: 600; color: var(--pe-txt, #f4f4f5); }

/* la forma de UNA línea (cabeceras y celdas estrechas): «439,00 USD · = 1.386.551 COP · = 392,21 EUR» */
.pe-monto--linea, .pe-monto--linea .pe-monto__fila, .pe-monto--linea .pe-monto__valor { display: inline; }
.pe-monto--linea .pe-monto__antes:empty { display: none; }
.pe-monto--linea .pe-monto-abajo::before { content: "\00B7"; margin: 0 .45em; color: var(--pe-txt-muted, #9d9da3); }
.pe-monto--linea .pe-monto-abajo .pe-monto__valor { font-size: .82em; }