/* s3 costeo (24-oct-2026): catálogo de materiales (cat-), fondo de Rubén / solicitudes de pago y horas extra (gas-). Usa los tokens de app.css. Pensado para 390 px. */
main.vista-catalogo, main.vista-fondo { max-width: 760px; }

/* ---------- Catálogo ---------- */
.cat-buscar { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font-size: 16px; margin-bottom: 10px; }
.cat-filtros { display: flex; gap: 8px; margin-bottom: 10px; }
.cat-filtros .chip { height: 38px; padding: 0 14px; font-size: 14px; }
.cat-resumen { margin: 0 0 10px; }
.cat-item { margin-bottom: 10px; padding: 14px 14px 12px; }
.cat-nombre { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.cat-formato { margin: 4px 0; font-size: 14.5px; }
.cat-formato.falta-medir { color: var(--amarillo-texto); font-weight: 600; }
.cat-precio { margin: 4px 0 2px; font-weight: 700; font-size: 16px; }
.cat-m2 { font-weight: 600; color: var(--texto-2); }
.cat-contacto { margin-top: 2px; overflow-wrap: anywhere; }
.cat-contacto a { color: var(--texto); }
.cat-compras { margin: 6px 0 0; }
.cat-compras summary { cursor: pointer; padding: 4px 0; }
.cat-compras ul { margin: 2px 0 0; padding-left: 18px; }
.cat-item .btn.chico { margin-top: 8px; min-height: 40px; }

/* Ventana «Formato del material» */
.cat-form-nombre { margin-bottom: 8px; overflow-wrap: anywhere; }
.cat-tipos { display: flex; width: 100%; }
.cat-tipos button { flex: 1; min-height: 42px; font-size: 15px; }
.cat-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.cat-sug .chip { height: 36px; }
.cat-sug .cat-sug-nombre { border-color: var(--texto); color: var(--texto); }
.cat-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-campos label { margin: 10px 0 0; }
.cat-previo { margin: 10px 0 0; min-height: 20px; font-size: 14px; color: var(--texto-2); }

/* ---------- Fondo y solicitudes ---------- */
.gas-h { font-size: 15px; margin: 18px 0 8px; letter-spacing: -0.01em; }
.gas-item { margin-bottom: 10px; padding: 14px 14px 12px; }
.gas-item-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gas-monto { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gas-item .small { margin-top: 3px; overflow-wrap: anywhere; }
.gas-item .acciones { margin-top: 10px; }
.gas-item .acciones .btn { min-height: 44px; }
.gas-item a, .gas-rend-i a { color: var(--texto); font-weight: 600; }
.gas-sin { color: var(--amarillo-texto); }
.gas-saldo .gas-cifra { font-size: 30px; font-weight: 700; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.gas-saldo.bajo { border-color: var(--rojo); }
.gas-saldo.bajo .gas-cifra { color: var(--rojo-texto); }
.gas-saldo-acc { margin-top: 10px; }
.gas-saldo-acc .btn { min-height: 42px; }
.gas-nota { margin-top: 18px; }
.gas-rend-i { padding: 4px 0; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }

/* Formularios de solicitar (dentro de la hoja modal) */
.gas-form label { margin: 12px 0 5px; }
.gas-form .gas-sub { margin: 12px 0 4px; }
.gas-fila { margin-bottom: 8px; }
.gas-fila-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gas-fila-datos input { min-width: 0; }
.gas-esp-l { margin: 6px 0 0 !important; font-weight: 500; }
.gas-check { display: flex !important; align-items: center; gap: 10px; margin: 10px 0 0 !important; font-weight: 500; color: var(--texto); font-size: 15px; min-height: 36px; }
.gas-check input { width: 22px; height: 22px; flex: none; margin: 0; }
.gas-form #gh-mas { margin: 4px 0 0; }

/* Sección en la ficha de la OT */
.gas-ficha .acciones .btn { min-height: 42px; }
.gas-mias { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 8px; }
.gas-mias-t { margin-bottom: 4px; }
.gas-mia { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 5px 0; font-size: 14px; }
.gas-mia .small { flex-basis: 100%; }
.gas-estado { font-size: 12.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--gris-pill); color: var(--texto-2); white-space: nowrap; }
.gas-estado.pagado, .gas-estado.aprobada { background: var(--verde-fondo); color: var(--verde-texto); }
.gas-estado.rechazado, .gas-estado.rechazada { background: var(--rojo-fondo); color: var(--rojo-texto); }
.gas-estado.solicitado, .gas-estado.solicitada { background: var(--amarillo-fondo); color: var(--amarillo-texto); }

/* ---------- Resumen de gastos (gas-res-, 26-oct) ---------- */
.gas-res { margin-top: 12px; padding: 14px; min-width: 0; }
.gas-res-cab { display: grid; gap: 8px; }
.gas-res-per { display: flex; gap: 6px; flex-wrap: wrap; }
.gas-res-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.gas-res-chip[aria-pressed="true"] { background: var(--texto); color: var(--superficie); border-color: var(--texto); font-weight: 600; }
.gas-res-total { display: grid; margin-top: 12px; }
.gas-res-total .gas-cifra { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gas-res-ests { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gas-res-est { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; background: var(--gris-pill); color: var(--texto-2); cursor: pointer; }
.gas-res-est.est-solicitado { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.gas-res-est.est-rechazado { background: var(--rojo-fondo); color: var(--rojo-texto); }
.gas-res-est.est-sin { cursor: default; }
.gas-res-grupos { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 760px) { .gas-res-grupos { grid-template-columns: 1fr 1fr; } }
.gas-res-g { min-width: 0; }
.gas-res-g h4, .gas-res-det { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); margin: 0 0 6px; font-weight: 650; }
.gas-res-det { margin-top: 18px; }
.gas-res-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; width: 100%; text-align: left; padding: 8px 10px; margin: 0 0 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.gas-res-fila:hover { background: var(--campo); }
.gas-res-fila.on { border-color: var(--texto); background: var(--campo); }
.gas-res-n { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 14.5px; }
.gas-res-n small { display: block; font-weight: 400; font-size: 12px; color: var(--texto-3); }
.gas-res-m { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.gas-res-barra { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--campo); overflow: hidden; }
.gas-res-barra i { display: block; height: 100%; background: var(--texto-2); border-radius: 999px; }
.gas-res-filtro { margin: 0 0 6px; }
.gas-res-filtro .enlace { background: none; border: 0; padding: 0; color: var(--texto); text-decoration: underline; font: inherit; cursor: pointer; }
.gas-res-lista { list-style: none; margin: 0; padding: 0; }
.gas-res-lista li { padding: 9px 0; border-top: 1px solid var(--linea); min-width: 0; }
.gas-res-lista li .small { overflow-wrap: anywhere; margin-top: 2px; }
.gas-res-lista li a { color: var(--texto); font-weight: 600; }
.gas-res-l1 { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.gas-res-lista li.est-rechazado .gas-res-l1 { text-decoration: line-through; color: var(--texto-3); }
.gas-res-lista li.est-rechazado .gas-res-e { color: var(--rojo-texto); font-weight: 600; }
.gas-res-lista li.est-solicitado .gas-res-e { color: var(--amarillo-texto); font-weight: 600; }