/* «TU PLAN» (core-05 + core-73, 20/10/2026): el resumen de arriba de Cuenta › Plan (tu-plan-resumen.js, clases tp-).
   En calma: los mismos tokens que el resto de «Cuenta» (estilos.css), sin colores de alarma; el ámbar no se usa aquí. */
.tp-caja { border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 16px 18px; background: var(--superficie); box-shadow: var(--sombra-1); margin: 0 0 16px; }
.tp-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.tp-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--texto); }
.tp-etiqueta { font-size: .78rem; padding: 3px 10px; border-radius: var(--r-pastilla); background: var(--cobalto-tenue); color: var(--acento-texto); }
.tp-lista { display: grid; grid-template-columns: minmax(120px, 11rem) 1fr; gap: 12px 18px; margin: 0; }
.tp-lista dt { margin: 0; font-size: .82rem; color: var(--texto-3); padding-top: 2px; }
.tp-lista dd { margin: 0; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.tp-cifra { margin: 0 0 6px; font-weight: 600; }
/* Lo que se suma a la próxima factura por subir en el mes de promoción (decisión B): una línea más, sin alarma. */
.tp-sumar { margin: 0 0 6px; font-size: .9rem; color: var(--texto-2); }
.tp-desglose { border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.tp-desglose th { text-align: left; font-weight: 400; color: var(--texto-2); padding: 2px 18px 2px 0; }
.tp-desglose td { text-align: right; padding: 2px 0; white-space: nowrap; }
.tp-desglose .tp-total th, .tp-desglose .tp-total td { font-weight: 600; color: var(--texto); border-top: 1px solid var(--costura); padding-top: 4px; }
.tp-cambio p { margin: 0 0 6px; }
.tp-anular { margin-top: 2px; }
.tp-uso, .tp-siguiente { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--costura); }
.tp-uso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-uso-lista li { display: grid; gap: 6px; font-size: .9rem; }
.tp-barra { display: block; height: 6px; max-width: 320px; border-radius: 999px; background: var(--grafito-panel); box-shadow: inset 0 0 0 1px var(--costura); overflow: hidden; }
.tp-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cobalto); }
.tp-siguiente p { margin: 0 0 6px; }
@media (max-width: 560px) {
  .tp-caja { padding: 14px; }
  .tp-lista { grid-template-columns: 1fr; gap: 4px; }
  .tp-lista dd { margin-bottom: 10px; }
}