@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

/*================
    General
================*/
header {
    padding-top: 30px;
    padding-bottom: 15px;
    background-color: black;
}

ul {
    padding-left: 0;
}

li {
    list-style-type: none;
}

body {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.90)), 
        url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?w=1920&h=1080&fit=crop');

    background-repeat: no-repeat;
    backdrop-filter: blur(1px);
    background-size: cover;

    background-position: center;

    background-attachment: fixed;
    
    margin: 0; 

    font-family: 'Montserrat', sans-serif;
}

/*================
    Encabezado
================*/
nav{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding-top: 20px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
    border-bottom: 0.5px solid white;
}

nav ul a{
    text-decoration: none;
    color: white
}

nav li:hover{
    color: #51b1a3;
    font-weight: bold;
    transform: scale(1.10); 
}
form#logout {
    padding-bottom: 20px;
}

/*================
    main
================*/
h1{
    display: flex;
    justify-content: center;
    padding-top: 65px;
    padding-bottom: 20px;
    margin: 0px;
    color: white;
}

#contenedor-productos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px !important;
    margin: auto;
    width: 86%;
    margin-bottom: 30px;
}

.carta-producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    width: 200px;
    height: 265px;
    margin: 5px;
    font-size: 15px;
    padding-bottom: 10px;
    text-align: center;
    justify-content: space-evenly;
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.carta-producto:hover, .boton:hover{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: #ccc;
    transform: scale(1.05); 
}


#contenedor-productos h5, #contenedor-productos p {
    margin: 0;
}

#contenedor-productos h5{
    /* esto es para recortar los textos de los titulos de los productos con puntos ... */
    /* para multiples lineas no hay otra manera de hacerlo */
    /* Fallback moderno */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    /* Sintaxis moderna */
    line-clamp: 2;

    overflow: hidden;
    margin-bottom: 10px;
}

.carta-producto img {
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.carta-imagen{
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 5px;
}

.carta-texto{
    height: 25%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    width: 85%;
    color: white;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.carta-id-precio{
    display: flex;
    justify-content: space-around;
}

#listado-productos {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
}

.li-listados {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    color: white;
}

.li-listados p, .li-listados img {
    margin-bottom: 0;
}

.li-botonera {
    display: flex;
    align-items: center;
    font-size: 12px;
}
.texto-id {
    color: white;
    font-size: 17px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#idProd, #idProducto {
width: 50%;
    margin-top: 7px;
    margin-bottom: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}

#idProd:focus, #idProducto:focus {
    border-color: #51b1a3;
    box-shadow: 0 0 5px rgba(81, 177, 163, 0.5);
}

.input-formulario{
    width: 100%;
    padding: 10px; /* Reducido para armonía */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px; /* Consistente con botones */
    color: white;
    font-size: 14px; /* Consistente */
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;

}

.input-formulario:focus {
    border-color: #51b1a3;
    box-shadow: 0 0 5px rgba(81, 177, 163, 0.5);
}

select#categoriaProducto, #productoActivo {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

select#categoriaProducto:focus, #productoActivo:focus {
    border-color: #51b1a3;
    box-shadow: 0 0 5px rgba(81, 177, 163, 0.5);
}

.boton {
    padding: 10px 20px; /* Reducido para botones menos enormes */
    color: #0f172a;
    font-weight: 600; /* Menos negrita para armonía */
    border: none;
    border-radius: 8px; /* Más consistente */
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: white;
    transition: all 0.3s ease;
    font-size: 14px; /* Tamaño de fuente consistente */
}

.boton:hover{
    background: #51b1a3;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
    transform: translateY(-2px);
}

.boton-salir:hover {
    background-color: #ff4d4d; /* Rojo al pasar el mouse */
    color: white;
}
input.boton.boton-salir {
    padding: 5px 10px;
    font-size: 12px;
}

/* 4. Las cajas individuales dentro de Crear (Producto / Usuario) */
.productos-formulario {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 25%; 
    max-width: 400px; /* Tamaño perfecto para que entren los dos en PC */
    margin: 0 auto;
    margin-bottom: 30px;
    background: rgba(30, 41, 59, 0.80);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* 2. Formulario mediano (Modificar) */
.productos-formulario-modificar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 450px; /* Un poquito más ancho por los selects */
    margin: 40px auto;
    background: rgba(30, 41, 59, 0.80);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* 1. Formularios chicos (Consultar y Eliminar) */
.productos-formulario-amplio {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 90%; 
    max-width: 400px; /* ¡Mucho más compacto! */
    margin: 20px auto;
    color: white;
    background: rgba(30, 41, 59, 0.80);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* 5. El Login */
.login-formulario {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90% !important; 
    max-width: 380px !important; /* Tamaño estándar de un login moderno */
    background: rgba(30, 41, 59, 0.80);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 30px; 
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.botones-login {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Esto crea un espacio limpio entre botón y botón */
    width: 100%;
    margin-top: 20px;
}
.botones-login .boton {
    flex: 1; /* Hace que ambos botones midan exactamente lo mismo (50/50) */
    padding: 15px 10px; /* Ajustamos padding para que entre el texto largo */
    font-size: 14px; /* Un toque más chico para "Acceso rápido" */
}

.estilo-formulario{
    width: 100%;
    box-sizing: border-box;
}
.esconder{
    display: none;
}

.mensaje-error strong {
    font-weight: bold;
    color: #ae4f4e;
}

.mensaje-error {
    color: #a94442;
    font-weight: bold;
    background-color: #f2dede;
    border: 2px solid #ebccd1;
    padding: 10px 30px;
    border-radius: 4px;
    font-size: 14px;
}

.div-mensaje-error{
    margin-top: 15px ;
    display: flex;
    justify-content: center;
}

.contenedor-modificar{
    display: flex;
    
}


/* 3. Contenedor de la pantalla Crear (Para que estén lado a lado) */
.main-crear {
    display: flex;
}

.recuadro.formulario{
    width: 100%;
}