/* ============================================================================
   conecta-badges.css — Sistema cromático unificado de ConectaEDI
   ----------------------------------------------------------------------------
   Tres capas visuales con jerarquía clara:
     1. ACCIONES (botones)   -> .c-btn-action       (naranja saturado)
     2. ESTADOS (badges)     -> .c-badge--<status>  (escala semántica)
     3. TIPOS (badges)       -> .c-badge--<type>    (categóricos pasteles)

   Mantener este archivo como única fuente de verdad de la paleta. Si hay que
   ajustar un color, se cambia AQUÍ, no en JS ni en HTML.
   ========================================================================== */

/* ---------- Variables de paleta ----------------------------------------- */
:root {
    /* Estados (escala progresiva ámbar -> azul -> índigo -> verde + rojo) */
    --c-status-pending-bg:   #fef3c7;
    --c-status-pending-fg:   #92400e;
    --c-status-delivered-bg: #dbeafe;
    --c-status-delivered-fg: #1e40af;
    --c-status-dn-sent-bg:   #c7d2fe;
    --c-status-dn-sent-fg:   #3730a3;
    --c-status-invoiced-bg:  #d1fae5;
    --c-status-invoiced-fg:  #065f46;
    --c-status-error-bg:     #fee2e2;
    --c-status-error-fg:     #991b1b;
    --c-status-cancelled-bg: #e5e7eb;
    --c-status-cancelled-fg: #6b7280;

    /* Tipos de documento (categóricos fríos) */
    --c-type-orders-bg:      #e0e7ff;
    --c-type-orders-fg:      #3730a3;
    --c-type-desadv-bg:      #ede9fe;
    --c-type-desadv-fg:      #5b21b6;
    --c-type-invoic-bg:      #cffafe;
    --c-type-invoic-fg:      #155e75;
    --c-type-recadv-bg:      #d1fae5;
    --c-type-recadv-fg:      #065f46;
    --c-type-genral-bg:      #fae8ff;
    --c-type-genral-fg:      #a21caf;
    --c-type-remadv-bg:      #fef9c3;
    --c-type-remadv-fg:      #854d0e;

    /* Acción primaria */
    --c-action-bg:           #f59e0b;
    --c-action-bg-hover:     #d97706;
    --c-action-fg:           #ffffff;
}

/* ---------- Badge base -------------------------------------------------- */
.c-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.6;
}

/* ---------- Badges de TIPO de documento --------------------------------- */
.c-badge--orders { background: var(--c-type-orders-bg); color: var(--c-type-orders-fg); }
.c-badge--desadv { background: var(--c-type-desadv-bg); color: var(--c-type-desadv-fg); }
.c-badge--invoic { background: var(--c-type-invoic-bg); color: var(--c-type-invoic-fg); }
.c-badge--recadv { background: var(--c-type-recadv-bg); color: var(--c-type-recadv-fg); }
.c-badge--genral { background: var(--c-type-genral-bg); color: var(--c-type-genral-fg); }
.c-badge--remadv { background: var(--c-type-remadv-bg); color: var(--c-type-remadv-fg); }

/* Fallback para tipos no mapeados */
.c-badge--type-unknown { background: #f1f5f9; color: #475569; }

/* ---------- Badges de ESTADO (progreso del workflow) -------------------- */
.c-badge--pending           { background: var(--c-status-pending-bg);   color: var(--c-status-pending-fg); }
.c-badge--processed,
.c-badge--delivered         { background: var(--c-status-delivered-bg); color: var(--c-status-delivered-fg); }
.c-badge--delivery-note-sent{ background: var(--c-status-dn-sent-bg);   color: var(--c-status-dn-sent-fg); }
.c-badge--invoiced          { background: var(--c-status-invoiced-bg);  color: var(--c-status-invoiced-fg); }
.c-badge--error             { background: var(--c-status-error-bg);     color: var(--c-status-error-fg); }
.c-badge--cancelled         { background: var(--c-status-cancelled-bg); color: var(--c-status-cancelled-fg); }

/* ---------- Botón de acción primaria (Facturar / Albaranar) ------------- */
.c-btn-action {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--c-action-bg);
    background: var(--c-action-bg);
    color: var(--c-action-fg);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.c-btn-action:hover {
    background: var(--c-action-bg-hover);
    border-color: var(--c-action-bg-hover);
    color: var(--c-action-fg);
}

.c-btn-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Variante DESADV: índigo del flujo Albarán ------------------- */
/* Se combina con .c-btn-action: <button class="c-btn-action c-btn-action--desadv">.
   Mantiene el resto de propiedades (padding, radius, transition) y solo
   reescribe el color de fondo y borde con el índigo del workflow ECI,
   alineado con el badge "ALBARANADO" (--c-status-dn-sent-fg). */
.c-btn-action--desadv {
    background: var(--c-status-dn-sent-fg);
    border-color: var(--c-status-dn-sent-fg);
}

.c-btn-action--desadv:hover {
    background: #2e2785;  /* índigo un escalón más oscuro */
    border-color: #2e2785;
}