/*
 * Semáforo de paquetería — Escaneo de surtidos y Validación Pre-surtido.
 *
 * Pinta el fondo del pedido con el color de la paquetería que le corresponde
 * para que el operador sepa por dónde va a salir antes de presionar un botón.
 * Es orientativo: no bloquea ninguna acción, solo avisa.
 */

[data-paqueteria] {
    --pq-color: #6c757d;
    background: color-mix(in srgb, var(--pq-color) 12%, transparent) !important;
    border-left: 4px solid var(--pq-color) !important;
    transition: background .2s ease, border-color .2s ease;
}

[data-paqueteria="dhl"]          { --pq-color: #FFCC00; }
[data-paqueteria="amazon"],
[data-paqueteria="mercadolibre"] { --pq-color: #FF9900; }
[data-paqueteria="fedex"]        { --pq-color: #D42E12; }
[data-paqueteria="perla"]        { --pq-color: #1565C0; }

/* Chip con el mismo color, para encabezados y listados. */
.pq-chip {
    --pq-color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--pq-color);
    background: color-mix(in srgb, var(--pq-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pq-color) 45%, transparent);
}

.pq-chip[data-paqueteria="dhl"]          { --pq-color: #B38F00; }
.pq-chip[data-paqueteria="amazon"],
.pq-chip[data-paqueteria="mercadolibre"] { --pq-color: #C46A00; }
.pq-chip[data-paqueteria="fedex"]        { --pq-color: #D42E12; }
.pq-chip[data-paqueteria="perla"]        { --pq-color: #1565C0; }

/* En modo oscuro el amarillo y el naranja pierden contraste sobre fondo claro
   invertido, así que el texto del chip se aclara. */
body.dark-mode .pq-chip[data-paqueteria="dhl"]          { --pq-color: #FFD84D; }
body.dark-mode .pq-chip[data-paqueteria="amazon"],
body.dark-mode .pq-chip[data-paqueteria="mercadolibre"] { --pq-color: #FFAE42; }
body.dark-mode .pq-chip[data-paqueteria="fedex"]        { --pq-color: #FF6B52; }
body.dark-mode .pq-chip[data-paqueteria="perla"]        { --pq-color: #64B5F6; }

/* Aureola de la paquetería que sugiere el sistema (data-sugerida). Es otra señal
   que el botón elegido: rodea el área de trabajo sin teñirla, así se distingue
   del fondo que marca la paquetería asignada. Orientativa, no bloquea nada. */
[data-sugerida] {
    --pq-sug: #6c757d;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--pq-sug) 75%, transparent),
        0 0 26px 6px color-mix(in srgb, var(--pq-sug) 40%, transparent) !important;
    transition: box-shadow .25s ease;
}

[data-sugerida="dhl"]          { --pq-sug: #FFCC00; }
[data-sugerida="amazon"],
[data-sugerida="mercadolibre"] { --pq-sug: #FF9900; }
[data-sugerida="fedex"]        { --pq-sug: #D42E12; }
[data-sugerida="perla"]        { --pq-sug: #1565C0; }

/* Botones de paquetería con colores del catálogo */
.carrier-selector-group {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.carrier-selector-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-right: .15rem;
}

.pq-btn {
    --pq-color: #6c757d;
    padding: 0.35rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1.5px solid var(--pq-color);
    background: transparent;
    color: var(--pq-color);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-decoration: none;
    white-space: nowrap;
}

.pq-btn[data-carrier="dhl"]          { --pq-color: #B38F00; }
.pq-btn[data-carrier="amazon"],
.pq-btn[data-carrier="mercadolibre"] { --pq-color: #C46A00; }
.pq-btn[data-carrier="fedex"]        { --pq-color: #D42E12; }
.pq-btn[data-carrier="perla"]        { --pq-color: #1565C0; }

.pq-btn[data-carrier="dhl"]:hover,
.pq-btn[data-carrier="dhl"].active {
    background: #FFCC00 !important;
    border-color: #FFCC00 !important;
    color: #0f172a !important;
    font-weight: 800;
}

.pq-btn[data-carrier="amazon"]:hover,
.pq-btn[data-carrier="amazon"].active,
.pq-btn[data-carrier="mercadolibre"]:hover,
.pq-btn[data-carrier="mercadolibre"].active {
    background: #FF9900 !important;
    border-color: #FF9900 !important;
    color: #0f172a !important;
}

.pq-btn[data-carrier="fedex"]:hover,
.pq-btn[data-carrier="fedex"].active {
    background: #D42E12 !important;
    border-color: #D42E12 !important;
    color: #ffffff !important;
}

.pq-btn[data-carrier="perla"]:hover,
.pq-btn[data-carrier="perla"].active {
    background: #1565C0 !important;
    border-color: #1565C0 !important;
    color: #ffffff !important;
}

/* Modo oscuro */
body.dark-mode .pq-btn[data-carrier="dhl"]          { --pq-color: #FFD84D; }
body.dark-mode .pq-btn[data-carrier="amazon"],
body.dark-mode .pq-btn[data-carrier="mercadolibre"] { --pq-color: #FFAE42; }
body.dark-mode .pq-btn[data-carrier="fedex"]        { --pq-color: #FF6B52; }
body.dark-mode .pq-btn[data-carrier="perla"]        { --pq-color: #64B5F6; }

body.dark-mode .pq-btn[data-carrier="dhl"]:hover,
body.dark-mode .pq-btn[data-carrier="dhl"].active {
    background: #FFD84D !important;
    border-color: #FFD84D !important;
    color: #0f172a !important;
}

body.dark-mode .pq-btn[data-carrier="amazon"]:hover,
body.dark-mode .pq-btn[data-carrier="amazon"].active,
body.dark-mode .pq-btn[data-carrier="mercadolibre"]:hover,
body.dark-mode .pq-btn[data-carrier="mercadolibre"].active {
    background: #FFAE42 !important;
    border-color: #FFAE42 !important;
    color: #0f172a !important;
}

body.dark-mode .pq-btn[data-carrier="fedex"]:hover,
body.dark-mode .pq-btn[data-carrier="fedex"].active {
    background: #D42E12 !important;
    border-color: #D42E12 !important;
    color: #ffffff !important;
}

body.dark-mode .pq-btn[data-carrier="perla"]:hover,
body.dark-mode .pq-btn[data-carrier="perla"].active {
    background: #1565C0 !important;
    border-color: #1565C0 !important;
    color: #ffffff !important;
}