/*
 * light-views.css
 * Extiende el sistema de tokens de modal-light.css a las vistas de página:
 *   · gestion.php     — formulario nuevo usuario, tabla de usuarios
 *   · pedidos.php     — cards de pedido, badges de estado, filtros
 *   · productos.php   — tabla de productos, stats, toolbar filtros
 *   · vehiculos.php   — tabla de vehículos, stats, toolbar filtros
 *
 * Cargar DESPUÉS de modal-light.css:
 *   <link rel="stylesheet" href="/css/modal-light.css"/>
 *   <link rel="stylesheet" href="/css/light-views.css"/>
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════
   FONDO DE PÁGINA (área de contenido, no el sitio entero)
   Aplica a los contenedores principales de cada vista admin.
══════════════════════════════════════════════════════════════════════════ */
#gestionApp,
#productosApp,
#vehiculosApp,
.ped-page {
  background : #eef0f7 !important;
}

/* Wrap interior */
.prod-main-wrap,
.veh-main-wrap,
.ped-wrap,
.g-panel {
  background : transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   CARDS CONTENEDORAS (g-card, prod-table-card, veh-table-card, ped-card)
══════════════════════════════════════════════════════════════════════════ */
.g-card,
.prod-table-card,
.veh-table-card,
.stat-card {
  background   : #ffffff !important;
  border-color : var(--ml-border) !important;
  box-shadow   : 0 2px 12px rgba(10,18,80,.07) !important;
}

/* Títulos de card */
.g-card-title {
  color : var(--ml-text) !important;
}
.g-card-title::before {
  background : var(--gold) !important;
}

/* Stats */
.stat-label { color : var(--ml-text-muted) !important; }
.stat-value { color : var(--ml-text)       !important; }
.stat-value.gold  { color : var(--ml-gold)    !important; }
.stat-value.green { color : var(--ml-success) !important; }
.stat-value.red   { color : var(--ml-danger)  !important; }


/* ══════════════════════════════════════════════════════════════════════════
   TABS DE SECCIÓN (g-tabs / g-tab — gestion.php)
══════════════════════════════════════════════════════════════════════════ */
.g-tabs {
  background    : #ffffff !important;
  border-bottom : 2px solid var(--ml-border) !important;
}
.g-tab {
  color : var(--ml-text-muted) !important;
}
.g-tab.active {
  color        : var(--ml-text)  !important;
  border-bottom-color : var(--gold) !important;
}
.g-tab:hover:not(.active) {
  color : var(--ml-text) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   TOOLBAR / BUSCADORES / FILTROS
   (prod-toolbar, veh-toolbar, g-toolbar, ped-toolbar)
══════════════════════════════════════════════════════════════════════════ */

/* Inputs de búsqueda */
.prod-search,
.veh-search,
.g-search,
.g-input {
  background   : #ffffff !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text)   !important;
  box-shadow   : 0 1px 4px rgba(10,18,80,.06) !important;
}
.prod-search:focus,
.veh-search:focus,
.g-input:focus {
  border-color : var(--gold) !important;
  box-shadow   : 0 0 0 3px rgba(245,204,62,.15) !important;
  outline      : none;
}
.prod-search::placeholder,
.veh-search::placeholder,
.g-input::placeholder {
  color : var(--ml-text-ph) !important;
}

/* Selects de filtro */
.prod-filter-sel,
.veh-filter-marca,
.g-filter-rol,
.g-select,
.sort-select {
  background-color  : #ffffff !important;
  border-color      : var(--ml-border) !important;
  color             : var(--ml-text)   !important;
  background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7299' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat   : no-repeat !important;
  background-position : right 12px center !important;
  box-shadow        : 0 1px 4px rgba(10,18,80,.06) !important;
}
.prod-filter-sel:focus,
.veh-filter-marca:focus,
.g-filter-rol:focus,
.g-select:focus {
  border-color : var(--gold) !important;
  box-shadow   : 0 0 0 3px rgba(245,204,62,.15) !important;
  outline      : none;
}
.prod-filter-sel option,
.veh-filter-marca option,
.g-filter-rol option,
.g-select option {
  background : #fff !important;
  color      : var(--ml-text) !important;
}

/* Contador de resultados */
.result-count { color : var(--ml-text-muted) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   TABLAS  (prod-table, veh-table, g-table)
══════════════════════════════════════════════════════════════════════════ */
table.prod-table,
table.veh-table,
table.g-table {
  background : #ffffff !important;
}

/* Cabeceras */
table.prod-table th,
table.veh-table  th,
table.g-table    th {
  background   : #f2f3f9 !important;
  color        : var(--ml-text-muted) !important;
  border-bottom-color : var(--ml-border) !important;
}

/* Celdas */
table.prod-table td,
table.veh-table  td,
table.g-table    td {
  color        : var(--ml-text)   !important;
  border-bottom-color : rgba(10,18,80,.07) !important;
}

/* Hover de fila */
table.prod-table tr:hover td,
table.veh-table  tr:hover td,
table.g-table    tr:hover td {
  background : rgba(10,18,80,.032) !important;
}

/* Nombre principal en tabla (negrita oscura) */
table.prod-table td div[style*="font-weight:700"],
table.veh-table  td[style*="font-weight:700"] {
  color : var(--ml-text) !important;
}

/* Textos secundarios (marca, año…) dentro de las celdas */
table.prod-table td div[style*="rgba(255,255,255,.35)"],
table.prod-table td div[style*="rgba(255,255,255,.5)"],
table.prod-table td[style*="rgba(255,255,255,.5)"],
table.veh-table  td[style*="rgba(255,255,255,.5)"],
table.veh-table  td[style*="rgba(255,255,255,.3)"] {
  color : var(--ml-text-muted) !important;
}

/* SKU / id en tabla productos */
table.prod-table td[style*="rgba(255,255,255,.3)"] {
  color : var(--ml-text-ph) !important;
}

/* Precio mayorista */
table.prod-table td[style*="color:var(--gold)"],
table.prod-table td[style*="color:var(--gold,"] {
  color : var(--ml-gold) !important;
}

/* Thumbnail placeholder */
.prod-thumb-placeholder {
  background   : #f0f1f7 !important;
  border-color : var(--ml-border) !important;
}
.prod-thumb {
  border-color : var(--ml-border) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   BADGES (stock, categoría, marca, rol)
══════════════════════════════════════════════════════════════════════════ */

/* Stock */
.stock-badge.stock-in {
  background : rgba(29,122,71,.12)  !important;
  color      : var(--ml-success)    !important;
}
.stock-badge.stock-out {
  background : rgba(192,57,43,.10)  !important;
  color      : var(--ml-danger)     !important;
}

/* Categoría */
.cat-badge {
  background   : rgba(10,18,80,.07) !important;
  border-color : rgba(10,18,80,.12) !important;
  color        : var(--ml-text-muted) !important;
}

/* Marca vehículos */
.veh-marca-badge.marca-Jeep     { background:rgba(29,122,71,.12)  !important; color:var(--ml-success)  !important; }
.veh-marca-badge.marca-Dodge    { background:rgba(192,57,43,.10)  !important; color:var(--ml-danger)   !important; }
.veh-marca-badge.marca-Chrysler { background:rgba(41,98,179,.10)  !important; color:#2962b3            !important; }
.veh-marca-badge.marca-Ram      { background:rgba(180,110,0,.10)  !important; color:#b46e00            !important; }
.veh-marca-badge.marca-default  { background:rgba(10,18,80,.07)   !important; color:var(--ml-text-muted) !important; }

/* Pill productos por vehículo */
.veh-prods-pill {
  background   : rgba(200,155,0,.10) !important;
  border-color : rgba(200,155,0,.22) !important;
  color        : var(--ml-gold)      !important;
}
.veh-prods-pill:hover {
  background   : rgba(200,155,0,.18) !important;
}
.veh-prods-pill.zero {
  background   : rgba(10,18,80,.05) !important;
  border-color : transparent        !important;
  color        : var(--ml-text-ph)  !important;
}

/* Roles en tabla de usuarios */
.badge-rol.badge-Invitado     { background:rgba(10,18,80,.07) !important; color:var(--ml-text-muted) !important; }
.badge-rol.badge-ClienteMayor { background:rgba(200,155,0,.12) !important; color:var(--ml-gold)      !important; }
.badge-rol.badge-admJLPJ      { background:rgba(192,57,43,.10) !important; color:var(--ml-danger)    !important; }


/* ══════════════════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN EN FILAS DE TABLA
══════════════════════════════════════════════════════════════════════════ */
.btn-edit-row,
.veh-btn-edit {
  background   : #fff                       !important;
  border-color : rgba(200,155,0,.35)        !important;
  color        : var(--ml-gold)             !important;
}
.btn-edit-row:hover,
.veh-btn-edit:hover {
  background   : rgba(200,155,0,.08)        !important;
  border-color : var(--ml-gold)             !important;
}

.btn-del-row,
.veh-btn-del {
  background   : #fff                       !important;
  border-color : rgba(192,57,43,.25)        !important;
  color        : rgba(192,57,43,.65)        !important;
}
.btn-del-row:hover,
.veh-btn-del:hover {
  background   : rgba(192,57,43,.07)        !important;
  border-color : var(--ml-danger)           !important;
  color        : var(--ml-danger)           !important;
}

.btn-img-row {
  background   : #fff !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text-muted) !important;
}
.btn-img-row:hover {
  border-color : var(--ml-gold) !important;
  color        : var(--ml-gold) !important;
}

/* Botón paginación */
.prod-page-btn,
.veh-page-btn,
.g-page-btn {
  background   : #ffffff !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text-muted) !important;
}
.prod-page-btn.active, .prod-page-btn:hover,
.veh-page-btn.active,  .veh-page-btn:hover,
.g-page-btn.active,    .g-page-btn:hover {
  background   : var(--gold) !important;
  border-color : var(--gold) !important;
  color        : var(--primary-dark) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE / LOADER
══════════════════════════════════════════════════════════════════════════ */
.prod-empty,
.veh-empty,
.ped-empty {
  color : var(--ml-text-muted) !important;
}
.prod-empty-icon,
.veh-empty-icon,
.ped-empty-icon { opacity : .55; }

.prod-loader,
.veh-loader,
.ped-loader,
.g-loader {
  color : var(--ml-text-muted) !important;
}

/* Skeleton shimmer más suave sobre fondo claro */
.sk-cell {
  background : rgba(10,18,80,.07) !important;
}
@keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:.45} }


/* ══════════════════════════════════════════════════════════════════════════
   PEDIDOS — cards, badges de estado, toolbar
══════════════════════════════════════════════════════════════════════════ */

/* Card de pedido */
.ped-card {
  background   : #ffffff !important;
  border-color : var(--ml-border) !important;
  box-shadow   : 0 2px 10px rgba(10,18,80,.06) !important;
}
.ped-card:hover {
  border-color : rgba(200,155,0,.3) !important;
  box-shadow   : 0 4px 18px rgba(10,18,80,.10) !important;
}

/* Cabecera de la card */
.ped-num             { color : var(--ml-text)       !important; }
.ped-num span        { color : var(--ml-gold)        !important; }
.ped-meta            { color : var(--ml-text-muted)  !important; }
.ped-total           { color : var(--ml-gold)        !important; }

/* Detalle expandido */
.ped-detail {
  border-top-color : var(--ml-border) !important;
  background       : #fafbff          !important;
}

/* Tabla de ítems dentro del detalle */
.ped-items-table th {
  color        : var(--ml-text-muted) !important;
  border-bottom-color : var(--ml-border) !important;
}
.ped-items-table td {
  color        : var(--ml-text)   !important;
  border-bottom-color : rgba(10,18,80,.06) !important;
}
.ped-item-name { color : var(--ml-text)       !important; }
.ped-item-sku  { color : var(--ml-text-muted) !important; }

/* Fila totales */
.ped-totals-row td    { color : var(--ml-text)  !important; border-top-color : var(--ml-border) !important; }
.ped-totals-row .total-val { color : var(--ml-gold) !important; }

/* Barra admin (cambio de estado dentro del detalle) */
.ped-admin-bar { border-top-color : var(--ml-border) !important; }
.ped-admin-label { color : var(--ml-text-muted) !important; }

.ped-notas-input {
  background   : #ffffff          !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text)   !important;
}
.ped-notas-input:focus {
  border-color : var(--gold) !important;
  box-shadow   : 0 0 0 3px rgba(245,204,62,.15) !important;
}
.ped-notas-input::placeholder { color : var(--ml-text-ph) !important; }

.ped-estado-select {
  background-color  : #ffffff          !important;
  border-color      : var(--ml-border) !important;
  color             : var(--ml-text)   !important;
  background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7299' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat   : no-repeat !important;
  background-position : right 10px center !important;
}
.ped-estado-select option { background:#fff !important; color:var(--ml-text) !important; }

.ped-save-btn { /* dorado, sin cambio de color */ color : var(--primary-dark) !important; }

/* Notas solo lectura (cliente) */
.ped-notas-box {
  background   : rgba(10,18,80,.04) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text-muted) !important;
}

/* Tag cliente (admin) */
.ped-client-tag {
  background   : rgba(41,98,179,.08) !important;
  border-color : rgba(41,98,179,.18) !important;
  color        : #2962b3             !important;
}

/* ── Badges de estado de pedido ─────────────────────────────────────────── */
.ped-estado-badge { font-weight : 700 !important; }

.estado-pendiente {
  background : rgba(180,110,0,.10)  !important;
  border-color : rgba(180,110,0,.25) !important;
  color      : #946000              !important;
}
.estado-confirmado {
  background : rgba(41,98,179,.10)  !important;
  border-color : rgba(41,98,179,.25) !important;
  color      : #2962b3              !important;
}
.estado-en_proceso {
  background : rgba(100,60,160,.10) !important;
  border-color : rgba(100,60,160,.25) !important;
  color      : #6030a0              !important;
}
.estado-despachado {
  background : rgba(180,90,20,.10)  !important;
  border-color : rgba(180,90,20,.25) !important;
  color      : #a05010              !important;
}
.estado-entregado {
  background : rgba(29,122,71,.10)  !important;
  border-color : rgba(29,122,71,.25) !important;
  color      : var(--ml-success)    !important;
}
.estado-cancelado {
  background : rgba(192,57,43,.10)  !important;
  border-color : rgba(192,57,43,.25) !important;
  color      : var(--ml-danger)     !important;
}

/* ── Tabs de filtro de estado ────────────────────────────────────────────── */
.ped-estado-tabs {
  border-color : var(--ml-border) !important;
  background   : #ffffff          !important;
}
.ped-estado-tab {
  color        : var(--ml-text-muted) !important;
  border-right-color : var(--ml-border) !important;
}
.ped-estado-tab.active {
  background : var(--gold)        !important;
  color      : var(--primary-dark) !important;
}
.ped-estado-tab:hover:not(.active) {
  background : rgba(10,18,80,.04) !important;
  color      : var(--ml-text)     !important;
}

/* Paginación pedidos */
.ped-page-btn {
  background   : #ffffff !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text-muted) !important;
}
.ped-page-btn.active, .ped-page-btn:hover {
  background   : var(--gold) !important;
  border-color : var(--gold) !important;
  color        : var(--primary-dark) !important;
}

/* Toast pedidos */
.ped-toast {
  background   : #ffffff          !important;
  border-color : rgba(200,155,0,.3) !important;
  color        : var(--ml-text)   !important;
  box-shadow   : 0 4px 20px rgba(10,18,80,.14) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   GESTIÓN USUARIOS — formulario nuevo usuario
══════════════════════════════════════════════════════════════════════════ */

/* Rol pills */
.rol-pill {
  border-color : var(--ml-border)     !important;
  color        : var(--ml-text-muted) !important;
  background   : #ffffff              !important;
}
.rol-pill:hover {
  border-color : rgba(10,18,80,.3) !important;
  color        : var(--ml-text)    !important;
}
.rol-pill[data-rol="Invitado"].sel {
  border-color : rgba(10,18,80,.35) !important;
  color        : var(--ml-text)     !important;
  background   : rgba(10,18,80,.06) !important;
}
.rol-pill[data-rol="ClienteMayor"].sel {
  border-color : rgba(200,155,0,.5)  !important;
  color        : var(--ml-gold)      !important;
  background   : rgba(200,155,0,.08) !important;
}
.rol-pill[data-rol="admJLPJ"].sel {
  border-color : rgba(192,57,43,.45) !important;
  color        : var(--ml-danger)    !important;
  background   : rgba(192,57,43,.07) !important;
}

/* Caja descripción de rol */
#rolDesc {
  background   : rgba(10,18,80,.04) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text-muted) !important;
}
#rolDesc strong { color : var(--ml-text) !important; }

/* Tabla de usuarios en pestaña Lista */
.g-table-wrap {
  border-color : var(--ml-border) !important;
  border-radius : 12px;
  overflow : hidden;
}

/* Botones de acción en tabla usuarios */
.g-btn-danger {
  background   : rgba(192,57,43,.08) !important;
  border        : 1px solid rgba(192,57,43,.25) !important;
  color        : var(--ml-danger)    !important;
  border-radius : 7px;
}
.g-btn-danger:hover {
  background   : rgba(192,57,43,.16) !important;
}





/* ══════════════════════════════════════════════════════════════════════════
   EDICIÓN INLINE — descuento en tabla de productos
══════════════════════════════════════════════════════════════════════════ */
.disc-inline-input {
  background   : #ffffff !important;
  border-color : var(--gold) !important;
  color        : var(--ml-text) !important;
  box-shadow   : 0 0 0 3px rgba(200,155,0,.15) !important;
}
.discount-none {
  color : rgba(10,18,80,.28) !important;
}