/*
 * modal-light.css
 * Sobreescritura de estilos para modales y formularios admin.
 * Tema: fondo claro / letra oscura — compatible con el resto del sitio.
 * Cargar DESPUÉS de los estilos base del sitio.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Variables locales (no tocan las globales del sitio) ─────────────────*/
:root {
  --ml-bg:          #f5f6fa;        /* fondo del modal                    */
  --ml-bg-field:    #ffffff;        /* fondo de inputs / selects          */
  --ml-bg-field-hv: #f0f1f7;        /* hover / focus inputs               */
  --ml-border:      rgba(10,18,80,.14); /* bordes internos                */
  --ml-text:        #1a1f3c;        /* texto principal                    */
  --ml-text-muted:  #6b7299;        /* texto secundario / labels          */
  --ml-text-ph:     #aab0cc;        /* placeholder                        */
  --ml-gold:        #c89b00;        /* dorado legible sobre fondo claro   */
  --ml-danger:      #c0392b;
  --ml-success:     #1d7a47;
  --ml-radius:      10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FONDO DEL MODAL (overlay sin cambio) + caja
══════════════════════════════════════════════════════════════════════════ */
.adm-modal-box,
.g-modal,
.img-modal-box,
.import-modal-box {
  background : var(--ml-bg)    !important;
  border     : 1px solid var(--ml-border) !important;
  box-shadow : 0 8px 40px rgba(10,18,80,.18) !important;
}

/* ── Título del modal ────────────────────────────────────────────────────*/
.adm-modal-title,
.g-modal-title,
.img-modal-title {
  color : var(--ml-text) !important;
}
/* La línea dorada vertical se mantiene */
.adm-modal-title::before { background : var(--gold) !important; }

/* ── Botón cerrar ────────────────────────────────────────────────────────*/
.adm-modal-close-btn {
  background   : rgba(10,18,80,.06) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text-muted) !important;
}
.adm-modal-close-btn:hover {
  background   : rgba(192,57,43,.1)   !important;
  color        : var(--ml-danger)     !important;
  border-color : rgba(192,57,43,.35)  !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LABELS Y TEXTOS INTERNOS
══════════════════════════════════════════════════════════════════════════ */
.adm-form-label,
.g-label,
.adm-form-section-title,
.adm-form-hint,
.img-modal-title,
.imp-db-field,
.imp-db-field small {
  color : var(--ml-text-muted) !important;
}
.adm-form-label span.req { color : var(--gold) !important; }

/* Separador de sección */
.adm-form-sep { border-top-color : var(--ml-border) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   INPUTS, SELECTS, TEXTAREAS
══════════════════════════════════════════════════════════════════════════ */
.adm-form-input,
.adm-form-select,
.adm-form-textarea,
.g-input,
.g-select,
.imp-col-sel,
.ped-notas-input,
.ped-estado-select {
  background   : var(--ml-bg-field) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text)     !important;
}
.adm-form-input:focus,
.adm-form-select:focus,
.adm-form-textarea:focus,
.g-input:focus,
.g-select:focus,
.imp-col-sel:focus {
  border-color : var(--gold) !important;
  outline      : none;
  box-shadow   : 0 0 0 3px rgba(245,204,62,.15) !important;
}
.adm-form-input::placeholder,
.adm-form-textarea::placeholder,
.g-input::placeholder { color : var(--ml-text-ph) !important; }

/* Opciones de selects — la mayoría de navegadores solo admite background */
.adm-form-select option,
.g-select option,
.imp-col-sel option {
  background : #fff  !important;
  color      : var(--ml-text) !important;
}

/* Flecha del select — reemplazar data-URI oscura con versión azul */
.adm-form-select,
.g-select,
.imp-col-sel {
  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;
}

/* Select mapeado (import) */
.imp-col-sel.mapped {
  border-color     : rgba(29,122,71,.4) !important;
  color            : var(--ml-success)  !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INFO PRODUCTO (franja gris dentro del modal imagen)
══════════════════════════════════════════════════════════════════════════ */
#imgModalProductInfo,
#imgModalName,
#imgModalSku {
  background : rgba(10,18,80,.05)  !important;
  border-color: var(--ml-border)   !important;
  color       : var(--ml-text)     !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTAS DENTRO DEL MODAL
══════════════════════════════════════════════════════════════════════════ */
.adm-modal-alert.ok,
.img-alert-ok,
.g-alert-ok {
  background   : rgba(29,122,71,.09)  !important;
  border-color : rgba(29,122,71,.3)   !important;
  color        : var(--ml-success)    !important;
}
.adm-modal-alert.err,
.img-alert-err,
.g-alert-err {
  background   : rgba(192,57,43,.09)  !important;
  border-color : rgba(192,57,43,.3)   !important;
  color        : var(--ml-danger)     !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES DEL FOOTER DEL MODAL
══════════════════════════════════════════════════════════════════════════ */
/* Cancelar */
.adm-modal-btn-cancel,
.img-upload-cancel,
.g-btn-ghost {
  background   : transparent          !important;
  border-color : var(--ml-border)     !important;
  color        : var(--ml-text-muted) !important;
}
.adm-modal-btn-cancel:hover,
.img-upload-cancel:hover,
.g-btn-ghost:hover {
  border-color : rgba(10,18,80,.35) !important;
  color        : var(--ml-text)     !important;
}

/* Submit dorado — mantenemos el dorado del sitio, solo ajustamos texto */
.adm-modal-btn-submit,
.img-upload-submit,
.g-btn-primary {
  /* background ya es var(--gold) — no se toca */
  color : var(--primary-dark) !important;
}

/* Danger */
.adm-modal-btn-danger {
  color : #fff !important;
  /* background sigue siendo var(--danger) */
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPZONE DE IMÁGENES
══════════════════════════════════════════════════════════════════════════ */
.img-dropzone,
.adm-img-dz,
.imp-dropzone {
  border-color : var(--ml-border)  !important;
  background   : rgba(10,18,80,.03) !important;
}
.img-dropzone:hover, .img-dropzone.drag-over,
.adm-img-dz:hover,  .adm-img-dz.drag-over,
.imp-dropzone:hover, .imp-dropzone.drag-over {
  border-color : var(--gold) !important;
  background   : rgba(245,204,62,.06) !important;
}
.img-dz-text, .img-dz-hint,
.adm-img-dz-label, .adm-img-dz-name,
.imp-dz-text, .imp-dz-hint {
  color : var(--ml-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-SELECT VEHÍCULOS (dentro del modal de producto)
══════════════════════════════════════════════════════════════════════════ */
.veh-tags-wrap {
  background   : var(--ml-bg-field) !important;
  border-color : var(--ml-border)   !important;
}
.veh-tags-wrap:focus-within { border-color : var(--gold) !important; }

.veh-tags-placeholder { color : var(--ml-text-ph) !important; }

/* Dropdown de vehículos */
.veh-dropdown {
  background   : #fff             !important;
  border-color : var(--ml-border) !important;
  box-shadow   : 0 8px 32px rgba(10,18,80,.15) !important;
}
.veh-dd-search { background : #f5f6fa !important; border-bottom-color : var(--ml-border) !important; }
.veh-dd-search input {
  background   : #fff             !important;
  border-color : var(--ml-border) !important;
  color        : var(--ml-text)   !important;
}
.veh-dd-item { color : var(--ml-text-muted) !important; }
.veh-dd-item:hover { background : rgba(10,18,80,.05) !important; }
.veh-dd-item.selected { color : var(--ml-gold) !important; }
.veh-dd-empty { color : var(--ml-text-ph) !important; }

/* Tags seleccionados */
.veh-tag {
  background   : rgba(200,155,0,.12)  !important;
  border-color : rgba(200,155,0,.3)   !important;
  color        : var(--ml-gold)       !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL CONFIRMACIÓN ELIMINAR
══════════════════════════════════════════════════════════════════════════ */
.confirm-warn {
  background   : rgba(192,57,43,.07) !important;
  border-color : rgba(192,57,43,.2)  !important;
  color        : var(--ml-text)      !important;
}
.confirm-warn strong { color : var(--ml-danger) !important; }
.confirm-prod-name,
.confirm-veh-name { color : var(--ml-text) !important; }
.confirm-affected { color : var(--ml-text-muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   IMPORTAR EXCEL — stepper y tabla de mapeo
══════════════════════════════════════════════════════════════════════════ */
.imp-stepper { border-bottom : 1px solid var(--ml-border); padding-bottom : 18px; }
.imp-step-item        { color : var(--ml-text-muted) !important; }
.imp-step-item.active { color : var(--ml-gold)       !important; }
.imp-step-item.done   { color : var(--ml-success)    !important; }
.imp-step-line        { background : var(--ml-border) !important; }
.imp-step-item.active .imp-step-dot {
  background   : var(--gold)       !important;
  color        : var(--primary-dark) !important;
  border-color : var(--gold)       !important;
}
.imp-step-item.done .imp-step-dot { background : rgba(29,122,71,.15) !important; }

/* Tabla de mapeo */
.imp-map-table th {
  background   : rgba(10,18,80,.04) !important;
  color        : var(--ml-text-muted) !important;
  border-color : var(--ml-border)   !important;
}
.imp-map-table td { border-color : rgba(10,18,80,.06) !important; }
.imp-map-table tr:hover td { background : rgba(10,18,80,.02) !important; }
.imp-db-field { color : var(--ml-text) !important; }
.imp-req-dot  { background : var(--ml-gold) !important; }

/* Preview mini-tabla */
.imp-preview-table th {
  background   : rgba(10,18,80,.05) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text-muted) !important;
}
.imp-preview-table td {
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text)     !important;
}

/* Resultado */
.imp-result-card {
  background   : rgba(10,18,80,.04) !important;
  border-color : var(--ml-border)   !important;
}
.imp-result-lbl { color : var(--ml-text-muted) !important; }
.imp-errors-list {
  background   : rgba(192,57,43,.06) !important;
  border-color : rgba(192,57,43,.18) !important;
}
.imp-errors-list li { color : var(--ml-danger) !important; }

/* Badge archivo seleccionado */
.imp-file-badge {
  background   : rgba(200,155,0,.1)  !important;
  border-color : rgba(200,155,0,.25) !important;
  color        : var(--ml-gold)      !important;
}

/* Barra de progreso imagen */
.img-progress-bar  { background : var(--ml-border) !important; }
.img-progress-fill { background : var(--gold)      !important; }
.img-progress-label { color : var(--ml-text-muted)  !important; }

/* Preview imagen nombre */
.img-preview-name { color : var(--ml-text-muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL DE GESTIÓN DE USUARIOS (g-modal)
══════════════════════════════════════════════════════════════════════════ */
.g-modal { padding : 28px 24px; }
.g-modal-title { color : var(--ml-text) !important; }

/* Pantalla correo (readonly) dentro del modal editar */
#e_correo_display {
  background   : rgba(10,18,80,.05) !important;
  border-color : var(--ml-border)   !important;
  color        : var(--ml-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLA DENTRO DE MODALES (detalle vehículo)
══════════════════════════════════════════════════════════════════════════ */
.detail-prod-item {
  background   : rgba(10,18,80,.04) !important;
  border-color : var(--ml-border)   !important;
}
.detail-prod-name { color : var(--ml-text)       !important; }
.detail-prod-sku  { color : var(--ml-text-muted) !important; }
.detail-prod-price { color : var(--ml-gold)      !important; }
.detail-empty     { color : var(--ml-text-muted) !important; }