/* =====================================================================
   COCUYO APP — Ficha de serie horizontal con «medio reproductor» y
   pantallas de dinero (css/serie.css). Ideas de iQIYI con diseño propio:
   negro y lima, nada copiado. Colores: solo variables de base.css (y los
   negros translúcidos sobre el vídeo, como reproductor.css).
   · Ficha (#/ficha/<id>[/<n>]): vídeo 16:9 arriba, fijo al bajar
     (js/pantallas/_horizontal.js); modo apaisado con candado, panel
     lateral y controles que se esconden; debajo información y partes.
   · Mi VIP, recargas de la billetera, anuncios que quedan hoy y
     reportes del panel.
   · Derecha a izquierda (ronda 3): como en reproductor.css, lo del vídeo
     no se voltea (barra, tiempos, botones de abajo, círculos −10/+10,
     «Sigues desde…» y «Siguiente»: físicos). La barra de arriba, «atrás»,
     el candado, el panel lateral (sale por la izquierda) y la ficha siguen
     al idioma.
   ===================================================================== */

/* ---------- Ficha: el reproductor se queda arriba al bajar ---------- */
.sr-pagina { background: #000; }
.sr-reproductor { position: sticky; top: 0; z-index: 20; padding-top: var(--seg-arriba); background: #000; }

/* =====================================================================
   MEDIO REPRODUCTOR (vertical)
   ===================================================================== */
.hz { position: relative; aspect-ratio: 16 / 9; background: #000; color: var(--texto); overflow: hidden; -webkit-user-select: none; user-select: none; }
.hz-marco { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hz-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hz-poster { position: absolute; inset: 0; z-index: 1; display: none; width: 100%; height: 100%; object-fit: cover; }
.hz:is([data-estado="inicio"], [data-estado="cargando"], [data-estado="bloqueado"], [data-estado="pronto"], [data-estado="sinvideo"], [data-estado="proximamente"]) .hz-poster { display: block; }
.hz:is([data-estado="inicio"], [data-estado="proximamente"])::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .35), transparent 40%, transparent 60%, rgba(0, 0, 0, .45));
}
.hz .ic.lleno { fill: currentColor; stroke: none; }

/* Superficie de toques (debajo de los controles). En vertical deja bajar la ficha. */
.hz-toque { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; -webkit-touch-callout: none; }

/* Botón grande del principio: círculo + píldora lima con «Ver parte 1» o «Seguir parte 2 · 1:10». */
.hz-grande {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
}
.hz[data-estado="inicio"] .hz-grande { display: flex; }
.hz-grande .ic {
  width: 60px; height: 60px; padding: 16px 14px 16px 18px; border-radius: 50%;   /* play: ajuste óptico físico */
  background: rgba(0, 0, 0, .45); border: 1.5px solid rgba(255, 255, 255, .7); box-shadow: var(--glow);
}
.hz-grande span {
  max-width: calc(100vw - 48px); padding: 7px 16px; border-radius: 999px; background: var(--grad); color: var(--sobre-acento);
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--glow);
}
.hz-grande:active { transform: translate(-50%, -50%) scale(.97); }

/* Atrás: siempre a la vista en vertical. */
.hz-atras {
  position: absolute; z-index: 9; top: 6px; inset-inline-start: 6px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); color: var(--texto);
}
.hz-atras .ic { width: 22px; height: 22px; }

/* Cargando, renovando la firma o esperando datos. */
.hz-giro {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  display: none; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--lima);
  animation: girar .8s linear infinite; pointer-events: none;
}
.hz[data-estado="cargando"] .hz-giro, .hz[data-renovando] .hz-giro, .hz[data-estado="listo"][data-esperando] .hz-giro { display: block; }
.hz[data-renovando] .hz-centro, .hz[data-esperando] .hz-centro { visibility: hidden; }

/* Controles: aparecen al tocar y se esconden solos; en pausa se quedan. */
.hz-controles {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.hz-controles button, .hz-controles input { pointer-events: auto; }
.hz[data-estado="listo"]:is(.hz-ver, [data-pausado]) .hz-controles { opacity: 1; visibility: visible; }
.hz.hz-bloq .hz-controles { display: none; }

.hz-arriba {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 2px;
  padding-block: 5px 26px; padding-inline: 50px 4px; background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}
.hz-titulo { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; }
.hz-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--texto); }
.hz-ic .ic { width: 22px; height: 22px; }
.hz-ic[aria-pressed="true"] { color: var(--lima); }
.hz-ic:active, .hz-btn:active { background: rgba(255, 255, 255, .12); }

.hz-centro {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45);
}
.hz-centro .ic { width: 26px; height: 26px; }
.hz-centro .ic.lleno { margin-left: 3px; }

.hz-abajo { position: absolute; left: 0; right: 0; bottom: 0; direction: ltr; padding: 24px 4px 0 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.hz-tiempo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto); }
.hz-rango { flex: 1; min-width: 0; height: 26px; accent-color: var(--lima); }

/* Línea fina de progreso cuando los controles no se ven. */
.hz-linea { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: none; direction: ltr; height: 2px; background: rgba(255, 255, 255, .2); pointer-events: none; }
.hz-linea em { display: block; width: 0; height: 100%; background: var(--lima); box-shadow: 0 0 6px var(--lima); }
.hz[data-estado="listo"]:not(.hz-ver):not([data-pausado]):not(.hz-apaisado) .hz-linea { display: block; }

/* Solo en apaisado / solo en vertical. */
.hz:not(.hz-apaisado) [data-solo-apaisado] { display: none !important; }
.hz.hz-apaisado [data-solo-vertical] { display: none !important; }

/* Doble toque (−10/+10 s) y mantener pulsado (2x). Los círculos son físicos:
   la barra va de izquierda a derecha también en RTL (zonaToque en _horizontal.js). */
.hz-salto {
  position: absolute; z-index: 4; top: 50%; width: 76px; height: 76px; margin-top: -38px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45);
  color: var(--texto); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s; pointer-events: none;
}
.hz-salto[data-salto="-1"] { left: 8%; }
.hz-salto[data-salto="1"] { right: 8%; }
.hz-salto.ver { opacity: 1; transform: none; }
.hz-rapido {
  position: absolute; z-index: 5; left: 50%; top: 12px; transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); font-size: 13px; font-weight: 700; pointer-events: none; direction: ltr;
}
.hz-rapido .ic { width: 16px; height: 16px; color: var(--lima); }
.hz[data-rapido] .hz-rapido { display: inline-flex; }

/* «Sigues desde 1:10 · Desde el principio» y «Siguiente: Parte 4». */
.hz-retomar {
  position: absolute; z-index: 8; left: 10px; bottom: 44px; display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 20px); padding-block: 3px; padding-inline: 12px 3px; border-radius: 999px; white-space: nowrap; font-size: 12.5px;
  background: rgba(18, 18, 18, .88); border: 1px solid var(--escarcha-borde); animation: hzSube .25s ease-out;
}
.hz-retomar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hz-retomar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hz-retomar i { font-style: normal; color: var(--texto3); }
.hz-retomar button { padding: 6px 10px; border-radius: 999px; color: var(--lima); font-weight: 600; }
.hz-sig { position: absolute; z-index: 8; right: 10px; bottom: 44px; animation: hzSube .25s ease-out; }
.hz-sig-ir {
  display: flex; align-items: center; gap: 6px; padding-block: 7px; padding-inline: 10px 13px; border-radius: 999px;
  background: var(--lima); color: var(--sobre-acento); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: var(--glow);
}
.hz-sig-ir .ic { width: 16px; height: 16px; }
@keyframes hzSube { from { opacity: 0; transform: translateY(6px); } }

/* Bloqueada, pronto, fallo y la nota de la demostración. */
.hz-aviso { position: absolute; inset: 0; z-index: 7; display: none; place-items: center; padding: 14px; background: rgba(0, 0, 0, .66); text-align: center; }
.hz:is([data-estado="bloqueado"], [data-estado="pronto"], [data-estado="fallo"]) .hz-aviso { display: grid; }
.hz-aviso > div { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 300px; }
.hz-aviso .ic { width: 28px; height: 28px; color: var(--texto2); }
.hz[data-estado="bloqueado"] .hz-aviso .ic { color: var(--lima); }
.hz-aviso p { font-size: 15px; font-weight: 600; }
.hz-aviso small { color: var(--texto3); font-size: 12px; }
.hz-aviso .btn-principal { height: 38px; margin-top: 4px; padding: 0 18px; font-size: 14px; }
.hz[data-estado="sinvideo"] .hz-aviso { display: block; inset: auto 0 0; padding: 18px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.hz-nota { color: var(--texto2); font-size: 12px; }
.hz-proxima {
  position: absolute; z-index: 3; inset-inline-start: 14px; bottom: 12px; padding: 2px 8px; border-radius: 4px;
  background: rgba(0, 0, 0, .7); color: var(--texto); font-size: 12px; font-weight: 600;
}

/* Subtítulos legibles sobre cualquier imagen. */
.hz-video::cue {
  color: #fff; background: rgba(0, 0, 0, .62); line-height: 1.3;
  font-family: "Geist", Roboto, -apple-system, "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

/* =====================================================================
   APAISADO (pantalla completa). Si el móvil no deja fijar la
   orientación, se gira con CSS (.hz-girado).
   ===================================================================== */
body.hz-apaisado-activo { overflow: hidden; }
.hz-apaisado .hz-marco { position: fixed; inset: 0; z-index: 90; }
.hz-apaisado.hz-girado .hz-marco {
  inset: auto; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw;
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}
.hz-apaisado .hz-toque { touch-action: none; }
.hz-apaisado .hz-titulo { visibility: visible; }
.hz-apaisado .hz-arriba { padding: 8px max(14px, env(safe-area-inset-right)) 32px max(8px, env(safe-area-inset-left)); }
.hz-apaisado .hz-abajo {
  padding: 34px max(18px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
}
.hz-apaisado .hz-centro { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.hz-apaisado .hz-centro .ic { width: 30px; height: 30px; }
.hz-apaisado .hz-rapido { top: 60px; }
.hz-apaisado .hz-salto { width: 88px; height: 88px; margin-top: -44px; font-size: 14px; }
.hz-apaisado .hz-retomar { left: max(20px, env(safe-area-inset-left)); bottom: 104px; }
.hz-apaisado .hz-sig { right: max(20px, env(safe-area-inset-right)); bottom: 104px; }
/* Fuera de «listo» (cargando, fallo) queda la barra de arriba para poder salir. */
.hz-apaisado:not([data-estado="listo"]) .hz-controles { opacity: 1; visibility: visible; }
.hz-apaisado:not([data-estado="listo"]) :is(.hz-centro, .hz-abajo) { display: none; }

.hz-botones { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.hz-hueco { flex: 1; }
.hz-btn { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 21px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--texto); }
.hz-btn .ic { width: 22px; height: 22px; }

/* Candado de toques: con él puesto solo se ve el candado (en RTL, a la derecha: ver el final). */
.hz-candado {
  position: absolute; z-index: 8; top: 50%; left: max(18px, env(safe-area-inset-left)); width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); color: var(--texto);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.hz-candado .ic { width: 22px; height: 22px; }
.hz-apaisado[data-estado="listo"]:is(.hz-ver, [data-pausado]) .hz-candado { opacity: 1; visibility: visible; }
.hz-apaisado.hz-bloq:not(.hz-ver) .hz-candado { opacity: 0; visibility: hidden; }
.hz-candado[aria-pressed="true"] { color: var(--lima); background: rgba(0, 0, 0, .6); }

/* Panel lateral (partes, velocidad, calidad, subtítulos…): entra por la derecha (en RTL, por la izquierda) y el vídeo sigue. */
.hz-panel {
  position: absolute; top: 0; inset-inline-end: 0; bottom: 0; z-index: 10; width: min(380px, 48%);
  display: flex; flex-direction: column; padding: 12px max(14px, env(safe-area-inset-right)) 12px 16px;
  background: rgba(8, 8, 8, .94); border-inline-start: 1px solid var(--escarcha-borde); color: var(--texto);
  transform: translateX(100%); visibility: hidden; transition: transform .22s ease-out, visibility 0s linear .22s;
}
.hz:not(.hz-apaisado) .hz-panel { display: none; }
.hz-con-panel .hz-panel { transform: none; visibility: visible; transition: transform .22s ease-out; }
.hz-panel-cab { display: flex; align-items: center; gap: 8px; }
.hz-panel-cab h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-panel-cerrar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--texto2); }
.hz-panel-cerrar .ic { width: 20px; height: 20px; }
.hz-panel-sub { margin: 0 0 10px; color: var(--texto3); font-size: 12px; }
.hz-panel-rejilla { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hz-panel-rejilla::-webkit-scrollbar { display: none; }
.hz-panel .hz-rejilla { grid-template-columns: repeat(5, 1fr); }
.hz-panel-ops { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; overflow-y: auto; }
.hz-panel-ops button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 6px 12px; border-radius: 10px; font-size: 15px; text-align: start;
}
.hz-panel-ops small { display: block; color: var(--texto3); font-size: 12px; }
.hz-panel-ops .ic { width: 20px; height: 20px; color: var(--lima); visibility: hidden; }
.hz-panel-ops button[aria-pressed="true"] { background: var(--acento-suave); color: var(--lima); }
.hz-panel-ops button[aria-pressed="true"] .ic { visibility: visible; }

/* =====================================================================
   REJILLA DE PARTES (ficha y panel apaisado)
   ===================================================================== */
.hz-rangos { display: flex; gap: 8px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.hz-rangos::-webkit-scrollbar { display: none; }
.hz-rangos button { flex: none; padding: 5px 13px; border-radius: 999px; background: var(--sup2); color: var(--texto2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hz-rangos button[aria-selected="true"] { background: var(--acento-suave); color: var(--lima); }
.hz-rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hz-celda {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; overflow: hidden;
  background: var(--sup2); color: var(--texto); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hz-celda:active { transform: scale(.96); }
.hz-celda.actual { background: var(--acento-suave); color: var(--lima); box-shadow: inset 0 0 0 1.5px var(--lima); }
.hz-celda.actual > .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.hz-celda[aria-disabled="true"] { background: var(--sup); color: var(--texto3); }
.hz-celda-marca {
  position: absolute; top: 0; inset-inline-end: 0; display: grid; place-items: center; min-width: 18px; height: 15px; padding: 0 4px;
  border-end-start-radius: 6px; font-size: 8.5px; font-weight: 800; line-height: 1;
}
.hz-celda-marca .ic { width: 10px; height: 10px; stroke-width: 2.6; }
.hz-celda-marca.gratis { background: var(--acento-suave); color: var(--lima); }
.hz-celda-marca.vip { background: var(--db-vip-grad); color: var(--db-vip-texto); }
.hz-celda-marca.ok { background: var(--acento-suave); color: var(--lima); }
.hz-celda-marca.bloq { background: rgba(0, 0, 0, .5); color: var(--texto2); }
.hz-celda-pronto { position: absolute; bottom: 3px; font-size: 8.5px; font-weight: 600; }
.hz-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--texto3); font-size: 12px; }
.hz-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.hz-leyenda .ic { width: 13px; height: 13px; }
.hz-leyenda .ok .ic { color: var(--lima); stroke-width: 2.6; }
.hz-ley { padding: 0 4px; border-radius: 3px; font-size: 9px; font-weight: 800; line-height: 1.5; }
.hz-ley.gratis { background: var(--acento-suave); color: var(--lima); }
.hz-ley.vip { background: var(--db-vip-grad); color: var(--db-vip-texto); }

/* =====================================================================
   FICHA: información y partes
   ===================================================================== */
.sr-info { padding: 14px 16px 0; }
.sr-titulo { font-size: 21px; font-weight: 700; line-height: 1.2; }
.sr-meta { margin-top: 6px; color: var(--texto2); font-size: 13px; }
.sr-actual { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 10px; font-size: 13px; }
.sr-actual b { color: var(--lima); font-weight: 600; }
.sr-actual span { min-width: 0; color: var(--texto2); }
.sr-actual small { color: var(--texto3); font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-etiquetas span { padding: 2px 8px; border-radius: 4px; background: var(--sup2); color: var(--texto2); font-size: 12px; }
.sr-sinopsis { display: -webkit-box; margin-top: 12px; color: var(--texto2); font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-sinopsis.abierta { display: block; }
.sr-plegar { margin-top: 2px; padding: 4px 0; color: var(--lima); font-size: 13px; font-weight: 600; }
.sr-ver { margin-top: 16px; height: 46px; }
.sr-nota { margin-top: 8px; color: var(--texto3); font-size: 12px; }
.sr-acciones { display: flex; justify-content: space-around; gap: 8px; margin-top: 16px; padding: 4px 0 2px; }
.sr-acciones button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; color: var(--texto2); font-size: 12px; }
.sr-acciones .ic { width: 24px; height: 24px; }
.sr-acciones [aria-pressed="true"] { color: var(--texto); }
.sr-acciones [aria-pressed="true"] .ic { fill: var(--lima); stroke: var(--lima); }
.sr-acciones .sr-crear .ic { color: var(--lima); }
.sr-acciones button:disabled { opacity: .5; }
.sr-parte { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--sup); color: var(--texto2); font-size: 14px; }
.sr-parte span { flex: 1; min-width: 0; }
.sr-parte b { color: var(--texto); font-weight: 600; }
.sr-parte .ic { width: 20px; height: 20px; }
.sr-parte .ic:last-child { width: 16px; height: 16px; color: var(--texto3); }
.sr-partes { margin-top: 22px; padding: 0 16px; }
.sr-partes h3 { margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.sr-partes h3 small { margin-inline-start: 4px; color: var(--texto3); font-size: 13px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .hz-retomar, .hz-sig { animation: none; }
  .hz-panel, .hz-salto, .hz-controles, .hz-candado { transition: none; }
}

/* ---------- Tienda: enlace a Mi VIP ---------- */
.vip-mio { color: var(--lima); font-weight: 600; text-decoration: underline; }

/* ---------- Mi VIP ---------- */
.vip-tarjeta { display: flex; align-items: center; gap: 12px; margin: 8px 16px 0; padding: 16px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); }
.vip-tarjeta > .ic { width: 34px; height: 34px; color: var(--texto3); }
.vip-tarjeta.activa { background: linear-gradient(120deg, var(--acento-suave), var(--sup) 70%); border-color: var(--lima); }
.vip-tarjeta.activa > .ic { color: var(--lima); }
.vip-tarjeta div { flex: 1; min-width: 0; }
.vip-tarjeta b { display: block; font-size: 17px; }
.vip-tarjeta small { color: var(--texto2); font-size: 13px; }
.vip-tarjeta em { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--sup3); font-style: normal; font-size: 12px; font-weight: 600; }
.vip-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--sup2); color: var(--texto2); font-size: 13px; }
.vip-aviso .ic { flex: none; width: 18px; height: 18px; color: var(--lima); }
.vip-botones { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 4px; }
.vip-explica { color: var(--texto2); font-size: 13px; }
.vip-enlace { display: block; padding: 10px 16px; color: var(--texto3); font-size: 13px; text-align: center; text-decoration: underline; }

/* ---------- Billetera: recargas ---------- */
.bl-recargas b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-pedido { display: flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 2px; color: var(--texto3); font-size: 11.5px; }
.bl-recargas .bl-pedido span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-pedido .ic { flex: none; width: 13px; height: 13px; }
.db-movs em.bl-estado { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--sup2); font-size: 12px; font-weight: 600; }
.bl-estado.ok { background: var(--acento-suave); color: var(--lima); }
.bl-estado.espera { color: var(--db-moneda); }
.bl-estado.fuera { color: var(--texto3); }

/* ---------- Recompensas: anuncios que quedan hoy ---------- */
.rc-anuncios { display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 10px; padding: 12px; border-radius: 12px; background: var(--sup); }
.rc-anuncios > .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--lima); }
.rc-anuncios > span { flex: 1; min-width: 0; }
.rc-anuncios-txt { display: block; font-size: 14px; }
.rc-anuncios-txt b { color: var(--lima); }
.rc-anuncios small { display: block; margin-top: 2px; color: var(--texto3); font-size: 12px; }
.rc-anuncios a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--lima); font-size: 13px; font-weight: 600; }
.rc-anuncios a .ic { width: 16px; height: 16px; }

/* ---------- Panel: reportes de problemas ---------- */
.ad-reportes td { vertical-align: top; }
.ad-reportes td b { font-weight: 600; }
.ad-reportes td small { display: block; margin-top: 2px; color: var(--texto3); font-size: 12px; font-weight: 400; }
.ad-reportes td:last-child { color: var(--texto2); font-size: 12px; font-weight: 400; white-space: nowrap; }

/* ---------- Derecha a izquierda (ar, he, fa, ur) ---------- */
/* Barra de arriba del apaisado volteada (salir a la derecha); cada lado con
   su margen de seguridad físico. */
[dir="rtl"] .hz-apaisado .hz-arriba { padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
/* Dentro de la fila de abajo (izquierda a derecha) los textos siguen en su idioma. */
[dir="rtl"] .hz-btn span { direction: rtl; }
/* Candado a la derecha y panel lateral por la izquierda, cada uno con su margen de seguridad físico. */
[dir="rtl"] .hz-candado { left: auto; right: max(18px, env(safe-area-inset-right)); }
[dir="rtl"] .hz-panel { padding-left: max(14px, env(safe-area-inset-left)); padding-right: 16px; }
[dir="rtl"] .hz:not(.hz-con-panel) .hz-panel { transform: translateX(-100%); }