/* Rediseño · frente pendientes. Clases con prefijo .pen-. Solo var(--…); sin colores hex ni position fixed/sticky. */

/* Barra única (sin barra de marca): lleva la zona segura de arriba. Alineada con las tarjetas. */
.pen-main > .barra-sup { padding: calc(var(--e-2) + var(--safe-top)) 0 var(--e-2); }
.pen-main > .barra-sup .pastilla { min-width: 32px; justify-content: center; font-variant-numeric: tabular-nums; background: var(--color-secundario); color: var(--sobre-secundario); }

/* Renglón de herramientas: frase corta y botón del filtro (una sola línea el botón). */
.pen-herramientas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); }
.pen-sub { flex: 1 1 11rem; min-width: 0; margin: 0; color: var(--texto-suave); font-size: 0.9375rem; }
.pen-filtrar { flex: none; white-space: nowrap; }
.pen-main .mensaje-info, .pen-main .toast { margin: 0 0 var(--e-3); }

/* Filtro plegable: dos fechas lado a lado si caben. */
.pen-filtro { margin: 0 0 var(--e-4); padding: var(--e-4); border-color: var(--borde-suave); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); }
.pen-filtro[hidden] { display: none; }
.pen-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 var(--e-2); }
.pen-filtro .campo { margin-bottom: var(--e-3); min-width: 0; }
.pen-filtro .fila-botones { gap: var(--e-2); }
.pen-filtro .boton { white-space: nowrap; }

/* Lista de tarjetas */
.pen-lista { margin: 0 0 var(--e-4); }
.pen-lista li { margin-bottom: var(--e-3); }
.pen-lista li:nth-child(-n+8) { animation: entrada-sube var(--dur-media) var(--ease) both; }
.pen-lista li:nth-child(2) { animation-delay: 30ms; }
.pen-lista li:nth-child(3) { animation-delay: 60ms; }
.pen-lista li:nth-child(4) { animation-delay: 90ms; }
.pen-lista li:nth-child(n+5) { animation-delay: 120ms; }
.pen-fila { display: flex; align-items: center; gap: var(--e-2); min-height: 64px; padding: var(--e-3) var(--e-4); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); overflow-wrap: anywhere; }
.pen-fila-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pen-arriba { display: block; }
.pen-monto { display: block; font-family: var(--fuente-monto); font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: 0; }
.pen-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); color: var(--texto-suave); font-size: 0.875rem; }
.pen-fecha, .pen-pago { display: inline; color: var(--texto-suave); font-size: inherit; font-weight: 500; }
.pen-pago { font-variant-numeric: tabular-nums; }
.pen-punto { color: var(--placeholder-fuerte); }
.pen-que { display: block; color: var(--texto); font-size: 0.9375rem; line-height: 1.3; }
.pen-faltan { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin-top: var(--e-1); }
.pen-faltan .etiqueta-falta { white-space: nowrap; line-height: 1.3; padding: var(--e-1) var(--e-2); }
.pen-faltan .pen-mas { font-variant-numeric: tabular-nums; }
.pen-chevron { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--placeholder-fuerte); }

/* Estado vacío */
.pen-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--e-6) var(--e-4); margin-bottom: var(--e-4); box-shadow: var(--sombra-1); }
.pen-vacio-icono { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--e-4); border-radius: 50%; background: var(--exito-fondo); color: var(--exito-texto); }
.pen-vacio-titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 600; }
.pen-vacio-texto { margin: var(--e-2) 0 0; color: var(--texto-suave); }

/* Chips por marca del ticket (filtros_ticket.js): se acomodan en renglones; cada chip va en una sola línea */
.pen-marcas { display: flex; flex-wrap: nowrap; gap: var(--e-2); margin: 0 0 var(--e-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pen-marcas::-webkit-scrollbar { display: none; }
.pen-marcas .chip { flex: none; }
.pen-marcas[hidden] { display: none; }
.pen-marcas .chip { white-space: nowrap; min-height: var(--toque); }
.pen-pastillas .pastilla { white-space: nowrap; }
.pen-sin { display: block; color: var(--texto-suave); font-size: 0.8125rem; line-height: 1.3; }

/* Botones bajo la tarjeta: Ver ticket, Aprobar, Quitar marca. En teléfono dos a la vista y el resto detrás de «Más»; en pantalla grande todo a la vista. */
.pen-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 0; padding: 0; }
.pen-accion { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); flex: 1 1 0; min-width: 0; min-height: var(--toque); margin: 0; padding: 0 var(--e-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease); }
.pen-accion:active { transform: scale(.97); box-shadow: var(--sombra-2); }
.pen-mas-btn { display: none; flex: 0 0 auto; }
.pen-conf-texto { flex: 1 1 100%; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pen-conf-error { flex: 1 1 100%; margin: 0; }
.pen-conf-error[hidden] { display: none; }
.pen-conf-botones { display: flex; flex: 1 1 100%; gap: var(--e-2); }
@media (max-width: 600px) {
  .pen-extra { display: none; }
  .pen-acciones[data-abierto="si"] .pen-extra { display: inline-flex; }
  .pen-mas-btn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .pen-accion:active { transform: none; } }

/* ---------- Ronda 3: proporciones ---------- */
/* Filtro de fechas compacto: dos campos de 44 px lado a lado y los botones debajo; sin relleno de sobra */
.pen-filtro { padding: var(--e-3); margin-bottom: var(--e-3); }
.pen-fechas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-2); }
.pen-filtro .campo { margin-bottom: var(--e-2); }
.pen-filtro .campo > span { margin-bottom: var(--e-1); font-size: 0.875rem; }
.pen-filtro .campo input[type="date"] { height: 44px; }
.pen-filtro .fila-botones .boton { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.pen-filtro .mensaje-error { margin: 0 0 var(--e-2); }
/* Tarjeta de pendiente: menos relleno y fichas de «falta» en una sola línea (las que no caben se acortan con «…»; el «+N» siempre se ve) */
.pen-fila { padding: 10px var(--e-3); }
.pen-fila-cuerpo { gap: 0; }
.pen-monto { font-size: 1.375rem; }
.pen-faltan { flex-wrap: nowrap; overflow: hidden; margin-top: var(--e-1); }
.pen-faltan .etiqueta-falta { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--e-2); font-size: 0.75rem; }
.pen-faltan .etiqueta-falta.pen-mas { flex: none; }
.pen-faltan .pastilla { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }