/* --- VARIABLES DE COLOR --- */
:root {
    --bg-dark: #0b0d17;       /* El fondo oscuro de tu web */
    --card-dark: #161b2a;     /* Fondo de las tarjetas/formulario */
    --accent-blue: #2563eb;   /* Color de tus botones */
    --text-light: #ffffff;
    --text-gray: #a1a1aa;
}

/* --- RESET Y BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
    min-height: 100vh;
    padding: 40px 20px; /* Espaciado general de la pantalla */
}

/* --- CONTENEDORES --- */

/* Contenedor del Login (centrado) */
.login-container {
    background-color: var(--card-dark);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 1px solid #2d3748;
    width: 100%;
    max-width: 400px;
    margin: 10vh auto; /* Centra el login vertical y horizontalmente */
}

/* Contenedor del Administrador (Ancho y cómodo) */
.admin-container {
    width: 100%;
    max-width: 1100px; /* Ampliado para que entren las dos columnas */
    margin: 0 auto;
}

/* Las dos tarjetas individuales */
.form-box {
    background-color: var(--card-dark);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 1px solid #2d3748;
    width: 100%; /* Toma el ancho de la columna que le asigne la grilla */
}

/* --- FORMULARIOS Y ENTRADAS --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-gray);
    font-size: 0.9rem;
}

input, select, textarea {
    background: #0f172a;
    border: 1px solid #334155;
    color: white;
    padding: 12px;
    border-radius: 6px;
    width: 100%;
}

textarea {
    height: 120px;
    resize: vertical;
}

select {
    cursor: pointer;
}

/* --- BOTONES --- */
button {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

button:hover {
    background-color: #1d4ed8; /* Azul más oscuro en hover */
}

/* --- GRILLA RESPONSIVE (MAGIA AQUÍ) --- */
.admin-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Tarjeta de carga ligeramente más ancha que la tabla */
    gap: 30px; /* Espacio de separación entre ambas tarjetas */
    align-items: start; /* Evita que una tarjeta se estire obligatoriamente a la altura de la otra */
    margin-top: 20px;
}

/* Cuando la pantalla mide menos de 900px (tablets y celulares) */
@media (max-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr; /* Pasa a tener una sola columna (una abajo de la otra) */
        gap: 20px;
    }
    
    .admin-container {
        padding: 10px 0;
    }
}

/* --- TABLA DE PRODUCTOS --- */
table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid #334155;
    transition: background 0.2s ease;
}

tr:hover {
    background-color: rgba(255, 255, 255, 0.02); /* Brillo sutil al pasar el mouse por la fila */
}

/* --- ALERTAS --- */
.alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid #22c55e;
    color: #4ade80;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}