* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: #121212; color: #ffffff; }

/* Variables de Degradado Dorado */
.gold-text {
    background: linear-gradient(135deg, #BF953F, #FCF6BA, #b38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

.gold-bg {
    background: linear-gradient(135deg, #BF953F, #FCF6BA, #b38728, #FBF5B7, #AA771C);
    color: #000;
}

/* Control de Pantallas */
.screen { display: none; }
.screen.active { display: flex; height: 100vh; }
.modulo { display: none; }
.modulo.active { display: block; }

/* ----- ESTILOS DE LOGIN ----- */
#login-screen { justify-content: center; align-items: center; }
.login-box { background-color: #1e1e1e; padding: 40px; border-radius: 10px; text-align: center; border: 1px solid #BF953F; box-shadow: 0 0 25px rgba(191, 149, 63, 0.15); width: 350px; }
.logo { max-width: 120px; margin-bottom: 15px; border-radius: 5px; }
.login-box h2 { margin-bottom: 20px; font-weight: bold; }
input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #333; background: #2a2a2a; color: white; border-radius: 5px; outline: none; transition: 0.3s; }
input:focus { border-color: #FCF6BA; }
button { width: 100%; padding: 12px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: opacity 0.3s; margin-top: 10px; font-size: 16px; }
button:hover { opacity: 0.85; }
.error-msg { color: #ff4d4d; font-size: 14px; margin-top: 10px; height: 15px; }

/* ----- ESTILOS DE LA APP PRINCIPAL ----- */
.sidebar { width: 250px; background-color: #1a1a1a; padding: 20px; border-right: 2px solid #333; display: flex; flex-direction: column; }
.sidebar-header { text-align: center; margin-bottom: 30px; }
.sidebar-logo-img { max-width: 80px; margin-bottom: 10px; }
.text-logo { font-size: 22px; font-weight: bold; }

.menu { list-style: none; flex-grow: 1; }
.menu li { padding: 15px; margin-bottom: 10px; cursor: pointer; border-radius: 5px; transition: 0.3s; color: #ccc; }
.menu li:hover { background-color: #2a2a2a; color: #fff; }
.menu li.active { background: linear-gradient(135deg, #BF953F, #FCF6BA, #b38728); color: #000; font-weight: bold; }

.logout-btn { background-color: transparent; border: 1px solid #BF953F; color: #FCF6BA; }
.logout-btn:hover { background: linear-gradient(135deg, #BF953F, #FCF6BA); color: #000; }

.content { flex-grow: 1; padding: 40px; background-color: #121212; overflow-y: auto; }
h2 { margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }

/* --- Formulario de Productos --- */
.form-container { background-color: #1a1a1a; padding: 25px; border-radius: 10px; border: 1px solid #333; max-width: 500px; margin-top: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #ccc; font-weight: 500; }
select, input[type="number"], input[type="url"], input[type="file"] { width: 100%; padding: 12px; margin-top: 5px; border: 1px solid #333; background: #2a2a2a; color: white; border-radius: 5px; outline: none; }
select:focus { border-color: #FCF6BA; }
#msg-producto { margin-top: 15px; font-weight: bold; text-align: center; }
.success-msg { color: #4CAF50; }

/* --- Tabla de Productos Registrados --- */
.tabla-container { width: 100%; overflow-x: auto; margin-bottom: 50px; }
#tabla-productos { width: 100%; border-collapse: collapse; background-color: #1a1a1a; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
#tabla-productos th, #tabla-productos td { padding: 15px; text-align: left; border-bottom: 1px solid #333; }
#tabla-productos th { background: linear-gradient(135deg, #BF953F, #b38728); color: #000; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
#tabla-productos td { color: #ccc; vertical-align: middle; }
#tabla-productos tr:hover td { background-color: #2a2a2a; color: #fff; }
.img-miniatura { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; border: 1px solid #BF953F; }

/* --- Módulo Órdenes (Punto de Venta) --- */
.pos-container { display: flex; gap: 20px; margin-top: 20px; align-items: flex-start; }

/* Cuadrícula Izquierda */
.pos-menu { flex: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.pos-card { background: #1a1a1a; border: 1px solid #333; border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.pos-card:hover { border-color: #BF953F; transform: translateY(-3px); background: #222; }
.pos-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 5px; margin-bottom: 8px; }
.pos-card h4 { font-size: 13px; margin-bottom: 5px; color: #fff; line-height: 1.2; }
.pos-card p { color: #FCF6BA; font-weight: bold; font-size: 14px; }

/* Ticket Derecha */
.pos-ticket { flex: 1; background: #1a1a1a; border: 1px solid #333; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; min-width: 250px; position: sticky; top: 20px; }
#ticket-lista { list-style: none; margin-bottom: 20px; min-height: 150px; max-height: 350px; overflow-y: auto; }
#ticket-lista li { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; border-bottom: 1px solid #2a2a2a; padding-bottom: 8px; }
.ticket-nombre { flex: 2; color: #fff; }
.ticket-cant { flex: 1; text-align: center; color: #aaa; }
.ticket-precio { flex: 1; text-align: right; color: #FCF6BA; font-weight: bold; }
.ticket-total { font-size: 22px; font-weight: bold; text-align: right; color: #FCF6BA; margin-bottom: 15px; border-top: 1px dashed #333; padding-top: 15px; }