html{
  box-sizing:border-box;
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:inherit;
}

body{
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

img,
video{
  display:block;
}

button,
input,
select,
textarea{
  max-width:100%;
  font:inherit;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"]{
  min-height:44px;
  min-width:44px;
}

input,
select,
textarea{
  min-width:0;
}

table{
  max-width:100%;
}

.table-responsive,
.admin-table-wrap,
.table-wrap,
.tokens-history-table-wrap,
.tokens-history-shell,
.profile-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.responsive-scroll-hint{
  color:rgba(255,255,255,.62);
  font-size:.78rem;
}

.modal,
.modal-contenido,
.auth-card,
.modal-tokens-contenido,
.modal-info-tokens-contenido,
.tokens-modal,
.tokens-dialog,
.live-games-panel,
.live-games-dialog,
.game-modal,
.auction-modal,
.admin-modal,
.video-ad-dialog,
.live-exit-confirm-dialog,
.stream-setup-popover{
  max-width:calc(100% - 24px);
}

.modal-overlay,
.modal-tokens,
.modal-info-tokens,
.tokens-modal-overlay,
.live-games-overlay,
.game-modal-overlay{
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

.modal-contenido,
.modal-tokens-contenido,
.modal-info-tokens-contenido,
.tokens-dialog,
.live-games-panel,
.live-games-dialog,
.game-modal,
.auction-modal,
.admin-modal,
.video-ad-dialog,
.live-exit-confirm-dialog,
.stream-setup-popover{
  max-height:calc(100dvh - 24px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

#modal-18.age-gate-overlay{
  position:fixed !important;
  inset:0 !important;
  min-height:100dvh;
  display:grid !important;
  place-items:center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow:auto;
}

#modal-18 .age-gate-dialog{
  width:min(90vw, 420px);
  max-width:420px;
  height:auto;
  max-height:calc(100dvh - 36px);
  display:grid;
  align-content:start;
  justify-items:center;
  gap:1rem;
  padding:clamp(1.5rem, 4vw, 2rem);
  overflow:auto;
}

#modal-18 .age-gate-logo-wrap{
  display:grid;
  place-items:center;
  width:100%;
  margin:0;
}

#modal-18 .age-gate-logo{
  position:static;
  display:block;
  width:clamp(150px, 34vw, 240px);
  max-width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
  transform:none;
}

#modal-18 .age-gate-content{
  display:grid;
  justify-items:center;
  width:100%;
  gap:.85rem;
  text-align:center;
}

#modal-18 .age-gate-content h2,
#modal-18 .age-gate-content p{
  margin:0;
}

#modal-18 .age-gate-content p{
  line-height:1.45;
}

#modal-18 .age-gate-confirmation{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:start;
  gap:.65rem;
  width:100%;
  margin:.25rem 0;
  text-align:left;
}

#modal-18 .age-gate-confirmation input{
  width:auto;
  min-width:18px;
  min-height:18px;
  margin:.15rem 0 0;
}

#modal-18 .age-gate-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
  width:100%;
  margin-top:.25rem;
}

#modal-18 .age-gate-actions button{
  min-height:44px;
  margin:0;
  padding:.7rem 1rem;
}

@media (max-width:520px){
  #modal-18 .age-gate-dialog{
    width:min(100%, 420px);
    padding:1.25rem;
  }

  #modal-18 .age-gate-actions{
    flex-direction:column;
  }

  #modal-18 .age-gate-actions button{
    width:100%;
  }
}

.header-layout,
.panel-derecho-header,
.nav-principal,
.usuario-derecha,
.admin-header,
.admin-nav{
  min-width:0;
}

.header-layout a,
.header-layout button,
.panel-derecho-header a,
.panel-derecho-header button,
.admin-header a,
.admin-header button{
  min-height:44px;
}

.filtro,
.btn-buscar,
.admin-btn,
.ads-admin-input{
  min-width:0;
}

.card-perfil,
.profile-card,
.perfil-card,
.resultado-card,
.admin-card,
.tokens-card,
.live-card{
  min-width:0;
  overflow-wrap:anywhere;
}

@media (max-width:1024px){
  .publicidad{
    max-width:calc(100% - 24px);
  }

  .contenedor,
  .container,
  .page-shell,
  .perfil-contenedor,
  .perfil-publico-shell,
  .admin-main{
    max-width:100%;
  }
}

@media (min-width:1201px){
  .room-layout{
    max-width:calc(100% - 2px);
  }

  .side-stack,
  .chat-card{
    max-width:100%;
  }
}

@media (max-width:768px){
  body{
    min-height:100dvh;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }

  .header-layout{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }

  .nav-principal,
  .panel-derecho-header,
  .usuario-derecha,
  .admin-nav{
    flex-wrap:wrap;
    gap:.65rem;
  }

  .admin-header,
  .filters,
  .stream-actions,
  .stream-controls,
  .controls-grid,
  .header-badges,
  .stream-top-badges,
  .stream-bottom-meta{
    flex-wrap:wrap;
    min-width:0;
  }

  .filters{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .filter-input,
  .filter-select,
  .btn-clear{
    width:100%;
    min-width:0;
  }

  .buscador form,
  .form-busqueda,
  .filtros,
  .filtros-busqueda,
  .grid-2,
  .grid-3,
  .config-layout,
  .perfil-grid,
  .perfil-header,
  .perfil-publico-header,
  .profile-header,
  .owner-form-row,
  .owner-account-grid,
  .owner-stat-grid,
  .tokens-withdraw-grid,
  .tokens-history-filters,
  .tokens-purchase-grid,
  .tokens-custom-grid,
  .withdrawal-form-grid,
  .live-shell,
  .stream-layout,
  .viewer-layout,
  .room-layout,
  .room-header,
  .admin-grid{
    grid-template-columns:1fr;
  }

  .buscador form,
  .form-busqueda,
  .filtros,
  .filtros-busqueda{
    display:grid;
    gap:.75rem;
  }

  .buscador form input,
  .buscador form select,
  .buscador form button,
  .form-busqueda input,
  .form-busqueda select,
  .form-busqueda button,
  .filtros input,
  .filtros select,
  .filtros button,
  .filtros-busqueda input,
  .filtros-busqueda select,
  .filtros-busqueda button{
    width:100%;
}

  input,
  select,
  textarea{
    font-size:16px;
  }

  button,
  input,
  select,
  textarea{
    width:auto;
  }

  .publicidad{
    --ad-frame-height:clamp(220px, 56vw, 300px);
    width:calc(100% - 20px);
    margin:14px auto;
  }

  .ads-carousel-arrow{
    width:38px;
    height:38px;
  }

  .card-perfil,
  .resultado-card{
    width:100%;
    max-width:100%;
  }

  #form-filtros,
  .form-filtros{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.75rem;
    width:100%;
    max-width:min(100%, 720px);
  }

  #form-filtros .filtro,
  #form-filtros .btn-buscar,
  .form-filtros .filtro,
  .form-filtros .btn-buscar{
    width:100%;
    max-width:none;
    min-width:0;
  }

  .resultados-topbar{
    grid-template-columns:auto minmax(0, 1fr);
    max-width:100%;
    padding:12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  }

  .resultados-topbar .topbar-spacer{
    display:none;
  }

  .topbar-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #contenedor-resultados{
    align-items:stretch;
    gap:16px;
  }

  .card-perfil{
    flex-direction:column;
    gap:12px;
    padding:14px;
  }

  .card-media,
  .card-img{
    width:100%;
  }

  .btn-ver-perfil{
    width:100%;
    min-height:44px;
  }

  .tokens-dialog,
  .modal-tokens-contenido,
  .modal-info-tokens-contenido,
  .live-games-dialog,
  .live-games-panel,
  .modal-contenido{
    width:min(100%, 560px);
  }

  .modal-tokens{
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .modal-tokens-contenido{
    width:min(100% - 24px, 560px);
    max-height:calc(100dvh - 24px);
    margin:0 auto;
    padding:24px 18px;
  }

  .tokens-history-head{
    min-width:0;
    display:none;
  }

  .tokens-history-card > div{
    align-items:flex-start;
    overflow-wrap:anywhere;
  }

  .tokens-history-card span,
  .tokens-history-card small,
  .tokens-history-card strong{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .topbar,
  .admin-header{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }

  .topbar-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
  }

  .topbar-actions{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .topbar-action{
    flex:1 1 auto;
    justify-content:center;
    min-width:0;
    white-space:normal;
  }

  .viewer-layout,
  .room-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .video-shell,
  .video-card{
    min-width:0;
    max-width:100%;
  }

  .stream-video,
  .local-video,
  .remote-video{
    width:100%;
    max-height:60dvh;
    object-fit:contain;
  }

  .video-shell:fullscreen,
  .video-shell:-webkit-full-screen{
    width:100dvw;
    height:100dvh;
    min-height:100dvh;
  }

  .chat-card{
    min-height:0;
    max-height:none;
  }

  .chat-messages{
    max-height:min(42dvh, 360px);
    overflow:auto;
    overflow-wrap:anywhere;
  }

  .chat-message,
  .chat-message p,
  .chat-message strong{
    overflow-wrap:anywhere;
  }

  .chat-form{
    grid-template-columns:1fr auto;
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }

  .chat-input{
    min-width:0;
    font-size:16px;
  }

  .live-games-panel{
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom));
    width:auto;
    max-height:calc(100dvh - 24px);
  }

  .live-games-form,
  .auction-bid-form,
  .live-games-grid,
  .roulette-options-grid{
    grid-template-columns:1fr;
  }

  .streams-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stream-card,
  .creator-card,
  .live-creator-profile,
  .chat-card,
  .header-card,
  .summary-card,
  .video-card,
  .controls-card{
    min-width:0;
  }

  .live-creator-shell,
  .creator-head{
    grid-template-columns:1fr;
  }

  .live-creator-gallery-track{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .live-creator-lightbox,
  .live-exit-confirm{
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .ads-admin-card,
  .admin-withdrawal-card,
  .withdrawal-detail-grid,
  .withdrawal-finance-grid{
    grid-template-columns:1fr;
  }

  .perfil-container{
    padding-inline:12px;
    margin-block:16px;
  }

  .perfil-shell,
  .perfil-container .card{
    padding:16px;
  }

  .form-grid,
  #form-crear,
  #form-creadora,
  #form-pass,
  #form-datos,
  .owner-form,
  .owner-verify-form{
    grid-template-columns:1fr;
    min-width:0;
  }

  .form-grid label,
  .owner-form label{
    min-width:0;
    overflow-wrap:anywhere;
  }

  input[type="file"]{
    width:100%;
    max-width:100%;
    white-space:normal;
  }

  .banner-file-picker input[type="file"]{
    width:1px;
    height:1px;
    max-width:1px;
  }

  .preview-grid,
  .selected-media-grid,
  .owner-media-grid{
    grid-template-columns:repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  }

  .upload-box{
    width:min(100% - 24px, 480px);
    max-height:calc(100dvh - 24px);
    overflow:auto;
  }

  .lightbox-content{
    width:calc(100% - 24px);
    max-width:100%;
    height:min(78dvh, 680px);
    margin-inline:auto;
  }

  .profile-actions-menu,
  .profile-avatar-menu{
    max-width:calc(100vw - 24px);
    overflow-wrap:anywhere;
  }

  .admin-main{
    padding:1rem;
  }

  .admin-section-head{
    align-items:stretch;
  }

  .admin-withdrawal-filters{
    grid-template-columns:1fr;
  }

  .admin-withdrawal-filters input,
  .admin-withdrawal-filters select{
    width:100%;
    min-width:0;
  }
  .buscador .ads-carousel-dots{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}

.buscador .ads-dot{
  width:10px !important;
  min-width:10px !important;
  max-width:10px !important;

  height:10px !important;
  min-height:10px !important;
  max-height:10px !important;

  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
}

.buscador .ads-dot.is-active{
  width:24px !important;
  min-width:24px !important;
  max-width:24px !important;

  height:10px !important;
  min-height:10px !important;
  max-height:10px !important;

  border-radius:999px !important;
}
}

@media (max-width:520px){
  .header-layout,
  .admin-header{
    align-items:center;
  }

  .header-layout img,
  .logo img{
    max-height:64px;
    width:auto;
  }

  .panel-derecho-header,
  .usuario-derecha{
    justify-content:center;
  }

  .btn-header,
  .boton-usuario,
  .btn-buscar,
  .admin-btn{
    width:auto;
    max-width:100%;
    white-space:normal;
  }

  .btn-buscar{
    width:100%;
  }

  #form-filtros,
  .form-filtros{
    grid-template-columns:1fr;
  }

  .tokens-tabs,
  .live-games-tabs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .tokens-tab,
  .live-games-tab{
    min-width:0;
    white-space:normal;
  }

  .admin-table,
  .usuarios-table,
  .tabla,
  .tokens-history-table{
    min-width:640px;
  }

  .modal-tokens-contenido{
    padding:22px 14px;
    border-radius:16px;
  }

  .tokens-history-filters{
    grid-template-columns:1fr;
  }

  .live-games-panel{
    border-radius:18px;
  }

  .chat-form{
    grid-template-columns:1fr;
  }

  .chat-send{
    width:100%;
  }

  .streams-grid{
    grid-template-columns:1fr;
  }

  .topbar-action,
  .stream-actions .btn,
  .control-btn{
    width:100%;
  }

  .admin-wrap,
  .admin-main{
    padding-inline:12px;
  }

  .filter-count{
    margin-left:0;
  }

  .perfil-nombre{
    font-size:clamp(1.55rem, 9vw, 2rem);
    overflow-wrap:anywhere;
  }

  .profile-actions,
  .profile-about-actions,
  .upload-preview-head{
    flex-direction:column;
    align-items:stretch;
  }

  .social-action,
  .profile-about-save,
  .profile-about-cancel,
  .upload-clear-btn{
    width:100%;
  }

  .preview-grid,
  .selected-media-grid,
  .owner-media-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .perfil-galeria .galeria-viewport{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
  }

  .perfil-galeria .galeria-viewport::-webkit-scrollbar{
    display:none;
  }

  .perfil-galeria .galeria-track{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:12px;
    width:max-content;
    max-width:none;
    max-height:none;
    overflow:visible;
  }

  .perfil-galeria .galeria-track .gal-item{
    flex:0 0 min(84vw, 340px);
    width:min(84vw, 340px);
    height:auto;
    aspect-ratio:4 / 3;
    scroll-snap-align:center;
  }
}

@media (max-width:390px){
  .header-layout{
    gap:.5rem;
  }

  .publicidad{
    width:calc(100% - 16px);
    border-radius:14px;
  }

  .ads-carousel-dots{
    bottom:8px;
  }

  .tokens-dialog,
  .modal-tokens-contenido,
  .live-games-dialog,
  .live-games-panel,
  .modal-contenido{
    max-width:calc(100% - 16px);
  }
}
/* =====================================================
   INDEX: ENCABEZADO SOLO PARA CELULARES
   No afecta escritorio ni tablets mayores a 600px
   ===================================================== */

@media (max-width: 600px) {
  header.header-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "acciones" !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    padding:
      10px max(12px, env(safe-area-inset-right))
      8px max(12px, env(safe-area-inset-left)) !important;

    gap: 10px !important;
    align-items: center !important;
    justify-items: center !important;

    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  header.header-layout .logo {
    grid-area: logo;
    width: 100% !important;
    margin: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  header.header-layout .logo-img {
    display: block !important;
    width: min(190px, 54vw) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* El nav está vacío en Index, por eso no necesita una fila */
  header.header-layout nav {
    display: none !important;
  }

  header.header-layout .panel-derecho-header {
    grid-area: acciones;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 8px 12px !important;

    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  header.header-layout .usuario-derecha {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    margin: 0 !important;

    position: static !important;
    top: auto !important;
    transform: none !important;
    align-self: center !important;
  }

  header.header-layout .user-menu,
  header.header-layout #user-menu {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  header.header-layout .btn-header,
  header.header-layout .boton-usuario:not(.oculto),
  header.header-layout #user-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 7px !important;

    font-size: 0.86rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  header.header-layout #user-menu-button {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  header.header-layout #user-menu-button svg {
    width: 21px !important;
    height: 21px !important;
  }

  header.header-layout #btn-tokens,
  header.header-layout #btn-sodoma-live,
  header.header-layout #btn-usuarios {
    visibility: visible !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 390px) {
  header.header-layout .logo-img {
    width: min(170px, 52vw) !important;
  }

  header.header-layout .panel-derecho-header {
    gap: 6px 8px !important;
  }

  header.header-layout .btn-header,
  header.header-layout .boton-usuario {
    font-size: 0.78rem !important;
    padding-inline: 4px !important;
  }
}
/* =========================================================
   SODOMA LIVE: CORRECCIÓN EXCLUSIVA PARA CELULARES
   No afecta escritorio ni pantallas mayores a 600px
   ========================================================= */

@media (max-width: 600px) {
  body.page-live-room,
  body.page-sodomalive,
  body.page-stream-view {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ---------------------------------------------------------
     CABECERA COMÚN
     --------------------------------------------------------- */

  .page-live-room .topbar-inner,
  .page-sodomalive .topbar-inner,
  .page-stream-view .topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    padding:
      10px max(12px, env(safe-area-inset-right))
      10px max(12px, env(safe-area-inset-left)) !important;
  }

  .page-live-room .brand,
  .page-sodomalive .brand,
  .page-stream-view .brand {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;
  }

  .page-live-room .brand img,
  .page-sodomalive .brand img,
  .page-stream-view .brand img {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    padding: 3px !important;
  }

  .page-live-room .brand-title,
  .page-sodomalive .brand-title,
  .page-stream-view .brand-title {
    font-size: 0.94rem !important;
    letter-spacing: 0.08em !important;
  }

  .page-live-room .brand-subtitle,
  .page-sodomalive .brand-subtitle,
  .page-stream-view .brand-subtitle {
    font-size: 0.72rem !important;
  }

  /* ---------------------------------------------------------
     ESTADO DE LA SALA
     --------------------------------------------------------- */

  .page-live-room .room-status,
  .page-stream-view .room-status {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    align-items: stretch !important;

    gap: 7px !important;
    margin: 0 !important;
  }

  /* Transmisor: estado principal + conexión + tiempo + público */
  .page-live-room .room-status {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .page-live-room #streamStateBadge {
    grid-column: 1 / -1 !important;
  }

  /* Espectador: estado principal + tiempo + público */
  .page-stream-view .room-status {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-stream-view #streamStateBadge {
    grid-column: 1 / -1 !important;
  }

  .page-live-room .status-pill,
  .page-live-room .meta-pill,
  .page-stream-view .status-pill,
  .page-stream-view .meta-pill {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;

    padding: 7px 8px !important;
    border-radius: 13px !important;

    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }

  /* ---------------------------------------------------------
     BOTONES SUPERIORES
     --------------------------------------------------------- */

  .page-live-room .topbar-actions,
  .page-sodomalive .topbar-actions,
  .page-stream-view .topbar-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    align-items: stretch !important;
    justify-content: stretch !important;

    gap: 8px !important;
    margin: 0 !important;
  }

  .page-live-room .topbar-actions .topbar-action,
  .page-sodomalive .topbar-actions .topbar-action,
  .page-stream-view .topbar-actions .topbar-action {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 42px !important;
    height: auto !important;

    flex: none !important;

    margin: 0 !important;
    padding: 8px 9px !important;

    border-radius: 13px !important;

    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Finalizar ocupa una fila, pero no una mansión de 180 px */
  .page-live-room #btnEndStreamTop {
    grid-column: 1 / -1 !important;
  }

  /* En explorar lives, iniciar transmisión ocupa la segunda fila */
  .page-sodomalive #btnOpenLiveSetup {
    grid-column: 1 / -1 !important;
  }

  /* ---------------------------------------------------------
     CONTENEDOR PRINCIPAL
     --------------------------------------------------------- */

  .page-live-room .page-shell,
  .page-sodomalive .page-shell,
  .page-stream-view .page-shell {
    width: 100% !important;
    max-width: 100% !important;

    padding:
      14px max(10px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  /* =========================================================
     SALA DEL TRANSMISOR
     ========================================================= */

  .page-live-room .room-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .page-live-room .broadcast-stack,
  .page-live-room .side-stack {
    min-width: 0 !important;
    gap: 14px !important;
  }

  .page-live-room .video-card {
    width: 100% !important;
    min-width: 0 !important;

    padding: 10px !important;
    gap: 10px !important;

    border-radius: 18px !important;
  }

  .page-live-room .video-shell {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;

    border-radius: 16px !important;
  }

  .page-live-room #liveVideo {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .page-live-room .video-placeholder {
    padding: 16px !important;
  }

  .page-live-room .video-placeholder strong {
    font-size: 0.92rem !important;
  }

  .page-live-room .video-placeholder p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  /* Botones de cámara y configuración */
  .page-live-room .preview-tools {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;

    display: flex !important;
    flex-direction: row !important;

    width: auto !important;
    gap: 7px !important;
  }

  .page-live-room .preview-tool-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    flex: 0 0 42px !important;

    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
  }

  .page-live-room .preview-tool-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Popovers de cámara y configuración */
  .page-live-room .stream-setup-popover,
  .page-live-room .room-config-popover {
    width: min(360px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    max-height: min(70dvh, 520px) !important;

    overflow-y: auto !important;
    padding: 13px !important;
  }

  .page-live-room .stream-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .page-live-room .stream-quick-actions .control-btn {
    min-height: 42px !important;
    padding: 8px 9px !important;
    font-size: 0.76rem !important;
  }

  /* Tarjeta de controles */
  .page-live-room .controls-card {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .page-live-room .controls-card .panel-title h3 {
    font-size: 0.94rem !important;
  }

  .page-live-room .controls-card .panel-note {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }

  .page-live-room .actions-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
    margin-top: 10px !important;
  }

  .page-live-room .control-btn {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 44px !important;
    height: auto !important;

    flex: 0 1 auto !important;

    padding: 9px 10px !important;
    border-radius: 13px !important;

    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Los botones principales sí llenan su celda, no toda la pantalla */
  .page-live-room #btnStartStream,
  .page-live-room #btnToggleChat {
    width: 100% !important;
  }

  /* Estado actual */
  .page-live-room .notice-stack {
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .page-live-room .notice {
    padding: 10px 11px !important;
    border-radius: 14px !important;

    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .page-live-room .notice strong {
    margin-bottom: 3px !important;
    font-size: 0.82rem !important;
  }

  /* Chat del transmisor */
  .page-live-room .chat-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 12px !important;
    gap: 9px !important;

    border-radius: 18px !important;
  }

  .page-live-room .chat-head h3 {
    font-size: 0.96rem !important;
  }

  .page-live-room .chat-status {
    font-size: 0.76rem !important;
  }

  .page-live-room .chat-empty {
    min-height: 110px !important;
    padding: 14px !important;

    font-size: 0.8rem !important;
  }

  .page-live-room .chat-messages {
    min-height: 120px !important;
    max-height: min(42dvh, 320px) !important;
  }

  .page-live-room .chat-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 8px !important;
  }

  .page-live-room .chat-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 44px !important;

    font-size: 16px !important;
  }

  .page-live-room .chat-send,
  .page-live-room .live-games-trigger {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;

    flex: 1 1 auto !important;

    padding: 8px 12px !important;
    border-radius: 13px !important;
  }

  /* =========================================================
     EXPLORAR TRANSMISIONES
     ========================================================= */

  .page-sodomalive .filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 9px !important;
    margin-top: 14px !important;
  }

  .page-sodomalive .field,
  .page-sodomalive .select,
  .page-sodomalive .btn-filter {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    padding: 10px 12px !important;
    border-radius: 13px !important;

    font-size: 16px !important;
  }

  .page-sodomalive .section-head {
    margin-top: 22px !important;
    margin-bottom: 12px !important;
  }

  .page-sodomalive .section-head h2 {
    font-size: 1.15rem !important;
  }

  .page-sodomalive .section-head p {
    font-size: 0.8rem !important;
  }

  .page-sodomalive .streams-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .page-sodomalive .stream-card {
    border-radius: 17px !important;
  }

  .page-sodomalive .stream-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .page-sodomalive .stream-content {
    padding: 13px !important;
  }

  .page-sodomalive .stream-actions .btn {
    width: auto !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  /* =========================================================
     VISTA DEL ESPECTADOR
     ========================================================= */

  .page-stream-view .viewer-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 14px !important;
  }

  .page-stream-view .video-card {
    min-width: 0 !important;
    border-radius: 18px !important;
  }

  .page-stream-view .video-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 16 / 9 !important;
  }

  .page-stream-view .stream-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
  }

  .page-stream-view .video-placeholder {
    padding: 16px !important;
  }

  .page-stream-view .video-placeholder h2 {
    font-size: 1rem !important;
  }

  .page-stream-view .video-placeholder p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .page-stream-view .video-overlay-top,
  .page-stream-view .video-overlay-bottom {
    left: 8px !important;
    right: 8px !important;

    gap: 6px !important;
  }

  .page-stream-view .video-overlay-top {
    top: 8px !important;
  }

  .page-stream-view .video-overlay-bottom {
    bottom: 8px !important;
  }

  .page-stream-view .overlay-pill {
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }

  .page-stream-view .video-fullscreen-toggle {
    right: 8px !important;
    bottom: 45px !important;

    min-height: 36px !important;
    padding: 6px 9px !important;

    font-size: 0.7rem !important;
  }

  .page-stream-view .below-video {
    padding: 14px !important;
    gap: 13px !important;
  }

  .page-stream-view .stream-title-wrap h1 {
    font-size: 1.2rem !important;
  }

  .page-stream-view .stream-meta {
    gap: 6px !important;
    font-size: 0.76rem !important;
  }

  .page-stream-view .stream-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  .page-stream-view .stream-actions .btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;

    padding: 8px 9px !important;

    font-size: 0.76rem !important;
    white-space: normal !important;
  }

  .page-stream-view #btnFollow {
    grid-column: 1 / -1 !important;
  }

  .page-stream-view .info-card,
  .page-stream-view .creator-card,
  .page-stream-view .live-creator-profile,
  .page-stream-view .suggestions-card,
  .page-stream-view .chat-card {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .page-stream-view .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .page-stream-view .info-pill {
    padding: 10px 8px !important;
    border-radius: 13px !important;
  }

  .page-stream-view .chat-card {
    min-height: 0 !important;
    height: auto !important;
    gap: 9px !important;
  }

  .page-stream-view .chat-messages {
    min-height: 140px !important;
    max-height: min(42dvh, 330px) !important;
  }

  .page-stream-view .chat-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 8px !important;
  }

  .page-stream-view .chat-input {
    flex: 1 1 100% !important;
    width: 100% !important;

    min-height: 44px !important;
    font-size: 16px !important;
  }

  .page-stream-view .chat-form .btn,
  .page-stream-view .live-tip-trigger,
  .page-stream-view .live-games-trigger {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;

    flex: 1 1 auto !important;

    padding: 8px 10px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 370px) {
  .page-live-room .topbar-actions .topbar-action,
  .page-sodomalive .topbar-actions .topbar-action,
  .page-stream-view .topbar-actions .topbar-action {
    font-size: 0.72rem !important;
    padding-inline: 6px !important;
  }

  .page-live-room .status-pill,
  .page-live-room .meta-pill,
  .page-stream-view .status-pill,
  .page-stream-view .meta-pill {
    font-size: 0.68rem !important;
  }

  .page-live-room .actions-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* =====================================================
   INDICADORES DEL CARRUSEL DE PUBLICIDAD
   Mismo tamaño compacto en escritorio y móvil
   ===================================================== */

.buscador .ads-carousel-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.buscador .ads-dot {
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;

  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;
  flex: 0 0 8px !important;
}

.buscador .ads-dot.is-active {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;

  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;

  flex-basis: 20px !important;
  border-radius: 999px !important;
}
/* =====================================================
   MODAL DE USUARIO: TAMAÑO COMPACTO SOLO EN ESCRITORIO
   No modifica la vista móvil
   ===================================================== */

@media (min-width: 769px) {
  #modal-usuario {
    padding: 24px !important;
  }

  #modal-usuario .modal-contenido {
    width: min(460px, calc(100vw - 48px)) !important;
    max-width: 460px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;

    margin: auto !important;
    padding: 32px 36px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border-radius: 18px !important;
  }

  #modal-usuario #vista-principal,
  #modal-usuario #form-login,
  #modal-usuario #form-registro {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  #modal-usuario #login-form,
  #modal-usuario #registro-form {
    width: 100% !important;
    max-width: 380px !important;
    margin-inline: auto !important;
  }

  #modal-usuario .modal-contenido input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;

    margin: 8px 0 !important;
    padding: 10px 12px !important;
  }

  #modal-usuario #vista-principal {
    padding-block: 10px !important;
  }

  #modal-usuario #vista-principal h2,
  #modal-usuario #form-login h3,
  #modal-usuario #form-registro h3 {
    margin: 0 0 20px !important;
  }

  #modal-usuario #btn-ir-login,
  #modal-usuario #btn-ir-registro,
  #modal-usuario #btn-volver-login,
  #modal-usuario #btn-volver-registro,
  #modal-usuario #login-form button[type="submit"],
  #modal-usuario #registro-form button[type="submit"] {
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    min-height: 44px !important;

    margin: 8px 4px !important;
    padding: 11px 20px !important;
  }

  #modal-usuario .cerrar {
    top: 12px !important;
    right: 16px !important;
  }
}