/* ── Contenedor Principal ──────────────────────────────────────
   Limita el ancho máximo de toda la página al porcentaje configurado.
   El centrado horizontal se gestiona en style.css con margin: auto. */
.page-wrapper { max-width: 100%; }

/* ── Sección 1: YouTube ────────────────────────────────────────
   Controla el ancho, alto del iframe y visibilidad de la sección.
   display:none oculta completamente la sección si sec1_visible=0. */
.section-youtube { width: 100%; margin-left: auto; margin-right: auto; display: none; }
.youtube-wrapper  { height: 32vh; }

/* ── Sección 2: Acordeón ───────────────────────────────────────
   Controla el ancho de la sección del acordeón y su visibilidad.
   max-height: 9999px permite la animación CSS de apertura del panel
   (transición desde max-height: 0 definida en style.css). */
.section-accordion { width: 100%; margin-left: auto; margin-right: auto;  }
.accordion-content.show { max-height: 9999px; }

/* ── Sección 3: Video Local ────────────────────────────────────
   Controla el ancho de la sección y la altura máxima del elemento <video>.
   max-height en vh mantiene proporciones correctas en cualquier resolución. */
.section-video { width: 70%; margin-left: auto; margin-right: auto;  }
.local-video-wrapper video { max-height: 32vh; }

/* ── Controles del Slider ──────────────────────────────────────
   Oculta los botones prev/next y los puntos indicadores cuando
   slider_controls=0. Útil para modo pantalla sin interacción táctil. */
.slider-controls { display: none; }

/* ── Encabezado del Sitio ──────────────────────────────────────
   Muestra u oculta el <header> con el nombre del sitio y el enlace "Admin".
   En modo TV portrait sin interacción, normalmente se mantiene oculto. */
.header { display: none; }

/* ── Color de Acento ───────────────────────────────────────────
   Aplica el color de acento configurado a todos los elementos de la UI
   que utilizan el color de marca del sistema:
     - .section-tag: etiquetas de título de sección (color texto, borde, fondo semitransparente)
     - .dot.active: punto indicador activo del slider
     - .accordion-header.active: fondo del panel de acordeón activo
     - .btn-upload: botón de subida en el estado placeholder de la sección 3
   Se usan sufijos hexadecimales de opacidad (11=7%, 0d=5%, 1a=10%, 33=20%, 44=27%, 66=40%)
   para crear variantes semitransparentes del mismo color de acento. */
.section-tag {
    color: #00d4ff;
    border-color: #00d4ff44;    /* 27% de opacidad */
    background: #00d4ff11;      /* 7% de opacidad */
}
.dot.active { background: #00d4ff; }                    /* Punto activo: color sólido */
.accordion-header.active { background: #00d4ff0d; }     /* Panel activo: 5% de opacidad */
.btn-upload {
    color: #00d4ff;
    border-color: #00d4ff66;    /* 40% de opacidad */
    background: #00d4ff1a;      /* 10% de opacidad */
}
.btn-upload:hover { background: #00d4ff33; }            /* Hover: 20% de opacidad */