:root {
    --color-verde: #4CAF50;
    --color-verde-oscuro: #388e3c;
    --color-calipso: #20B2AA;
    --color-texto: #334155;
    --color-fondo: #f8fafc;
    --color-borde: #cbd5e1;
    --color-peligro: #e63946;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--color-fondo); color: var(--color-texto); line-height: 1.6; text-align: justify;}

.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header { background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
.contenedor-navegacion { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1200px; margin: 0 auto; }
.logo { font-size: 1.5rem; font-weight: bold; color: var(--color-verde-oscuro); text-decoration: none; }

.titulo-verde .h2{
    color: #388e3c;
}
.titulo-blanco{
    color: #ffffff;
}

.derechos-reservados{
    padding: 10px;
}

/* Catálogo y Grillas */
.diseno-catalogo { display: grid; grid-template-columns: 260px 1fr; gap: 30px; margin: 30px auto; }
.barra-filtros { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); height: fit-content; }
.grilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

.tarjeta-producto { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; transition: transform 0.2s; }
.tarjeta-producto:hover { transform: translateY(-3px); }
.tarjeta-producto img { width: 100%; height: 200px; object-fit: cover; background: #f1f5f9; }
.info-producto { padding: 15px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; color: var(--color-verde--oscuro);}
.titulo-producto { font-size: 1.05rem; font-weight: bold; color: var(--color-verde--oscuro); }
.precio-producto { font-size: 1.2rem; font-weight: bold; color: var(--color-verde); }

/* Paneles y Formularios */
.tarjeta-login, .contenedor-admin { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; max-width: 400px; margin: 50px auto; }
.contenedor-admin { max-width: 1200px; }
.grupo-formulario { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
.grupo-formulario input, .grupo-formulario select, .grupo-formulario textarea { padding: 12px; border: 1px solid var(--color-borde); border-radius: 6px; }

/* Botones */
.boton-principal { background-color: var(--color-verde); color: white; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; }
.boton-principal:hover { background-color: var(--color-verde-oscuro); }
.boton-peligro { background-color: var(--color-peligro); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }

/* Tablas Adaptables */
.tabla-responsiva { width: 100%; overflow-x: auto; margin-top: 20px; }
table.tabla-admin { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
table.tabla-admin th, table.tabla-admin td { border: 1px solid var(--color-borde); padding: 12px; text-align: left; }
table.tabla-admin th { background-color: #f1f5f9; color: var(--color-verde-oscuro); }

/* Media Queries Responsivas */
@media (max-width: 900px) {
    .diseno-catalogo { grid-template-columns: 1fr; gap: 20px; padding: 0 10px; }
    .barra-filtros { width: 100%; }
    
}

@media (max-width: 600px) {
    .grilla-productos { grid-template-columns: 1fr; }
    .contenedor-navegacion { flex-direction: column; gap: 10px; text-align: center; }
    .tarjeta-login { margin: 20px 10px; width: auto; }
}

/* Correcciones de responsividad para el panel de administración en móviles */
@media (max-width: 1024px) {
    /* Cambiar el formulario principal de productos a 2 columnas en tablets/pantallas medianas */
    main.contenedor form[method="POST"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Ajustar márgenes generales del contenedor admin en móviles */
    .contenedor-admin {
        padding: 15px !important;
        margin: 15px 10px !important;
        width: auto !important;
    }

    /* Convertir el formulario principal de productos a 1 sola columna en celulares */
    main.contenedor form[method="POST"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Forzar que los elementos de ancho completo ocupen bien el espacio */
    .grupo-formulario[style*="grid-column"], 
    .bloque-seccion-admin {
        grid-column: 1 / -1 !important;
    }

    /* Alinear los botones del encabezado de navegación en dispositivos móviles */
    .contenedor-navegacion {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 15px 10px;
    }

    .contenedor-navegacion > div {
        flex-direction: column;
        gap: 8px !important;
        width: 100%;
    }

    /* Asegurar desplazamiento horizontal suave en tablas grandes sin romper la pantalla */
    .tabla-responsiva {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reducir ligeramente el tamaño de fuente en las tablas para que entren mejor */
    table.tabla-admin th, table.tabla-admin td {
        padding: 8px 10px !important;
        font-size: 0.82rem;
    }

    /* Apilar los botones de acciones rápidas en la tabla si es necesario */
    td[style*="display: flex"] {
        flex-direction: column;
        gap: 4px !important;
    }
}

/* Ocultar la barra de navegación superior solo en celulares cuando están girados en horizontal */
@media (max-width: 991.98px) and (orientation: landscape) {
    .navbar.sticky-top {
        display: none !important;
    }
}