.costos-hero{background:var(--esmalte);color:var(--papel);border-radius:24px;padding:30px 24px;margin:4px 0 18px;position:relative;overflow:hidden}
.costos-hero:after{content:'';position:absolute;width:160px;height:160px;border:28px solid #ffffff12;border-radius:50%;right:-65px;top:-55px;pointer-events:none}
.costos-eyebrow{font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#d9cbb4}
.costos-hero h1{font:600 32px 'Archivo',sans-serif;letter-spacing:-.04em;margin:14px 0 10px}
.costos-hero p{font-size:14px;max-width:390px;color:#e4e6de;margin:0;line-height:1.6}
.costos-metricas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.costos-metricas>div{background:var(--papel);border:1px solid var(--arena);border-radius:16px;padding:18px 14px}
.costos-metricas small,.costos-material small,.costos-total small{display:block;color:var(--gris);font-size:12px;margin:5px 0}
.costos-metricas strong{font:500 21px 'IBM Plex Mono',monospace;display:block;margin-top:8px}
.costos-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.costos-acciones .btn{width:auto;margin:0;font-size:12px;padding:9px 12px}
.costos-acciones a{color:var(--esmalte);font-size:12px;text-decoration:none}
.costos-material{background:var(--papel);border:1px solid var(--arena);border-radius:16px;padding:18px;margin:10px 0}
.costos-material h3{font:600 18px 'Archivo',sans-serif;margin:12px 0 5px}
.costos-material p{font-size:12px;color:var(--gris);margin:0 0 12px}
.costos-material strong{font:500 20px 'IBM Plex Mono',monospace}
.costos-material-top{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.costos-chip{background:var(--crema);padding:4px 8px;border-radius:30px;color:var(--esmalte)}
.costos-estado{color:var(--musgo)}
.costos-total{background:var(--crema);border-radius:14px;padding:15px;margin:14px 0}
.costos-total strong{display:block;font:500 26px 'IBM Plex Mono',monospace}
.costos-plan .fila small{display:block;font-size:12px;color:var(--gris)}
.costos-filtros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.costos-filtros select{width:100%;font-size:12px}
.costos-etiquetas{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.costos-etiquetas .costos-chip{font-size:11px}
#ceIncluido{width:auto;display:inline-block}
#cpReferencias{max-height:48vh;overflow:auto}
#ceNotas{min-height:90px;width:100%}
#nl-badge-frame{bottom:94px!important}
#cBuscar,#cpFiltro{display:block;width:100%;border:1px solid var(--arena);border-radius:12px;padding:12px;background:var(--papel);color:var(--tinta);margin-bottom:10px}
#cPlan{max-height:340px;overflow:auto}
@media(max-width:380px){.costos-metricas{grid-template-columns:1fr}.costos-hero h1{font-size:28px}}