/*
 * Reporte · Envíos a Data4Sales.
 *
 * Framework propio `--d4r-*`, acotado a #reporteEnviosData4sales. Todo el estilo vive
 * acá: la vista no lleva <style> ni style=" (método de Pacientes). Base calcada de
 * Productos Vendidos: UN acento (índigo #3f51b5) + escala de grises. Los únicos colores
 * ajenos son ESTADOS: verde = aceptado, rojo = rechazado / error, ámbar = cambió después.
 */

#reporteEnviosData4sales {
    --d4r-paper: #f8f9fa;
    --d4r-surface: #ffffff;
    --d4r-ink: #2d3748;
    --d4r-muted: #6c757d;
    --d4r-faint: #9aa3ad;
    --d4r-line: #e5e7eb;
    --d4r-line-strong: #d1d5db;
    --d4r-primary: #3f51b5;
    --d4r-primary-dark: #2c3a8c;
    --d4r-primary-soft: #eef0fb;
    --d4r-radius: 14px;
    --d4r-ok: #1e7e4a;
    --d4r-ok-soft: #e8f5ee;
    --d4r-err: #b42318;
    --d4r-err-soft: #fdecea;
    --d4r-warn: #9a6700;
    --d4r-warn-soft: #fff6db;
}

/* ---------------- Contenedor ---------------- */
#reporteEnviosData4sales { max-width: 100%; overflow-x: hidden; }
#reporteEnviosData4sales .d4r-shell { background: var(--d4r-surface); border: 1px solid var(--d4r-line); border-radius: 16px; overflow: hidden; max-width: 100%; }
#reporteEnviosData4sales .d4r-head { padding: 22px 24px; border-bottom: 1px solid var(--d4r-line); }
#reporteEnviosData4sales .d4r-head h4 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 700; color: var(--d4r-ink); margin: 0; }
#reporteEnviosData4sales .d4r-head h4 .bi { color: var(--d4r-primary); }
#reporteEnviosData4sales .d4r-sub { color: var(--d4r-muted); font-size: 12.5px; margin: 5px 0 0; max-width: 82ch; line-height: 1.55; }
#reporteEnviosData4sales .d4r-chip-head { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--d4r-muted); background: var(--d4r-paper); border: 1px solid var(--d4r-line); padding: 5px 11px; border-radius: 6px; }
#reporteEnviosData4sales .d4r-body { padding: 18px; background: var(--d4r-paper); }
@media (min-width: 768px) { #reporteEnviosData4sales .d4r-body { padding: 22px 24px; } }

/* ---------------- Filtros ---------------- */
#reporteEnviosData4sales .d4r-filter { background: var(--d4r-surface); border: 1px solid var(--d4r-line); border-radius: var(--d4r-radius); padding: 16px; margin-bottom: 16px; }
#reporteEnviosData4sales .d4r-filter label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--d4r-faint); margin: 0 0 6px; display: block; }
#reporteEnviosData4sales .d4r-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px 14px; align-items: end; }
@media (min-width: 1600px) {
    #reporteEnviosData4sales .d4r-filtros { grid-template-columns: repeat(auto-fit, minmax(185px, 280px)); justify-content: start; }
}
#reporteEnviosData4sales .d4r-campo { min-width: 0; }
#reporteEnviosData4sales .d4r-campo .form-control { width: 100%; min-width: 0; max-width: 100%; }
#reporteEnviosData4sales .d4r-campo--boton { display: flex; align-items: flex-end; }
#reporteEnviosData4sales .d4r-filter .form-control { border-radius: 8px; border: 1px solid var(--d4r-line-strong); height: 40px; font-size: 13.5px; color: var(--d4r-ink); }
#reporteEnviosData4sales .d4r-filter .form-control:focus { border-color: var(--d4r-primary); box-shadow: 0 0 0 3px rgba(63, 81, 181, .14); }
#reporteEnviosData4sales .d4r-btn { height: 40px; border-radius: 8px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--d4r-primary); color: #fff; padding: 0 22px; width: 100%; min-width: 0; white-space: nowrap; background: var(--d4r-primary); }
#reporteEnviosData4sales .d4r-btn:hover { background: var(--d4r-primary-dark); border-color: var(--d4r-primary-dark); }
#reporteEnviosData4sales .d4r-btn:disabled { opacity: .6; }

/* Buscador con autocompletar: el componente envuelve el input en `.ac-wrap`, que ya
   dibuja el marco. La regla de arriba lleva id y le gana a la neutralización propia
   del componente (0-3-0) ⇒ doble borde si no se anula acá. */
#reporteEnviosData4sales .d4r-buscar-wrap { position: relative; }
#reporteEnviosData4sales .d4r-filter .ac-wrap { height: 40px; min-width: 0; padding: 0 10px; border: 1px solid var(--d4r-line-strong); border-radius: 8px; background: var(--d4r-surface); }
#reporteEnviosData4sales .d4r-filter .ac-wrap:focus-within { border-color: var(--d4r-primary); box-shadow: 0 0 0 3px rgba(63, 81, 181, .14); }
#reporteEnviosData4sales .d4r-filter .ac-wrap .form-control,
#reporteEnviosData4sales .d4r-filter .ac-wrap .form-control:focus { height: 38px; padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; }

/* ---------------- KPIs ---------------- */
#reporteEnviosData4sales .d4r-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 14px; }
#reporteEnviosData4sales .d4r-metric { background: var(--d4r-surface); border: 1px solid var(--d4r-line); border-radius: 10px; padding: 11px 13px; min-width: 0; }
#reporteEnviosData4sales .d4r-metric .m-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--d4r-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#reporteEnviosData4sales .d4r-metric .m-v { font-size: 1.1rem; font-weight: 700; color: var(--d4r-ink); margin-top: 5px; line-height: 1.15; overflow-wrap: anywhere; }
#reporteEnviosData4sales .d4r-metric .m-s { font-size: 11px; color: var(--d4r-muted); margin-top: 2px; }
#reporteEnviosData4sales .d4r-metric.total { border-color: var(--d4r-primary); background: var(--d4r-primary-soft); }
#reporteEnviosData4sales .d4r-metric.total .m-k { color: var(--d4r-primary-dark); }
#reporteEnviosData4sales .d4r-metric.total .m-v { color: var(--d4r-primary-dark); font-size: 1.3rem; }

/* ---------------- Selector de vista ---------------- */
#reporteEnviosData4sales .d4r-vistas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#reporteEnviosData4sales .d4r-vista { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--d4r-line-strong); background: var(--d4r-surface); color: var(--d4r-muted); border-radius: 8px; padding: 7px 15px; cursor: pointer; user-select: none; }
#reporteEnviosData4sales .d4r-vista.activa { color: #fff; background: var(--d4r-primary); border-color: var(--d4r-primary); }

/* ---------------- Tabla ---------------- */
#reporteEnviosData4sales .d4r-tabla-card { background: var(--d4r-surface); border: 1px solid var(--d4r-line); border-radius: var(--d4r-radius); overflow: hidden; }
#reporteEnviosData4sales .d4r-tabla-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--d4r-line); }
#reporteEnviosData4sales .d4r-tabla-top .t-titulo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--d4r-muted); min-width: 0; }
#reporteEnviosData4sales .d4r-tabla-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; justify-content: flex-end; min-width: 0; }
#reporteEnviosData4sales .d4r-tabla-top .form-control { height: 36px; font-size: 13px; border-radius: 8px; border: 1px solid var(--d4r-line-strong); flex: 1 1 170px; width: auto; min-width: 0; max-width: 260px; }
#reporteEnviosData4sales .d4r-btn-excel { height: 36px; border-radius: 8px; border: 1px solid var(--d4r-line-strong); background: var(--d4r-surface); color: var(--d4r-muted); font-size: 12.5px; font-weight: 600; padding: 0 13px; white-space: nowrap; }
#reporteEnviosData4sales .d4r-btn-excel:hover { border-color: var(--d4r-primary); color: var(--d4r-primary-dark); background: var(--d4r-primary-soft); }

#reporteEnviosData4sales .d4r-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
#reporteEnviosData4sales table.d4r-tabla { width: 100%; min-width: 700px; margin: 0; border-collapse: collapse; font-size: 13px; }
#reporteEnviosData4sales table.d4r-tabla thead th { background: var(--d4r-paper); color: var(--d4r-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--d4r-line); white-space: nowrap; }
#reporteEnviosData4sales table.d4r-tabla thead th[data-col] { cursor: pointer; user-select: none; }
#reporteEnviosData4sales table.d4r-tabla thead th[data-col]::after { content: "\2195"; margin-left: 6px; opacity: .3; font-size: 11px; }
#reporteEnviosData4sales table.d4r-tabla thead th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; color: var(--d4r-primary); }
#reporteEnviosData4sales table.d4r-tabla thead th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--d4r-primary); }
#reporteEnviosData4sales table.d4r-tabla thead th.col-num { text-align: right; }
#reporteEnviosData4sales table.d4r-tabla thead th.col-fit { width: 1%; }
#reporteEnviosData4sales table.d4r-tabla tbody td { padding: 10px 12px; border-bottom: 1px solid var(--d4r-line); color: var(--d4r-ink); vertical-align: middle; overflow-wrap: anywhere; }
#reporteEnviosData4sales table.d4r-tabla tbody tr:hover { background: var(--d4r-paper); }
#reporteEnviosData4sales table.d4r-tabla tbody tr:last-child td { border-bottom: 0; }

#reporteEnviosData4sales .d4r-fuerte { font-weight: 700; color: var(--d4r-ink); }
#reporteEnviosData4sales .d4r-sec { font-size: 11.5px; color: var(--d4r-muted); margin-top: 2px; }
#reporteEnviosData4sales .d4r-etiqueta { display: inline-block; margin-right: 5px; vertical-align: 1px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--d4r-muted); background: var(--d4r-paper); border: 1px solid var(--d4r-line-strong); border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
#reporteEnviosData4sales .d4r-ficha { font-size: 10.5px; font-weight: 700; color: var(--d4r-primary-dark); background: var(--d4r-primary-soft); border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
#reporteEnviosData4sales .d4r-num { text-align: right; white-space: nowrap; }
#reporteEnviosData4sales .d4r-num.fuerte { font-weight: 700; }
#reporteEnviosData4sales .d4r-accion { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--d4r-primary-dark); background: var(--d4r-primary-soft); border: 1px solid var(--d4r-primary); border-radius: 7px; padding: 5px 9px; white-space: nowrap; text-decoration: none; }
#reporteEnviosData4sales .d4r-accion:hover { background: var(--d4r-primary); color: #fff; text-decoration: none; }
#reporteEnviosData4sales .d4r-sin-doc { font-size: 11px; color: var(--d4r-faint); }

#reporteEnviosData4sales .d4r-vacio { text-align: center; padding: 40px 16px; color: var(--d4r-muted); font-size: 14px; }
#reporteEnviosData4sales .d4r-vacio .bi { display: block; font-size: 2rem; color: var(--d4r-faint); margin-bottom: 8px; }

/* Paginación */
#reporteEnviosData4sales .d4r-pag { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--d4r-line); font-size: 12.5px; color: var(--d4r-muted); }
#reporteEnviosData4sales .d4r-pag-btns { display: flex; gap: 6px; flex-wrap: wrap; }
#reporteEnviosData4sales .d4r-pag-btn { min-width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--d4r-line-strong); background: var(--d4r-surface); color: var(--d4r-ink); font-size: 12.5px; font-weight: 600; padding: 0 9px; }
#reporteEnviosData4sales .d4r-pag-btn.activo { background: var(--d4r-primary); border-color: var(--d4r-primary); color: #fff; }
#reporteEnviosData4sales .d4r-pag-btn:disabled { opacity: .45; }

#reporteEnviosData4sales .d4r-nota { font-size: 11px; color: var(--d4r-faint); margin-top: 8px; }
#reporteEnviosData4sales .d4r-aviso { font-size: 11.5px; color: var(--d4r-primary-dark); background: var(--d4r-primary-soft); border: 1px solid var(--d4r-primary); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: none; }

/* ---------------- Responsive: la tabla pasa a tarjetas ---------------- */
@media (max-width: 991.98px) {
    #reporteEnviosData4sales table.d4r-tabla { min-width: 0; }
    #reporteEnviosData4sales table.d4r-tabla thead { display: none; }
    #reporteEnviosData4sales table.d4r-tabla,
    #reporteEnviosData4sales table.d4r-tabla tbody,
    #reporteEnviosData4sales table.d4r-tabla tr,
    #reporteEnviosData4sales table.d4r-tabla td { display: block; width: 100%; }
    #reporteEnviosData4sales table.d4r-tabla tr { border: 1px solid var(--d4r-line); border-radius: 10px; margin-bottom: 10px; padding: 4px 0; }
    #reporteEnviosData4sales table.d4r-tabla tbody td { border-bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; }
    #reporteEnviosData4sales table.d4r-tabla tbody td::before { content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--d4r-faint); flex-shrink: 0; }
    #reporteEnviosData4sales .d4r-num { text-align: right; }
}

/* ---------------- Propio de este reporte ---------------- */
#reporteEnviosData4sales .d4r-chip-head.on { color: var(--d4r-ok); background: var(--d4r-ok-soft); border-color: var(--d4r-ok); }

#reporteEnviosData4sales .d4r-desconectado { background: var(--d4r-surface); border: 1px dashed var(--d4r-line-strong); border-radius: var(--d4r-radius); padding: 48px 20px; text-align: center; color: var(--d4r-muted); }
#reporteEnviosData4sales .d4r-desconectado .bi { display: block; font-size: 2.6rem; color: var(--d4r-faint); margin-bottom: 10px; }
#reporteEnviosData4sales .d4r-desconectado h5 { font-weight: 700; color: var(--d4r-ink); margin-bottom: 8px; }
#reporteEnviosData4sales .d4r-desconectado p { max-width: 60ch; margin: 0 auto; font-size: 13.5px; line-height: 1.6; }

#reporteEnviosData4sales .d4r-res { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 5px; padding: 2px 8px; white-space: nowrap; border: 1px solid var(--d4r-line-strong); color: var(--d4r-muted); background: var(--d4r-paper); }
#reporteEnviosData4sales .d4r-res.ENVIADA { color: var(--d4r-ok); background: var(--d4r-ok-soft); border-color: var(--d4r-ok); }
#reporteEnviosData4sales .d4r-res.RECHAZADA { color: var(--d4r-err); background: var(--d4r-err-soft); border-color: var(--d4r-err); }
#reporteEnviosData4sales .d4r-cambio { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--d4r-warn); background: var(--d4r-warn-soft); border: 1px solid var(--d4r-warn); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
#reporteEnviosData4sales .d4r-motivo { font-size: 11.5px; color: var(--d4r-err); margin-top: 4px; max-width: 46ch; }
#reporteEnviosData4sales .d4r-generico { font-style: italic; }
#reporteEnviosData4sales .d4r-req { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
#reporteEnviosData4sales .d4r-fecha { white-space: nowrap; }
#reporteEnviosData4sales table.d4r-tabla tbody tr.d4r-fila-error { background: var(--d4r-err-soft); }
#reporteEnviosData4sales code { font-size: 11.5px; color: var(--d4r-primary-dark); background: var(--d4r-primary-soft); border-radius: 4px; padding: 0 4px; }

#reporteEnviosData4sales #d4r_panel_guia { display: none; }
#reporteEnviosData4sales .d4r-guia { display: grid; gap: 14px; }
#reporteEnviosData4sales .d4r-g-bloque { background: var(--d4r-surface); border: 1px solid var(--d4r-line); border-radius: var(--d4r-radius); padding: 18px 20px; min-width: 0; }
#reporteEnviosData4sales .d4r-g-bloque h5 { font-size: .95rem; font-weight: 700; color: var(--d4r-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
#reporteEnviosData4sales .d4r-g-bloque h5 .bi { color: var(--d4r-primary); }
#reporteEnviosData4sales .d4r-g-bloque p,
#reporteEnviosData4sales .d4r-g-bloque li { font-size: 13px; color: var(--d4r-ink); line-height: 1.6; }
#reporteEnviosData4sales .d4r-g-bloque ul { margin: 10px 0 0; padding-left: 20px; }
#reporteEnviosData4sales .d4r-g-bloque li + li { margin-top: 5px; }
#reporteEnviosData4sales .d4r-g-leyendas { display: grid; gap: 8px; font-size: 13px; }
#reporteEnviosData4sales .d4r-g-leyendas > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; }
#reporteEnviosData4sales .d4r-g-leyendas .d4r-res,
#reporteEnviosData4sales .d4r-g-leyendas .d4r-cambio { margin: 1px 0 0; text-align: center; }
#reporteEnviosData4sales .d4r-g-alerta { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--d4r-primary-soft); border: 1px solid var(--d4r-primary); color: var(--d4r-primary-dark); }
#reporteEnviosData4sales .d4r-g-nota { margin: 12px 0 0; font-size: 12px; color: var(--d4r-muted); }
#reporteEnviosData4sales table.d4r-mapa { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12.5px; }
#reporteEnviosData4sales table.d4r-mapa th { background: var(--d4r-paper); color: var(--d4r-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--d4r-line); text-align: left; }
#reporteEnviosData4sales table.d4r-mapa td { padding: 8px 10px; border-bottom: 1px solid var(--d4r-line); vertical-align: top; color: var(--d4r-ink); }
#reporteEnviosData4sales table.d4r-mapa td:first-child { white-space: nowrap; width: 1%; }
#reporteEnviosData4sales table.d4r-mapa tr:last-child td { border-bottom: 0; }

/* El Swal vive fuera del wrapper: estas reglas no llevan el id. */
.d4r-swal-sub { font-size: 12.5px; color: #6c757d; margin: 0 0 10px; }
pre.d4r-json { text-align: left; max-height: 420px; overflow: auto; font-size: 12px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 991.98px) {
    /* En tarjeta, cada celda lleva varios nodos (dato + línea gris): el rótulo va arriba
       y el contenido debajo, en bloque, en vez del par rótulo/valor en una fila. */
    #reporteEnviosData4sales table.d4r-tabla tbody td { display: block; width: auto; text-align: left; }
    #reporteEnviosData4sales table.d4r-tabla tr { width: auto; }
    #reporteEnviosData4sales table.d4r-tabla tbody td::before { display: block; margin-bottom: 2px; }
    #reporteEnviosData4sales .d4r-req { max-width: 100%; }
    #reporteEnviosData4sales table.d4r-mapa { min-width: 0; }
    #reporteEnviosData4sales table.d4r-mapa td:first-child { white-space: normal; }
}