/* RENDRAX · plan_chip.css · v68.99.127 (la casa: "el chip del plan en el menu arriba, con color, dias que faltan, cuando renueva; que quede bien
   en responsive"): verde renueva · ambar cancelacion programada · rojo plan terminado o pago pendiente · gris cuenta demo.
   PC: texto completo; celu: compacto ("Starter · 5d" + punto de color) dentro de la barra, sin tocar el padding del body (QA de la casa). */
.plan-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: 22px; padding: 7px 13px !important; border-radius: 999px !important; font-size: 13px !important;
  font-weight: 800 !important; line-height: 1.1; white-space: nowrap; text-decoration: none !important; border: 2px solid transparent; vertical-align: middle; box-sizing: border-box; }
.plan-chip i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.plan-chip .pc-corto { display: none; }
.plan-chip-verde { background: rgba(47,191,113,.16); border-color: rgba(47,191,113,.6); color: #5fe29a !important; }
.plan-chip-ambar { background: rgba(255,176,32,.16); border-color: rgba(255,176,32,.7); color: #ffc85c !important; }
.plan-chip-rojo { background: #D7263D; border-color: #D7263D; color: #fff !important; }
.plan-chip-rojo i { animation: plan-chip-late 1.4s ease-in-out infinite; }
.plan-chip-gris { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #cfd6df !important; }
@keyframes plan-chip-late { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.15); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.35); } }
/* el panel del cliente es claro (selfserve-light): mismos tonos, con contraste sobre papel */
body.ss .plan-chip-verde { background: #e3f7ec; border-color: #2fbf71; color: #146b3c !important; }
body.ss .plan-chip-ambar { background: #fff1cf; border-color: #e0a62a; color: #7a5300 !important; }
body.ss .plan-chip-rojo { background: #D7263D; border-color: #D7263D; color: #fff !important; }
body.ss .plan-chip-gris { background: #eef0f3; border-color: #b9c0c9; color: #3a424d !important; }
body.ss .plan-chip:hover { filter: brightness(.96); }
.plan-franja { display: block; text-align: center; text-decoration: none; padding: 14px 12px; border-radius: 14px; margin: 0 0 14px; font: 900 17px/1.3 Inter, Arial, sans-serif; letter-spacing: .3px; color: #fff; }
.plan-franja-rojo { background: #D7263D; }
.plan-franja-ambar { background: #b7791f; }
.plan-franja-verde, .plan-franja-gris { background: #1f6f45; }
@media (max-width: 760px) {
  .plan-chip { margin-left: 0; padding: 5px 10px !important; font-size: 12px !important; gap: 6px; }
  .plan-chip .pc-largo { display: none; }
  .plan-chip .pc-corto { display: inline; }
  .plan-franja { font-size: 15px; padding: 12px 10px; }
}
/* v68.99.129 (la casa: "Log out queda suelto; ordenar los botones"): la barra del cliente. PC: chip + idioma + links en una fila, Log out al
   final con separador. Celu / Fold: fila 1 = chip + idioma; fila 2 = los links en UNA fila del mismo alto que se desliza de costado. */
body.ss .barra-nav.barra-cliente { flex-wrap: wrap; gap: 8px 6px; align-items: center; }
body.ss .barra-cliente .barra-links { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
body.ss .barra-cliente .barra-links a, body.ss .barra-cliente .barra-links .enlace { white-space: nowrap; padding: 7px 10px; border-radius: 999px; font-size: 14px; line-height: 1.1; }
body.ss .barra-cliente .barra-links a.on { background: #111318; color: #D7F35A; }
body.ss .barra-cliente .barra-salir { margin: 0 0 0 6px; padding-left: 10px; border-left: 2px solid var(--linea, #d9dde3); }
body.ss .barra-cliente .barra-salir .enlace { color: #7a1f2a; font-weight: 700; }
@media (max-width: 860px) {
  body.ss .barra-nav.barra-cliente { flex-basis: 100%; }
  body.ss .barra-cliente .barra-links { flex-basis: 100%; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; gap: 6px; }
  body.ss .barra-cliente .barra-links::-webkit-scrollbar { display: none; }
  body.ss .barra-cliente .barra-links a, body.ss .barra-cliente .barra-links .enlace { flex: 0 0 auto; font-size: 13px; padding: 8px 11px; border: 1px solid var(--linea, #d9dde3); background: #fff; }
  body.ss .barra-cliente .barra-links a.on { border-color: #111318; }
  body.ss .barra-cliente .barra-salir { border-left: 0; margin-left: 2px; padding-left: 0; }
  body.ss .barra-cliente .barra-salir .enlace { border-color: #7a1f2a; }
}

/* v68.99.131: la garantia a la vista en Facturacion */
body.ss .ss-fact-gar, .ss-fact-gar { border-left: 10px solid #2a9d4b; }
body.ss .ss-fact-gar-requested, .ss-fact-gar-requested { border-left-color: #e0a100; }
body.ss .ss-fact-gar-refunded, .ss-fact-gar-refunded { border-left-color: #5b6b7a; }
.ss-fact-gar .ss-gar-estado { font-weight: 700; font-size: 16px; margin: 6px 0 10px; }
.ss-fact-gar #fact-gar-btn { display: inline-block; margin-top: 6px; }
/* v68.99.140 (la casa, desde el celu: "los botones de arriba no se deslizan, no puedo hacer logout"): la fila de links se desliza DE VERDAD
   (el nav y la fila no pueden medir mas que la pantalla) y Log out queda fijo al lado del idioma, fuera de la fila. */
body.ss .barra-cliente .barra-salir-celu { display: none; margin-left: auto; }
body.ss .barra-cliente .barra-salir-celu .enlace { color: #7a1f2a; font-weight: 700; padding: 7px 10px; border: 1px solid #7a1f2a; border-radius: 999px; font-size: 13px; line-height: 1.1; background: transparent; }
/* v68.99.146 (la casa, celu: "el logout no esta; los botones se siguen desplazando"): en la 140 la regla "display: none" de arriba venia DESPUES
   de la del celu y la pisaba: Log out nunca aparecia. Ahora la del celu va ultima. Y los links ya no se deslizan: se envuelven en 2 filas. */
@media (max-width: 860px) {
  body.ss .barra { overflow: visible; }
  body.ss .barra-nav.barra-cliente { min-width: 0; width: 100%; max-width: 100%; }
  body.ss .barra-cliente .barra-links { max-width: 100%; flex-wrap: wrap; overflow-x: visible; overflow: visible; row-gap: 6px; }
  body.ss .barra-cliente .barra-links .barra-salir { display: none; }
  body.ss .barra-cliente .barra-salir-celu { display: inline-flex !important; }
}

/* v68.99.143: etiqueta OFERTA PROMO en el plan Starter */
.plan .plan-promo { display: inline-block; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: #D7FF3A; color: #0B1220; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }