/* Recursos individuales: un icono dentro de cada tarjeta, sin capas SVG. */
.accesos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 22px;padding:13px 5px 12px;transform:none;box-shadow:none}
.accesos button{width:100%;gap:9px;min-width:0}
.accesos .acceso-icono{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;height:auto;min-width:0;overflow:hidden;border-radius:16px;background:#fff;box-shadow:none;isolation:isolate}
.accesos .acceso-icono .icono-ajustado{display:block;position:static;flex:none;width:58%;height:58%;max-width:43px;max-height:43px;object-fit:contain;pointer-events:none;filter:none;user-select:none}
.accesos .acceso-icono .icono-tv{width:64%;height:54%}
.accesos .acceso-icono .icono-control{width:42%;height:67%}
.accesos .acceso-icono .icono-club{width:48%;height:60%}
.accesos .acceso-nombre{font-size:clamp(11px,3.1vw,14px);line-height:1.25;font-weight:500}
.nav-avatar{width:44px;height:44px;display:block;border:0;border-radius:50%;overflow:hidden;background:transparent;box-shadow:none;color:inherit;transition:transform .2s}
.nav-avatar img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:50%;animation:none}
.tabs [data-tab="cuenta"]:hover .nav-avatar{transform:translateY(-1px)}
.tabs [data-tab="cuenta"].activa .nav-avatar{box-shadow:none}
.tabs button{min-height:69px;justify-content:flex-end;gap:7px}
.tabs button:not([data-tab="cuenta"]) svg{margin-bottom:6px}
.avatar-personaje{padding:0;border:2px solid #fff;overflow:hidden;cursor:pointer;box-shadow:none;width:clamp(112px,30vw,142px);height:auto;aspect-ratio:1/1;border-radius:50%;display:block;background:transparent}
.avatar-personaje img{width:100%;height:100%;display:block;object-fit:cover}
.nav-avatar.saludo,.avatar-personaje.saludo{animation:saludo-integrado .65s ease-in-out both}
@keyframes saludo-integrado{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}65%{transform:rotate(4deg)}}
button:focus-visible{outline:3px solid #2999ff;outline-offset:3px}
@media(max-width:350px){.accesos{margin-left:16px;margin-right:16px;gap:3px}.accesos .acceso-icono{border-radius:13px}}
@media(prefers-reduced-motion:reduce){.nav-avatar,.avatar-personaje{animation:none!important;transition:none!important}}

.app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}

.app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}

/* Rótulo del canal y programa del prototipo. */
.canal-demo{margin-bottom:19px;line-height:0;letter-spacing:normal}
.logo-canal-uno{display:block;width:57px;height:30px;object-fit:contain;mix-blend-mode:screen}
.pin-vivo i{background:#ff3847;box-shadow:0 0 0 3px #fff3;flex:none}

/* Señal de emisión y control de audio del inicio. */
.pin-vivo{display:inline-flex;align-items:center;gap:7px;background:#ed0813;color:#fff;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.2;font-weight:700}
.pin-vivo .senal-directo{display:block;width:22px;height:22px;flex:none}
.emision{gap:7px;font-size:clamp(10px,2.9vw,14px);white-space:nowrap;line-height:1.3}
.fin-programa{font-weight:500;min-width:0}
.hero-control{width:38px;height:38px;background:#10101055;border:1px solid #fff4;bottom:82px;color:#fff;box-shadow:none}
.hero-control svg{width:25px;height:25px;fill:none;stroke:none}
.hero-control .audio-tachado{display:none}
.hero-control.is-muted .audio-tachado{display:block}
.hero-control.is-muted .audio-ondas{display:none}
.hero-control:active{background:#ffffff26}
@media(max-width:350px){.envivo-info{left:18px;right:18px}.pin-vivo{gap:5px;padding:7px 8px;font-size:11px}.pin-vivo .senal-directo{width:19px;height:19px}.emision{gap:5px;font-size:10px}.hero-indice{bottom:13px;right:18px}}

/* Logo sin fondo y filas de facturación. */
.logo-canal-uno{width:57px;height:30px;object-fit:contain;mix-blend-mode:normal;background:transparent}
.facturacion-lista{padding:0 18px;background:#fff;border:1px solid #e5e5e8;border-radius:22px;box-shadow:0 1px 3px #00000005}
.facturacion-lista button{min-height:80px;padding:20px 0;gap:12px;border-bottom:1px solid #c9c9cc;font-size:17px;line-height:1.3;color:#303236;font-weight:400}
.facturacion-lista button:last-child{border-bottom:0}
.facturacion-lista .icono-cuenta{display:flex;align-items:center;justify-content:center;width:30px;height:32px;flex:0 0 30px;filter:none;color:#383b3b}
.icono-cuenta svg{display:block;width:29px;height:29px}
.facturacion-lista .nombre-fila{flex:1;min-width:0;text-align:left}
.facturacion-lista .flecha{font-family:system-ui,sans-serif;color:#555;font-size:27px;font-weight:300;flex:none}
@media(max-width:350px){.facturacion-lista{padding:0 14px}.facturacion-lista button{font-size:15px;gap:9px;min-height:73px}.facturacion-lista .icono-cuenta{width:27px;flex-basis:27px}}

/* Recortes originales de Facturación y pagos. */
.facturacion-lista .icono-cuenta{width:29px;flex-basis:29px;height:32px;overflow:hidden;background:transparent;filter:none}
.facturacion-lista .icono-cuenta img{display:block;width:28px;height:29px;object-fit:contain;pointer-events:none}
.facturacion-lista button:first-child .icono-cuenta img{width:24px;height:28px}
.facturacion-lista button:nth-child(2) .icono-cuenta img{width:29px;height:25px}
.facturacion-lista button:nth-child(3) .icono-cuenta img{width:28px;height:30px}