body {

  background-image: url('fondo_main.png'); /* ruta de la imagen */
    background-size: cover;      /* cubre toda la pantalla */
    background-position: center; /* centra la imagen */
    background-repeat: no-repeat;
    background-attachment: fixed; /* opcional: que quede fija al hacer scroll */
	color: red; /* cambia a rojo, negro, azul, etc. */
}


.mi-div {
    color: white;
	font-size: 28px
}
/* Contenedor oculto por defecto */
.hidden {
  display: none;
}

/* Contenedor visible cuando está logueado */
.visible {
  display: block;
}

/* Contenedor principal */
.emby-container {
    width: 100vw;      /* 90% del ancho de la pantalla */
    height: 100vh;    /* 80% de la altura de la ventana */
    margin: 0% auto; /* centrado horizontal y vertical */

}
.emby-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ajuste para pantallas pequeñas (móviles y tablets) */
@media (max-width: 768px) {
    .emby-container {
        height: 70vh; /* reduce altura en móviles */
        margin: 10px auto;
    }
}

/* Contenedor principal */
.jellyfin-container {
    width: 100vw;      /* 90% del ancho de la pantalla */
    height: 100vh;    /* 80% de la altura de la ventana */
    margin: 0% auto; /* centrado horizontal y vertical */
}
.jellyfin-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hacer las tabs táctiles y grandes */
.nav-tabs {
    display: flex !important;       /* Forzar flex layout */
    
}

.nav-tabs > li {
    flex: 1 1 auto !important;      /* Cada tab ocupa espacio proporcional */
}

.nav-tabs > li > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;     /* Texto más grande */
    padding: 15px 10px !important;  /* Más espacio para tocar */
    min-height: 50px !important;    /* Alto mínimo para móviles */
    text-align: center !important;
}


/* Splash pantalla completa */
#splash {
    position: fixed;
    inset: 0; /* reemplaza top/left/width/height */

    display: none;
    justify-content: center;
    align-items: center;

    background-color: rgba(0,0,0,0.9);
    z-index: 99999;
}

#splash::before {
    content: "";
    width: 60%;
    height: 60%;
    background: url('banner jellyfion.png') center/contain no-repeat;
}

/* Contenido centrado */
.splash-content {
    text-align: center;
}

/* Animación opcional */
.splash-content h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.splash-content p {
    font-size: 18px;
    opacity: 0.7;
}


/* Fondo oscuro tipo bloqueo */
.overlay-acceso {
    position: fixed; /* cubre toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.7); /* fondo oscuro transparente */

    display: flex;
    justify-content: center; /* centrar horizontal */
    align-items: center;     /* centrar vertical */

    z-index: 9999; /* encima de todo */
}
/* Botón */
.btn-regresar {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;

    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Mensaje */
.mensaje-acceso {
    color: white;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 20px 30px;

    /* Contorno rojo */
    text-shadow:
        -2px -2px 0 red,
         2px -2px 0 red,
        -2px  2px 0 red,
         2px  2px 0 red;



@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}

.nav-tabs {
  margin-bottom: 15px;
}

.header h3 {
  padding-bottom: 19px;
  margin-top: 0;
  margin-right: 0px;
 margin-right: 0px; 
  margin-bottom: 0;
  line-height: 40px;
  text-align: center;
}

.sub-tabs {
  border-bottom: none;
  float: right;
}

.sub-tabs>li {
  float: right;
  clear: right;
  font-size: 12px;
}

.sub-tabs>li>a {
  padding-top: 5px;
  padding-bottom: 5px;
}

.sub-tabs>li.active>a, .sub-tabs>li.active>a:hover, .sub-tabs>li.active>a:focus {
  border-color: #fff;
}

.sub-tabs>li>a:hover {
  background-color: inherit;
  border-color: #fff;
}