/* Importamos la tipografía 'Netflix Sans' desde Sol Argentino TV Fuentes */
@import url('https://fuentes.solargentinotv.com.ar/netflixsans.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sevapronto {
    position: absolute;
    margin-top: 0.5em;
    margin-left: 1em;
    font-size: 1.3em;
    color: #fff;
    font-weight: 700;
    text-shadow: 3px 2px 1px #000000;
}

#cirsvp {
    z-index: 1000;
    margin-top: 0.9em;
}

#act {
    margin-top: -8em;
    margin-left: -7.8em;
}

svg {
    width: 100%;
    max-width: 420px; /* Ajusta según sea necesario */
    height: auto;
    color: #fff;
}


body, html {
    font-family: 'Netflix Sans', sans-serif;
    background: #141414;
    color: #fff;
    font-size: 1rem; /* Base font size = 16px */
    height: 100%; /* Asegura que ocupe todo el alto de la pantalla */
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
    display: flex;
    flex-direction: column;
}

.prontodis {margin-left: 3em;margin-top: 1.4em;position: absolute;color: #fff;}

main {
    flex-grow: 1; /* Hace que el contenedor principal ocupe el espacio restante */
    display: flex;
    flex-direction: column;
    gap: 1em; /* Espacio entre las filas */
}

header {
    background-image: url('https://movies.solargentinotv.com.ar/—Pngtree—black background texture advertising_1911402.png');
    background-size: contain; /* Asegura que la imagen cubra todo el header */
    background-position: center; /* Centra la imagen */
    padding: 1.25em; /* Espaciado dentro del header */
    box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

h1 {
    font-size: 2.25em; /* 36px = 2.25em */
    margin-bottom: 2.5em; /* 40px = 2.5em */
    color: #fff; /* Color blanco para el título */
    text-align: center; /* Centrado del título */
}

.desc {
    margin-top: 1.5em; /* Espaciado por encima de la descripción */
    font-size: 1.125em; /* Tamaño de fuente ligeramente mayor */
    color: #ddd; /* Color claro para la descripción */
    text-align: center; /* Centrado del texto de la descripción */
    padding: 0 20px; /* Espaciado interno para que no toque los bordes */
}

.desc p {
    line-height: 1.5; /* Espaciado entre las líneas del párrafo */
    max-width: 50em; /* Ancho máximo para mejorar legibilidad */
    margin: 0 auto; /* Centrado del párrafo */
    margin-top: -5.5em;
    text-align: justify;
}

h4 {
    font-size: 1.2em;
    margin-top: 3em;
    font-weight: normal;
}
nav a:active {
    color: #aaa;
}

header a.active {
    color: #aaa;
}

nav ul {
    display: flex;
    justify-content: center; /* Centra los elementos del menú */
    list-style: none; /* Elimina los puntos de lista */
    top: -0.6em;
    position: relative;
}

nav li {
    margin: 0 1.25em; /* Espaciado entre los elementos del menú */
}

nav a {
    color: #fff; /* Color azul para los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    font-weight: bold; /* Texto en negrita */
    font-size: 1.125em; /* Tamaño de fuente para los enlaces */
    transition: color 0.3s ease; /* Efecto suave para el cambio de color */
    position: relative;
    top: 0.3em;
    font-size: 1.4em;
}

nav :hover {
    color: #aaa; /* Azul más oscuro en hover */
}

.logo {
    position: relative;
    color: #fff !important;
    font-weight: 700;
    font-size: 2em;
    left: 0.78em;
    top: -1.7em;
     /* Esto ajusta el hover al tamaño del texto */
    background: #00000000;
    width: 7em;
    border: 0;
}

.logo:hover {
    color: #aaa !important;
    cursor: pointer;
}



/* Estilos para la barra de búsqueda */
.search-form {
    display: flex;
    justify-content: right;
    position: absolute;
    top: -0.1em;
    right: 2em;
    margin-top: 0.9em;
    z-index: 10;
}

/* Ocultar inicialmente el campo de búsqueda */
.search-form input[type="text"] {
    width: 0;
    opacity: 0;
    visibility: hidden;
    font-family: 'Netflix Sans';
    padding: 10px 0.9em 9px;
    font-size: 16px;
    border: 1px solid #fff;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #fff;
    background: #181818;
    transition: width 0.5s ease, opacity 0.5s ease, visibility 0s ease 0.5s;
}

/* Cuando se activa, el campo de búsqueda se despliega */
.search-form.active input[type="text"] {
    width: 250px;
    opacity: 1;
    visibility: visible;
    transition: width 0.5s ease, opacity 0.5s ease;
    margin-right: -0.04em;
}

/* Estilo para el placeholder */
.search-form input[type="text"]::placeholder {
    color: #fff;
}

/* Botón de búsqueda */
.search-form button {
    font-family: 'FONTAWESOME';
    padding: 10px;
    font-size: 16px;
    background-color: #181818;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: border-radius 0.3s ease;
}

/* Hover del botón */
.search-form button:hover {
    background-color: #444;
}

/* Cuando se activa, el botón cambia su forma */
.search-form.active button {
    border-radius: 0 5px 5px 0;
}

main {
    text-align: center;
    padding: 3.125em; /* 50px = 3.125em */
    flex-grow: 1; /* Asegura que el main ocupe el espacio restante entre el header y el footer */
}

.pelicula h3.matiponcepeli {
    margin-top: 2em;
}

.bell-icon {
    font-family: 'FONTAWESOME';
    position: relative;
    left: 7em;
    top: -0.3em;
}

.catalogo {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 elementos por fila */
    gap: 1em; /* Espacio entre las tarjetas */
    margin-top: 1.25em;
    margin-left: -0.6em;
}

.acercadecont {
    background-color: #181818; /* Fondo blanco para los items */
    border-radius: 0.3em; /* Bordes redondeados */
    width: 100%;
    max-width: 60em; /* 240px = 15em */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.25em; /* 20px = 1.25em */
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.3); /* Sombra negra notable en los items */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 25%;
    padding-left: 3em;
    padding-right: 3em;
}

.acercadecont p {
    font-size: 0.875em; /* 14px = 0.875em */
    color: #fff; /* Gris oscuro para el texto */
    margin-bottom: 1.25em; /* 20px = 1.25em */
    text-align: justify;
    padding: 0.9em;
    flex-grow: 1; /* Permite que la sinopsis ocupe el espacio restante */
    overflow: hidden; /* Evita que el texto se desborde si es muy largo */
}

.acercadecont h1 {
    margin-top: 0.65em;
    margin-bottom: 0.3em;
}

.pelicula img {
    width: 100%;
    height: 200px; /* Establece una altura fija para todas las imágenes */
    object-fit: cover;
    border-radius: 0.3em 0.3em 0 0; /* Bordes redondeados solo en la parte superior */
    margin-bottom: 0.625em; /* 10px = 0.625em */
}

/* Aseguramos que el contenedor de las películas tenga una altura fija */
.pelicula {
    background-color: #181818; /* Fondo blanco para los items */
    border-radius: 0.3em; /* Bordes redondeados */
    width: 100%;
    max-width: 15em; /* 240px = 15em */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.25em; /* 20px = 1.25em */
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.3); /* Sombra negra notable en los items */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 380px; /* Asegura que todas las películas tengan la misma altura */
}

.pelicula h3 {
    font-size: 1.25em; /* 20px = 1.25em */
    margin-bottom: 0.625em; /* 10px = 0.625em */
    text-align: center;
    padding: 0.19em;
    font-weight: 600; /* Para hacerlo un poco más destacado */
    flex-grow: 0; /* No debe expandirse, su altura debe ser fija */
}

.pelicula p {
    font-size: 0.875em; /* 14px = 0.875em */
    color: #fff; /* Gris oscuro para el texto */
    margin-bottom: 1.25em; /* 20px = 1.25em */
    text-align: justify;
    padding: 0.9em;
    flex-grow: 1; /* Permite que la sinopsis ocupe el espacio restante */
    overflow: hidden; /* Evita que el texto se desborde si es muy largo */
}

.pelicula:hover {
    box-shadow: 0 0.3em 1.5em rgba(0, 0, 0, 0.4);
    outline: 0.3em solid white; /* Borde blanco sin afectar el tamaño */
     /* Ajuste para que siga el border-radius */
}

.cir {
    position: relative;
    top: 0.61em;
}

#gdiv {
    position: relative;
    top: 0.61em;
}

.gdiv_jwc {
    position: relative;
    margin-top: 1e;
}

.pelicula h3 {
    font-size: 1.25em; /* 20px = 1.25em */
    margin-bottom: 0.625em; /* 10px = 0.625em */
    text-align: center;
    padding: 0.19em;
    font-weight: 600; /* Para hacerlo un poco más destacado */
    flex-grow: 0; /* No debe expandirse, su altura debe ser fija */
}

.pelicula p {
    font-size: 0.875em; /* 14px = 0.875em */
    color: #fff; /* Gris oscuro para el texto */
    margin-bottom: 1.25em; /* 20px = 1.25em */
    text-align: justify;
    padding: 0.9em;
    flex-grow: 1; /* Permite que la sinopsis ocupe el espacio restante */
    overflow: hidden; /* Evita que el texto se desborde si es muy largo */
}

footer {
    background-image: url('https://movies.solargentinotv.com.ar/—Pngtree—black background texture advertising_1911402.png');
    background-size: contain; /* Asegura que la imagen cubra todo el footer */
    background-position: center; /* Centra la imagen */
    text-align: center;
    padding: 1.25em; /* 20px = 1.25em */
    margin-top: 2.5em; /* 40px = 2.5em */
    position: relative;
    width: 100%;
    bottom: 0;
    font-size: 1.1em;
}

footer p {
    font-size: 0.875em; /* 14px = 0.875em */
    color: #fff;
}

/* Estilos básicos del botón */
.avisame-button, .moreinfobutton {
    display: flex;
    align-items: center;
    background-color: #007BFF00;
    color: white;
    border: none;
     /* Usando 'em' para que sea más responsive */
    font-size: 1em;
    cursor: pointer;
    border-radius: 0 0 0.3em 0.3em; /* Border-radius especificado */
    transition: all 0.3s ease;
    font-family: 'Netflix Sans';
    justify-content: center;
}

.moreinfobutton:hover {
    background: #0022ff00;
}

.moreinfobutton:hover ~ .pelicula {
    box-shadow: none !important;
    outline: none !important;
}

.pelicula:has(.moreinfobutton:hover):hover {
    outline: none !important;
}

.avisame-button .bell-icon {
    margin-right: 0.5em; /* Espacio entre el ícono de la campana y el texto */
}

/* Estilo cuando el botón está en estado "Activado" */
.avisame-button.recordatorio-activado {
    background-color: #fff;
    color: #000;
}

/* Formulario de suscripción */
.subscription-form {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Espacio entre los campos del formulario */
    font-family: 'Netflix Sans';
}

.subscription-form input {
    padding: 0.5em;
    border-radius: 0.3em;
    border: 1px solid #ccc;
    font-size: 1em;
    font-family: 'Netflix Sans';
}

.subscription-form button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 0.5em 1em;
    font-size: 1em;
    cursor: pointer;
    border-radius: 0.3em;
    font-family: 'Netflix Sans';
}

#user-nick {
    color: #007BFF;
    font-family: 'Netflix Sans';
    border: #007BFF 0.2em solid;
    width: 12%;
    height: 32%;
    text-align: center;
    background: #fff;
    font-weight: 700;
    align-content: center;
    border-radius: 0.3em;
    cursor: pointer; /* Añadido para mejorar la interacción con el botón */
}

#logout-btn {
    color: #007BFF;
    font-family: 'Netflix Sans';
    border: #007BFF 0.2em solid;
    width: 12%;
    height: 32%;
    text-align: center;
    background: #fff;
    font-weight: 700;
    align-content: center;
    border-radius: 0.3em;
    cursor: pointer;
    top: -2.5em;
    left: 14.4em;
    justify-content: center;
    text-align: center;
    display: grid;
    margin-top: 0.3em;
}

#logout-btn:hover {
    background-color: #007BFF; /* Cambio de color al pasar el ratón por encima */
    border-radius: 0.3em;
  
    color: white; /* Cambia el color del texto al pasar el ratón */
}
#login-btn {
    color: #007BFF;
    font-family: 'Netflix Sans';
    border: #007BFF 0.2em solid;
    width: 12%;
    height: 32%;
    text-align: center;
    background: #fff;
    font-weight: 700;
    align-content: center;
    border-radius: 0.3em;
    cursor: pointer;
    top: -2.5em;
    left: 14.4em;
    justify-content: center;
    text-align: center;
    display: grid;
    margin-top: 0.3em;
}

#login-btn:hover {
    background-color: #007BFF; /* Cambio de color al pasar el ratón por encima */
    border-radius: 0.3em;
    color: white; /* Cambia el color del texto al pasar el ratón */
}

/* Media Queries para diseño responsive */
@media (max-width: 48em) { /* Máximo 48em = 768px */
    .avisame-button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.4em;
    }

    .subscription-form input {
        font-size: 0.9em;
        padding: 0.4em;
    }

    .subscription-form button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
}

@media (max-width: 30em) { /* Máximo 30em = 480px */
    .avisame-button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.3em;
    }

    .subscription-form input {
        font-size: 0.8em;
        padding: 0.3em;
    }

    .subscription-form button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }
}

/* Media Queries para diseño responsive */
@media (max-width: 48em) { /* Máximo 48em = 768px */
    .avisame-button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.4em;
    }

    .subscription-form input {
        font-size: 0.9em;
        padding: 0.4em;
    }

    .subscription-form button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
}

@media (max-width: 30em) { /* Máximo 30em = 480px */
    .avisame-button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.3em;
    }

    .subscription-form input {
        font-size: 0.8em;
        padding: 0.3em;
    }

    .subscription-form button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }
}

/* Media Queries para diseño responsive */
@media (max-width: 48em) { /* Máximo 48em = 768px */
    .avisame-button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.4em;
    }

    .subscription-form input {
        font-size: 0.9em;
        padding: 0.4em;
    }

    .subscription-form button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
}

@media (max-width: 30em) { /* Máximo 30em = 480px */
    .avisame-button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }

    .avisame-button .bell-icon {
        margin-right: 0.3em;
    }

    .subscription-form {
        gap: 0.3em;
    }

    .subscription-form input {
        font-size: 0.8em;
        padding: 0.3em;
    }

    .subscription-form button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    footer {
        position: relative;
        bottom: 0;
    }
}

@media (max-width: 480px) {
    footer {
        position: relative;
        bottom: 0;
    }
}

/* Estilos para dispositivos pequeños (móviles) */
@media (max-width: 48em) { /* 768px = 48em */
    .pelicula {
        width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
    }

    .catalogo {
        flex-direction: column;
        align-items: center;
    }

    h1 {
        font-size: 1.75em; /* 28px = 1.75em */
    }
}

/* Estilos para pantallas grandes (por ejemplo, tabletas y escritorios grandes) */
@media (min-width: 48.063em) { /* 769px = 48.063em */
    .pelicula {
        width: 100%;
        max-width: 22em; /* 300px = 18.75em */
        height: 100%;
        max-height: 100em;
    }
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    footer {
        position: relative;
        bottom: 0;
    }
}

@media (max-width: 480px) {
    footer {
        position: relative;
        bottom: 0;
    }
}

/* Estilos para dispositivos pequeños (móviles) */
@media (max-width: 48em) { /* 768px = 48em */
    .pelicula {
        width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
    }

    .catalogo {
        flex-direction: column;
        align-items: center;
    }

    h1 {
        font-size: 1.75em; /* 28px = 1.75em */
    }
}

/* Estilos para pantallas grandes (por ejemplo, tabletas y escritorios grandes) */
@media (min-width: 48.063em) { /* 769px = 48.063em */
    .pelicula {
        width: 100%;
        max-width: 22em; /* 300px = 18.75em */
        height: 100%;
        max-height: 100em;
    }
}

/* Estilo para el ícono de la campana */
.notification-icon {
    position: relative;
    cursor: pointer;
    font-size: 1.5em; /* Tamaño ajustable dependiendo de la base de la fuente */
    left: 46.9em;
    top: -2.6em;
    max-width: 10em;
  }
  
  /* El contador de notificaciones en rojo */
  .notification-count {
    position: absolute;
    top: -3.7em;  /* Ajuste basado en la fuente */
    right: 23em;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0.3em;
    font-size: 0.75em; /* Reducción proporcional al ícono */
  }
  
  /* Estilo para el modal de notificaciones */
  .notifications-popup {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 21.5em;
    right: 24.7em;  /* Ajuste de distancia */
    transform: translateY(-50%);
    background-color: #181818;
    width: 22em;  /* 15em en lugar de 250px */
    height: 30em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1em;
    font-size: 1em;
    border-radius: 0.3em;
  }
  
  .notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .notifications-header h4{
  position: relative;
  margin-top: -1em;
  left: 0.3em;
  }

  .notifications-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .notifications-popup ul li {
    padding: 0.5em;
    border-bottom: 0.1em solid #eee;
  }
  
  /* Estilo para el botón de cerrar */
  .notif {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1em;
    position: relative;
    left: 0em;
    color: #007bff;
    top: -0.7em;
  }

  /* Media Queries para pantallas pequeñas (ej. móviles) */
  @media (max-width: 600px) {
    .notification-icon {
      font-size: 1.2em; /* Reducir tamaño del ícono en pantallas pequeñas */
    }
  
    .notification-count {
      top: -0.2em;
      right: -0.2em;
      padding: 0.2em;
      font-size: 0.6em;
    }
  
    .notifications-popup {
      width: 12em;  /* Reducir el tamaño del modal en pantallas pequeñas */
      right: 0.5em; /* Ajustar la posición a la derecha */
    }
  
    .notifications-header {
      font-size: 0.9em;
    }
  
    .notifications-popup ul li {
      padding: 0.4em; /* Reducir padding para pantallas pequeñas */
    }
  
    .notif {
      font-size: 0.9em; /* Reducir tamaño del botón */
    }
  }
  
  /* Media Queries para pantallas medianas (tabletas) */
  @media (max-width: 768px) {
    .notification-icon {
      font-size: 1.4em; /* Ajustar para tabletas */
    }
  
    .notifications-popup {
      width: 13em;  /* Ajustar el tamaño del modal en tabletas */
    }
  
    .notifications-header {
      font-size: 1em;
    }
  
    .notifications-popup ul li {
      padding: 0.45em; /* Ajustar padding */
    }
  
    .notif {
      font-size: 1em; /* Ajustar el tamaño del botón */
    }
  }