.panel-cuerpo { background: var(--crema-2); }
.panel { padding: var(--e-7) 0 var(--e-9); display: grid; gap: var(--e-6); }
.banner { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; justify-content: space-between; background: #fff4e0; border: 1px solid var(--oro); border-radius: var(--r-2); padding: var(--e-4) var(--e-5); }
.banner p { margin: 0; font-size: var(--t-s); color: #5b3f0c; flex: 1 1 260px; }
.banner .btn-linea { color: #7a5a1e; border-color: #7a5a1e; }
.tarjetas { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tarjetas { grid-template-columns: repeat(4, 1fr); } }
.tarjeta { background: var(--tinta); color: var(--crema); border-radius: var(--r-2); padding: var(--e-5); box-shadow: var(--sombra-2); }
.tarjeta small { display: block; font-size: var(--t-ceja); letter-spacing: .1em; text-transform: uppercase; color: var(--oro-claro); }
.tarjeta b { display: block; font: 700 clamp(1.7rem, 4vw, 2.3rem)/1.1 var(--f-titulo); color: var(--oro); margin-top: 6px; }
.tarjeta span { font-size: var(--t-s); color: #cfc6ab; }
.caja { background: #fff; border-radius: var(--r-3); padding: var(--e-6); box-shadow: var(--sombra-1); border: 1px solid rgba(10, 9, 4, .08); }
.caja h2 { font-size: var(--t-2); margin-bottom: var(--e-3); }
.caja-cab { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; justify-content: space-between; margin-bottom: var(--e-4); }
.caja-cab h2 { margin: 0; }
.filtros { display: flex; gap: 6px; background: var(--crema-2); padding: 4px; border-radius: var(--r-full); }
.filtros button { border: 0; background: transparent; font: 700 var(--t-s)/1 var(--f-texto); padding: 9px 16px; border-radius: var(--r-full); cursor: pointer; color: var(--texto); }
.filtros button.activo { background: var(--tinta); color: var(--oro); }
.tabla-envoltura { overflow-x: auto; margin: 0 calc(-1 * var(--e-2)); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); min-width: 640px; }
.tabla th { text-align: left; font-size: var(--t-ceja); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 10px 12px; border-bottom: 2px solid var(--crema-2); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--crema-2); vertical-align: middle; }
.tabla .der { text-align: right; }
.tabla td.monto-celda { text-align: right; font-weight: 700; white-space: nowrap; }
.tabla small { display: block; color: var(--texto-suave); font-size: var(--t-ceja); }
.pildora { display: inline-block; padding: 4px 12px; border-radius: var(--r-full); font-size: var(--t-ceja); font-weight: 700; border: 0; }
.pildora-pend { background: #fff4e0; color: #7a5a1e; }
.pildora-ok { background: #e3f5e4; color: var(--verde-texto); }
button.pildora { cursor: pointer; font-family: inherit; }
button.pildora:hover { background: #ffe3b3; }
.vacio { text-align: center; color: var(--texto-suave); padding: var(--e-6) 0 0; margin: 0; }
.cuenta-form { display: grid; gap: var(--e-2); max-width: 520px; margin-top: var(--e-4); }
.estado-cuenta { margin: var(--e-2) 0 0; font-size: var(--t-s); font-weight: 600; color: var(--verde-texto); min-height: 1.4em; }
.estado-cuenta.mal { color: #8a1c12; }
.ejemplo-marca { font-size: .7rem; background: var(--crema-2); border-radius: 6px; padding: 1px 6px; margin-left: 6px; color: var(--texto-suave); }