/* DASHBOARD */

.dashboard-top{
 display:grid;

 
 grid-template-columns: repeat(2,1fr);

 gap:18px;

 margin-bottom:22px;
}

.mini{
 min-height:120px;

 display:flex;

 flex-direction:column;

 justify-content:center;
}

.mini h3{
 font-size:18px;

 margin-bottom:10px;
}

.mini p{
 font-size:28px;
 font-weight:bold;
}

/* BUSCADOR */

#busqueda{
 width:100%;
 padding:16px;
 border-radius:16px;
 border:none;
 background:#161d2d;
 color:white;
 margin-bottom:20px;
 font-size:16px;
}

/* FORMULARIO */

.formulario-producto{
 display:grid;

 grid-template-columns:
 repeat(auto-fit,minmax(180px,1fr));

 gap:12px;

 margin-bottom:20px;
}

.formulario-producto input{
 background:#161d2d;
 color:white;
 border:none;
 border-radius:14px;
 padding:14px;
}

.formulario-producto button{
 margin-top:0;
}

/* PRODUCTOS */

.productos{
 display:grid;
 grid-template-columns:2fr 380px;
 gap:25px;
}

#productos{
 display:grid;

 grid-template-columns:
 repeat(
 auto-fit,
 minmax(250px,1fr)
 );

 gap:20px;
}

.producto{
 background:white;

 border-radius:20px;

 padding:20px;

 box-shadow:
 0 10px 25px rgba(0,0,0,.25);

 transition:.2s;
}

.producto:hover{
 transform:
 translateY(-4px);
}

.producto h2{
 margin-bottom:10px;
}

.producto p{
 margin-bottom:8px;
 color:#d8d8d8;
}

/* BOTONES */

button{
 width:100%;
 padding:12px;
 border:none;
 background:
 linear-gradient(
 90deg,
 #2563eb,
 #3b82f6
 );

 color:white;

 border-radius:12px;

 margin-top:8px;

 cursor:pointer;

 font-weight:bold;
}

/* CAJAS */

.caja{
 background:white;

 padding:20px;

 border-radius:20px;

 box-shadow:
 0 10px 25px rgba(0,0,0,.25);
}

.caja h2{
 margin-bottom:15px;
}

/* LADO DERECHO */

.lado{
 display:flex;
 flex-direction:column;
 gap:20px;
}

#historial{
 max-height:420px;
 overflow:auto;
}

#carrito{
 max-height:300px;
 overflow:auto;

 display:flex;

 flex-direction:column;

 gap:10px;
}

/* ITEMS CARRITO */

.item-carrito{
 display:flex;

 justify-content:space-between;

 align-items:center;

 background:#f3f6fb;

 padding:12px;

 border-radius:12px;
}

.item-carrito span{
 font-size:18px;
}

.item-carrito button{
 width:auto;

 margin:0;

 padding:6px 12px;
}

/* ALERTAS */

#inventarioBajo{
 display:flex;

 flex-direction:column;

 gap:10px;
}

/* MODO OSCURO */

body.oscuro{
 background:#090c14;
}

body.oscuro .producto,
body.oscuro .caja,
body.oscuro .login-box{
 background:#111827;
}

body.oscuro input{
 background:#1f2937;
 color:white;
}

#pantallaInventario {
 width: 100%;
 padding: 0;
 margin: 0;
 color: white;
 align-self: flex-start;
}

#pantallaInventario .caja {
 background: rgba(255,255,255,0.08);
 border-radius: 16px;
 padding: 20px;
 margin-top: 0;
}

.tabla-inventario {
 width: 100%;
 border-collapse: collapse;
 color: white;
}

.tabla-inventario th,
.tabla-inventario td {
 padding: 12px;
 text-align: left;
 border-bottom: 1px solid rgba(255,255,255,0.15);
}

.formulario-producto input {
 margin: 6px;
 padding: 10px;
 border-radius: 10px;
}

.inventario-top {
 display: flex;
 gap: 12px;
 margin-bottom: 20px;
}
#pantallaInicio,
#pantallaPuntoVenta,
#pantallaInventario,
#pantallaCatalogo {
 width: 100%;
}

.modal-overlay{
 position: fixed;
 inset: 0;

 background: rgba(0,0,0,.55);

 backdrop-filter: blur(4px);

 display: flex;

 justify-content: center;

 align-items: center;

 z-index: 999;
}

.modal-producto{
 background:white;
 width:1000px;
 max-width:95%;
 min-height:650px;
 border-radius:20px;
 padding:30px;
 box-shadow:0 10px 35px rgba(0,0,0,.45);
 border:1px solid #dbe3ef;
}
.modal-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:20px;
}
.modal-header h2{
 margin:0;
 font-size:42px;
}
.modal-header button{
 width:auto;
 padding:10px 16px;
 border-radius:12px;
}
.btn-cerrar-creditos{
 width:42px;
 height:42px;
 border:none;
 border-radius:50%;
 cursor:pointer;
}
.modal-producto input,
.modal-producto select{
 border:1px solid #d1d5db !important;
 background:#f8fafc !important;
}
.modal-header h2{
 font-size:34px;
 font-weight:bold;
 margin:0;
 margin-right:10px;
white-space:nowrap;
}
.modal-header button{
 width:auto;
 padding:8px 14px;
 border-radius:12px;
 margin-left:auto;
}

.modal-botones{
 display:flex;
 justify-content:space-between;
 gap:15px;
 margin-top:30px;
}
.modal-botones button{
 flex:1 !important;
 width:auto !important;
 padding:14px;
}
#buscarInventario {
 width: 520px;
 padding: 15px 18px;
 font-size: 16px;
 border: none;
 border-radius: 12px;
 background: #162038;
 color: white;
 outline: none;
 box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

#buscarInventario::placeholder {
 color: #9aa4c0;
}

.inventario-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 margin-bottom: 20px;
}

.btn-agregar {
 background: linear-gradient(90deg, #ff1979, #ff3f95);
 color: white;
 border: none;
 border-radius: 12px;
 padding: 12px 16px;
 min-width: 170px;
 font-size: 15px;
 font-weight: bold;
 cursor: pointer;
}
#altaRotacion{
 width:100%;
 padding:15px 18px;
 font-size:16px;
 border:none;
 border-radius:12px;
 background:#162038;
 color:white;
 outline:none;
}
body:not(.oscuro) #altaRotacion{
 background:#f8fafc;
 color:#111827;
 border:1px solid #d1d5db;
}
.subir-catalogo{
 margin-top:20px;
 margin-bottom:20px;
}

.subir-catalogo label{
 display:block;
 margin-bottom:10px;
 font-weight:bold;
 color:white;
}

.subir-catalogo input{
 color:white;
}
body:not(.oscuro){
 background:#f3f4f6;
 color:#111827;
}

body:not(.oscuro) .producto,
body:not(.oscuro) .caja,
body:not(.oscuro) .modal-producto{
 background:white;
 color:#111827;
}

body:not(.oscuro) input{
 background:white;
 color:#111827;
 border:1px solid #d1d5db;
}

body:not(.oscuro) .producto p{
 color:#374151;
}
body:not(.oscuro) .tabla-inventario{
 color:#111827;
}

body:not(.oscuro) .tabla-inventario th{
 color:#111827;
}

body:not(.oscuro) .tabla-inventario td{
 color:#374151;
}

body:not(.oscuro) #pantallaInventario .caja{
 background:white;
}

body:not(.oscuro) #pantallaInventario{
 color:#111827;
}
/* DASHBOARD MODO OSCURO */

body.oscuro .mini h3,
body.oscuro .caja h2,
body.oscuro .caja p,
body.oscuro .caja li,
body.oscuro #inventarioBajo,
body.oscuro #historial{
 color:white !important;
}

body.oscuro .caja{
 color:white;
}

body.oscuro .mini{
 color:white;
}
body.oscuro .producto h2{
 color:white;
}

body.oscuro .producto p{
 color:#d1d5db;
}
body:not(.oscuro) .tabla-inventario th,
body:not(.oscuro) .tabla-inventario td{
 border-bottom:1px solid #d1d5db;
}
body.oscuro .modal-producto{
 background:#111827 !important;
 color:white !important;
}

body.oscuro .modal-producto input,
body.oscuro .modal-producto select{
 background:#1f2937 !important;
 color:white !important;
 border:1px solid #374151 !important;
}

body.oscuro .modal-producto h2{
 color:white !important;
}
body.oscuro #busqueda{
 background:#161d2d;
 color:white;
}

body:not(.oscuro) #busqueda{
 background:white;
 color:black;
}

body.oscuro .item-carrito{
 background:#1b2740;
 color:white;
}

body:not(.oscuro) .item-carrito{
 background:#f3f6fb;
 color:black;
}