/* ============================
   Estilos globales del sitio
   ============================ */

/* Contenedor del logo y nombre de la empresa */
.logo {
    display: flex;                /* Muestra los elementos en una fila */
    align-items: center;          /* Alinea verticalmente el texto con el logo */
    gap: 10px;                    /* Espacio entre el logo y el texto */
  }
  
  /* Estilo del nombre de la empresa */
  .nombre-empresa {
    font-size: 20px;              /* Tamaño del texto */
    font-weight: bold;           /* Texto en negrita */
    color: white;                 /* Color del texto (ajústalo según el fondo) */
    font-family: 'Segoe UI', sans-serif;
  }
  

  
/* Aplicamos un color de fondo general estilo rojo oscuro tipo Netflix y eliminamos márgenes y paddings por defecto */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Fuente general del sitio */
    background-color: #1a1a1a; /* Rojo oscuro tipo Netflix */
    color: #ffffff; /* Texto blanco para mejor contraste */
}

/* ============================
   Encabezado y navegación
   ============================ */

/* Estilo general del encabezado, disposición horizontal, espaciado y color de fondo */
header {
    display: flex; /* Elementos en línea (logo y menú) */
    justify-content: space-between; /* Espacio entre logo y navegación */
    align-items: center; /* Alineación vertical */
    background-color: #b30000; /* Rojo fuerte estilo Netflix */
    padding: 10px 30px; /* Espaciado interno del header */
}

/* Ajustes del contenedor del logo */
.logo img {
    height: 60px; /* Altura del logotipo */
}

/* Estilo para los enlaces del menú de navegación */
nav a {
    color: white; /* Texto blanco */
    margin-left: 20px; /* Separación entre ítems del menú */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
}

nav a:hover {
    text-decoration: underline; /* Efecto hover con subrayado */
}

/* ============================
   Sección de categorías
   ============================ */

/* Contenedor de las categorías */

/* Contenedor general de las categorías */
.categorias {
    display: flex; /* Alineación horizontal */
    flex-wrap: wrap; /* Permite salto de línea si no hay espacio */
    justify-content: center; /* Centrado horizontal */
    gap: 20px; /* Separación entre cajas */
    padding: 20px;
    margin-bottom: 40px;
  }
  
  /* Caja de cada categoría */
  .categoria {
    width: 150px;
    height: 180px;
    background-color: #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Imagen arriba, título abajo */
    transition: transform 0.3s;
  }
  
  .categoria:hover {
    transform: scale(1.05);
  }
  
  /* Imagen dentro de cada categoría */
  .imagen-categoria {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  
  .imagen-categoria img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  /* Pie inferior con el texto (nombre del servicio) */
  .titulo-categoria {
    background-color: #000000aa; /* Fondo oscuro con transparencia */
    color: white;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    font-weight: bold;
  }

/* ============================
   Tabla de productos
   ============================ */

/* Ajustes generales para la tabla */
.tabla-productos {
    width: 90%;
    margin: 0 auto 40px auto; /* Centrado horizontal y margen inferior */
    border-collapse: collapse;
    background-color: #2a2a2a; /* Fondo oscuro para la tabla */
    color: white;
}

/* Encabezado de la tabla */
.tabla-productos th {
    background-color: #b30000; /* Rojo fuerte estilo Netflix */
    padding: 12px;
    text-align: center;
}

/* Filas y celdas de la tabla */
.tabla-productos td {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #444;
}

/* Imagen dentro de la celda del producto */
.tabla-productos img {
    width: 80px;
    height: auto;
}

/* ============================
   Sección de noticias
   ============================ */

/* Contenedor general de noticias */
.noticias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

/* Cada casillero de noticia */
.noticia {
    width: 30%;
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Sombra para profundidad */
    text-align: center;
}

/* ============================
   Pie de página (footer)
   ============================ */

footer {
    background-color: #111;
    color: white;
    text-align: center;
    padding: 30px 20px;
    font-size: 14px;
}

/* Enlaces en el footer */
footer a {
    color: #ff4d4d;
    text-decoration: none;
    margin: 0 5px;
}

footer a:hover {
    text-decoration: underline;
}

/* Contenedor de redes sociales */
.redes-sociales {
    margin-bottom: 10px;
}

/* Agrupación de enlaces legales */
.legal {
    margin-bottom: 10px;
}

/* Información adicional de atención al cliente */
.servicio {
    margin-bottom: 10px;
}


/* Asegura que el body ocupe todo el alto visible */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #111; /* Color de fondo oscuro */
  }
  
  /* Contenedor que asegura el layout en pantalla completa */
  body {
    display: flex;
    flex-direction: column;
  }
  
  /* El contenido principal ocupa todo el espacio disponible */
  main {
    flex: 1;
    padding: 20px;
  }
  
  /* Footer normal, sin altura excesiva */
  footer {
    background-color: #111;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
    font-size: 14px;
  }

  main {
    text-align: justify;         /* Justifica el texto */
    line-height: 1.6;            /* Aumenta el interlineado (puedes ajustar el valor si quieres más o menos) */
    padding: 20px;               /* Espaciado interno opcional */
  }

  /* Estilo para la sección de contenido "Nosotros" */
main.nosotros-contenido {
    max-width: 900px;              /* Limita el ancho para que el texto no se vea tan extendido */
    margin: 0 auto;                /* Centra el contenido horizontalmente */
    text-align: justify;           /* Justifica el texto a ambos lados */
    line-height: 1.8;              /* Aumenta el interlineado para mejor legibilidad */
    padding: 30px 20px;            /* Agrega espacio interno */
    color: white;                  /* Color del texto */
  }

  .noticia {
    text-align: justify;       /* 🔧 Justifica el texto para que se vea alineado en ambos márgenes */
    padding: 20px;
    background-color: #2a2a2a;
    border-radius: 12px;
    color: white;
    line-height: 1.6;          /* 🔧 Aumenta el espacio entre líneas para mejor lectura */
    font-family: 'Segoe UI', sans-serif;
  }

  .noticia h3 {
    text-align: center;        /* 📌 Centra horizontalmente el título */
    margin-bottom: 15px;       /* Espacio debajo del título */
    font-size: 1.3rem;          /* Tamaño del texto del título */
    color: #ffffff;            /* Color blanco para contraste */
    font-weight: bold;         /* Opcional: negrita para destacarlo */
  }

  /* Contenedor para mostrar el producto y el formulario uno al lado del otro */
.contenedor-producto-formulario {
    display: flex; /* Organiza en fila */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: flex-start; /* Alinea arriba */
    gap: 40px; /* Espacio entre ambos bloques */
    padding: 30px;
    flex-wrap: wrap; /* Permite que se acomode en pantalla pequeña */
  }
  
  /* Estilo para la sección del producto */
  .detalle-producto {
    flex: 1;
    min-width: 300px;
  }
  
  /* Estilo para el formulario */
  .formulario-compra {
    flex: 1;
    min-width: 300px;
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
  }
  
  .formulario-compra form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .formulario-compra input,
  .formulario-compra button {
    padding: 8px;
    border-radius: 5px;
    border: none;
  
}



/* 🎯 Estilo del contenedor principal del formulario de compra */
.formulario-compra {
    flex: 1; /* Ocupará espacio flexible dentro del contenedor padre (útil si se usa con flexbox) */
    min-width: 300px; /* Evita que el formulario se vuelva demasiado estrecho en pantallas pequeñas */
    background-color: #1a1a1a; /* Fondo oscuro para el bloque del formulario */
    padding: 20px; /* Espaciado interno alrededor de los elementos del formulario */
    border-radius: 10px; /* Bordes redondeados para suavizar el diseño */
  }

  /* 🎯 Estilo del formulario en sí (etiqueta <form>) */
.formulario-compra form {
    display: flex; /* Activamos Flexbox para organizar los elementos internos */
    flex-direction: column; /* Ordenamos verticalmente los inputs y el botón */
    gap: 12px; /* Espacio uniforme entre cada campo del formulario */
  }
  
  /* 🎯 Estilo base para los campos del formulario (inputs y botón) */
.formulario-compra input,
.formulario-compra button {
  padding: 10px; /* Aumentamos el espacio interno para que sean cómodos de usar */
  border-radius: 5px; /* Bordes suavemente redondeados */
  border: none; /* Sin bordes visibles */
}

/* ✅ ESTILO PERSONALIZADO DEL BOTÓN “COMPRAR” */
.formulario-compra button {
    background-color: #b30000; /* Rojo intenso como color principal del botón */
    color: white; /* Texto blanco para buen contraste */
    font-weight: bold; /* Texto en negrita para resaltar */
    font-size: 16px; /* Tamaño de letra adecuado para botones */
    cursor: pointer; /* Cambia el cursor a “mano” al pasar por encima */
    transition: transform 0.1s ease, background-color 0.3s ease; 
    /* Transiciones suaves al presionar o pasar el mouse */
    
    display: flex; /* Flexbox para alinear el ícono y el texto */
    align-items: center; /* Alinea verticalmente el texto e ícono */
    justify-content: center; /* Centra el contenido horizontalmente */
    gap: 8px; /* Espacio entre el ícono (si se usa) y el texto */
  }

  /* 🖱️ EFECTO AL PASAR EL MOUSE (HOVER) */
.formulario-compra button:hover {
    background-color: #e60000; /* Rojo más brillante cuando el cursor está encima */
  }

  /* ✅ EFECTO AL HACER CLIC (ACTIVE) */
.formulario-compra button:active {
    transform: scale(0.96); /* Hace una leve reducción de tamaño (animación sutil de “presionado”) */
  }
  



















  .pago-yape {
    display: flex;                /* Alinea imagen y texto en fila */
    align-items: center;          /* Centra verticalmente */
    gap: 15px;                    /* Espacio entre la imagen y el texto */
    margin: px 0;               /* Separación superior e inferior */
    background-color: #1a1a1a;    /* Fondo sutil para destacarlo */
    padding: 10px 15px;
    border-radius: 8px;           /* Bordes redondeados */
    color: white;                 /* Color del texto */
  }

  .comentarios-usuario {
    margin-top: 20px;              /* Añade espacio hacia arriba, separándolo del contenido anterior */
    background-color: #1e1e1e;     /* Fondo oscuro para que combine con el estilo general del sitio */
    padding: 40px;                 /* Espaciado interno amplio para que los campos no se vean apretados */
    border-radius: 8px;            /* Bordes redondeados para un diseño más moderno */
    color: white;                  /* Texto blanco, ideal sobre fondo oscuro */
}

  .comentarios-usuario textarea,
  .comentarios-usuario input {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: none;
  }
  
  .comentarios-usuario button {
    background-color: #b30000;
    color: white;
    padding: 6px 12px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .comentario {
    background-color: #2b2b2b;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    position: relative;
  }
  
  .comentario button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent;
    border: none;
    color: red;
    cursor: pointer;
  }

  .comentarios-usuario label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
  }

  .comentario-visible {
    margin-top: 10px;
    background-color: #2a2a2a;
    padding: 10px 15px;
    border-radius: 5px;
    color: #ddd;
    font-size: 14px;
  }

  
  /* BOTÓN FLOTANTE DE ADMINISTRADOR */
.boton-flotante-admin {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    text-align: center;
  }
  
  .boton-flotante-admin button {
    background-color: #b30000;
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  }
  
  .menu-admin-oculto {
    display: none;
    margin-top: 10px;
    background-color: #1e1e1e;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
  }
  
  .menu-admin-oculto a {
    display: block;
    padding: 6px;
    color: white;
    text-decoration: none;
    font-size: 13px;
  }
  
  .menu-admin-oculto a:hover {
    background-color: #333;
  }


  /* 🎨 Estilo para el botón de limpiar pedidos */
.btn-limpiar {
    background-color: #b30000;       /* Rojo fuerte tipo Netflix */
    color: white;                    /* Texto blanco */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-bottom: 20px;             /* Espacio debajo del botón */
  }
  
  /* Hover: color más claro */
  .btn-limpiar:hover {
    background-color: #e60000;
  }
  
  /* Active: efecto de presionado */
  .btn-limpiar:active {
    transform: scale(0.96);
  }