/* =========================
   BASE
========================= */
body{
    font-family: Arial, sans-serif;
    background-color:#1e1e1e;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    margin:0;
    color:#e3e3e3;
    overflow-x:hidden !important;
}

.login-container{
    background:#2e2e2e;
    padding:20px;
    border-radius:5px;
    box-shadow:0 0 15px rgba(0,0,0,.5);
    width:350px;
    text-align:center;
}

/* Formularios */
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:5px; color:#e3e3e3; }
.form-group input,
.form-group select{
    box-sizing:border-box; width:100%; padding:10px;
    border:1px solid #666; background:#3b3b3b; color:#e3e3e3;
    border-radius:5px; font-size:16px;
}
.form-group input::placeholder{ color:#9e9e9e; }
.form-group input[type="submit"]{
    background:#e53935; color:#fff; border:none; cursor:pointer; transition:.2s;
}
.form-group input[type="submit"]:hover{ background:#b71c1c; }

/* Selects nativos */
.form-group select:hover{ border-color:#e53935; }
.form-group select:focus{ outline:none; border-color:#e53935; }

/* =========================
   SELECT2
========================= */
.select2-container{ width:100% !important; }
.select2-container .select2-selection--single{
    height:42px !important; background:#3b3b3b !important; border:1px solid #666 !important;
    color:#e3e3e3 !important; display:flex; border-radius:5px; padding:0; width:100% !important;
    box-sizing:border-box; font-size:16px;
}
.select2-container .select2-selection--single .select2-selection__placeholder{
    font-size:16px !important; color:#9e9e9e !important; display:flex; align-items:flex-start; justify-content:left;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    font-size:16px !important; color:#e3e3e3 !important; display:flex; height:60%;
}
.select2-container .select2-selection--single .select2-selection__arrow{ height:42px !important; right:10px; }
.select2-search--dropdown{ padding:10px; }
.select2-search__field{
    background:#3b3b3b !important; color:#e3e3e3 !important; border:1px solid #666 !important;
    padding:10px; width:100% !important; max-width:100% !important; border-radius:5px; box-sizing:border-box;
}
.select2-dropdown{
    background:#2e2e2e !important; border:1px solid #666 !important;
    width:60% !important; max-width:60% !important; box-sizing:border-box; overflow-x:hidden;
}
.select2-results__option{ color:#e3e3e3 !important; padding:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.select2-results__option--highlighted[aria-selected]{ background:#e53935 !important; color:#fff !important; }

/* =========================
   LAYOUT (Wrapper dividido)
========================= */
/* Sólo cuando existe .wrapper relajamos el centrado del body */
@supports(selector(body:has(.wrapper))){
    body:has(.wrapper){
        align-items:start !important; justify-content:center !important;
        min-height:100vh; height:auto; padding:24px 0;
    }
}

/* El wrapper es GRID, las “cajas” son .sidebar y .content */
.wrapper{
    display:grid !important;
    grid-template-columns:280px 1fr;
    gap:24px;
    width:min(1400px, 100%);
    margin:24px auto;
    padding:0 12px;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

/* Paneles (tarjetas) */
.sidebar, .content{
    background:#2e2e2e;
    border:1px solid #444;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Menú (izquierda) */
.sidebar{
    padding:16px;
    position:sticky; top:24px;
    height:fit-content; max-height:calc(100dvh - 48px);
    overflow:auto;
    color:#e3e3e3;
    width:250px;
}
.sidebar h2{ color:#e3e3e3; margin-top:0; }
.sidebar ul{ list-style:none; padding:0; }
.sidebar li{ margin-bottom:10px; }
.sidebar a{
    text-decoration:none; color:#e3e3e3; transition:background-color .2s;
    padding:8px 12px; display:block; border-radius:5px;
}
.sidebar a:hover{ color:#fff; background:#e53935; }
.sidebar a.logout-btn{ color:#fff; background:#e53935; margin-top:20px; transition:.2s; }
.sidebar a.logout-btn:hover{ background:#b71c1c; }

/* Contenido (derecha) */
.content{
    padding:20px;
    min-height:auto !important;
    max-height:calc(100dvh - 48px);
    overflow:auto;
}

/* =========================
   TABS
========================= */
.tab{ text-align:center; margin:10px 0; }
.tablinks{
    background:#e53935; color:#fff; border:none; padding:10px 130px; font-size:16px;
    margin:5px; cursor:pointer; border-radius:5px; transition:background-color .3s;
}
.tablinks:hover{ background:#b71c1c; }
.tablinks.active{ background:#b71c1c; }
.tabcontent{
    display:none; padding:6px 12px; border-top:none; background:#2e2e2e; color:#e3e3e3;
}
#Productos{ display:block; }
#Trabajos{ display:none; }

/* =========================
   DROPDOWNS MENU
========================= */
.dropdown{ position:relative; }
.dropbtn{ cursor:pointer; }
.dropdown-content{
    display:none; position:relative; background:#3b3b3b;
    box-shadow:0 8px 16px rgba(0,0,0,.2); z-index:1;
}
.dropdown-content a{ color:#fff; padding:12px 16px; text-decoration:none; display:block; }
.dropdown-content a:hover{ background:#b71c1c; }
.dropdown:hover .dropdown-content{ display:block; }

/* =========================
   TABLAS / CAJA
========================= */
.tabla-caja,
#tablaProductos table,
#tablaTrabajos table{
    width:100%;
    border-collapse:collapse;
    text-align:center;
    color:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 0 8px rgba(255,255,255,.1);
    background:#1f1f1f;
}
.tabla-caja th, .tabla-caja td,
#tablaProductos th, #tablaProductos td,
#tablaTrabajos th, #tablaTrabajos td{
    padding:10px; border-bottom:1px solid #444;
}
.tabla-caja thead, #tablaProductos thead, #tablaTrabajos thead{
    background:#2b2b2b; font-weight:bold;
}
.tabla-caja tfoot td{ background:#111; font-weight:bold; border-top:1px solid #555; }

/* Mensajes */
.mensaje-info, .mensaje-error{
    color:#fff; background:#333; padding:10px; border-radius:8px; text-align:center;
    margin-top:15px; max-width:800px; margin-left:auto; margin-right:auto;
}

/* Scroll contenedor de tablas */
.scroll-caja{
    max-height:600px; overflow-y:auto; overflow-x:hidden;
    width:95%; margin:0 auto; border-radius:10px;
    box-shadow: inset 0 0 5px rgba(255,255,255,.05);
}

/* Columnas numéricas centradas */
.tabla-caja td:nth-child(1),
.tabla-caja td:nth-child(3),
.tabla-caja td:nth-child(4),
.tabla-caja td:nth-child(6),
.tabla-caja td:nth-child(7),
.tabla-caja td:nth-child(8),
.tabla-caja th:nth-child(1),
.tabla-caja th:nth-child(3),
.tabla-caja th:nth-child(4),
.tabla-caja th:nth-child(6),
.tabla-caja th:nth-child(7),
.tabla-caja th:nth-child(8){ text-align:center; }

/* Estado orden (select) */
select.estado-orden{
    width:100%; min-width:120px; max-width:160px; padding:8px;
    border-radius:6px; background:#3b3b3b; color:#fff; border:1px solid #777;
    font-size:14px; appearance:none; transition:.2s; text-align:center;
}
select.estado-orden:hover{ background:#444; border-color:#e53935; }
select.estado-orden:disabled{ background:#2e2e2e; color:#888; border-style:dashed; cursor:not-allowed; }
select.estado-orden:focus{ outline:none; border-color:#e53935; box-shadow:0 0 5px rgba(229,57,53,.4); }

/* Última columna imágenes/acciones */
.tabla-caja td:last-child{ text-align:center; }
.tabla-caja td:last-child img{ cursor:pointer; transition:transform .2s; }
.tabla-caja td:last-child img:hover{ transform:scale(1.1); }

/* Estados visuales en la tabla de productos */
#tablaProductos tr.entregado td{ color:#00ff00; font-weight:bold; background:#252525; }
#tablaProductos tr.garantia  td{ color:#b71c1c; font-weight:bold; background:#252525; }
#tablaProductos tr.sinreparacion td{ color:#666; font-weight:bold; background:#252525; }

/* =========================
   MODALES
========================= */
.modal{
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.8); display:flex; justify-content:center; align-items:center;
    z-index:1000;
}
.modal-content{
    background:#1e1e1e; color:#e3e3e3; padding:20px; border-radius:10px; text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,.5); width:400px; max-width:90%;
}
.modal-content h3{ color:#f44336; margin-bottom:20px; }

.checkbox-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:10px; text-align:left; margin-bottom:20px;
}
.checkbox-grid label{ display:flex; align-items:center; gap:8px; font-size:14px; }

.modal-content button{
    background:#f44336; color:#fff; border:none; padding:10px 20px; border-radius:5px;
    font-size:16px; cursor:pointer; transition:background-color .3s;
}
.modal-content button:disabled{ background:#555; cursor:not-allowed; }
.modal-content button:hover:not(:disabled){ background:#d32f2f; }

/* =========================
   PAGINACIÓN
========================= */
.pagination{ text-align:center; margin-top:20px; }
.pagination a{
    display:inline-block; padding:10px 15px; margin:5px; background:#e53935; color:#fff;
    text-decoration:none; border-radius:5px; font-weight:bold; transition:background-color .3s ease;
}
.pagination a:hover{ background:#b71c1c; }
.pagination span{
    display:inline-block; padding:10px 15px; margin:5px; background:#3b3b3b; color:#fff;
    border-radius:5px; font-weight:bold;
}

/* =========================
   ZONAS VARIAS
========================= */
#resultadoMayorista{ min-height:400px; padding:10px; overflow-y:auto; max-height:80vh; }
.contenedor-caja{ display:flex; justify-content:center; padding:20px; width:100%; }

/* =========================
   CARRITO LATERAL
========================= */
#carritoLateral{
    position:fixed; top:0; right:-350px; width:320px; height:100%;
    background:#1e1e1e; color:#fff; padding:15px; box-shadow:-2px 0 10px rgba(0,0,0,.6);
    transition:right .3s ease; z-index:99999; overflow-y:auto; font-family:'Segoe UI', sans-serif;
}
#carritoLateral.abierto{ right:0; }
.carrito-header{ display:flex; justify-content:space-between; align-items:center; font-weight:bold; font-size:18px; margin-bottom:10px; }
#carritoLateralContenido{ max-height:60vh; overflow-y:auto; padding-right:5px; }
.carrito-total{ margin:15px 0; font-size:16px; font-weight:bold; text-align:right; color:#f44336; }
.carrito-footer button{
    width:100%; margin-top:10px; padding:10px; background:#f44336; color:#fff; border:none; border-radius:4px;
    font-weight:bold; transition:background .3s ease; cursor:pointer;
}
.carrito-footer button:hover{ background:#d32f2f; }
.item-carrito{ background:#2a2a2a; padding:10px; margin-bottom:10px; border-radius:6px; border-left:3px solid #f44336; }

/* Botones flotantes varios */
#continuarCarrito, #vaciarCarrito, #cancelarCompra, #terminarVenta{
    position:fixed; bottom:20px; z-index:1000; color:#fff; padding:12px 22px; border-radius:8px;
    cursor:pointer; font-weight:bold; font-size:14px; border:none; transition:background-color .3s ease;
}
#continuarCarrito{ right:20px;  background:#27AE60; }     #continuarCarrito:hover{ background:#1E8449; }
#vaciarCarrito   { right:230px; background:#C62828; }     #vaciarCarrito:hover{ background:#B71C1C; }
#cancelarCompra  { background:#C62828; }                  #cancelarCompra:hover{ background:#B71C1C; }
#terminarVenta   { background:#27AE60; }                  #terminarVenta:hover{ background:#1E8449; }

/* Utilidades */
.bold-text{ font-weight:bold; }
.cruz-eliminar{ color:red; cursor:pointer; padding-right:10px; text-align:center; vertical-align:middle; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:600px){
    .login-container, .wrapper{ width:90%; }
    .sidebar{ padding:10px; position:static; max-height:none; width:auto; }
    .content{ padding:10px; max-height:none; }

    #tablaProductos, #tablaTrabajos{ overflow-x:auto; }
    #tablaProductos table, #tablaTrabajos table{ min-width:100px; }
    #tablaProductos th, #tablaProductos td, #tablaTrabajos th, #tablaTrabajos td{
        padding:5px; font-size:12px;
    }
}

@media (max-width:900px){
    .wrapper{ grid-template-columns:1fr; gap:16px; margin:16px auto; }
}