/* =========================================================================
   colors.css - Paleta central de colores de m2 Marketing
   =========================================================================
   Todos los colores de la web como variables CSS, para que el resto de
   hojas de estilo puedan apuntar aqui en vez de repetir hex sueltos.

   1. Marca y semantica - identicas a css/style.css.
   2. Badges y estados  - INTOCABLES. Una sola variable por badge (aunque
      el valor coincida con el de otro), border/fondo/texto se derivan de
      ella con rgb(from ...) y color-mix() - cada uno se puede personalizar
      sin afectar a los demas.
   3. Gradientes y overlays compuestos.

   No hay variables "-rgb" sueltas: cuando algun color necesita transparencia
   se deriva del mismo var() con rgb(from var(--x) r g b / alpha), igual que
   en los badges - un solo valor guardado por color.

   Cargar este fichero DESPUES de css/style.css.
   ========================================================================= */

:root {

    /* ---- 1. Marca y semantica (agrupados por familia: neutros - azul - verdes - calidos - blanco) ----
       Prefijo "colors-" en TODA esta seccion (y solo en esta) porque estos
       nombres son los mismos que ya existen en el :root de css/style.css -
       sin el prefijo, cambiar un valor aqui se propagaria a TODA la web,
       incluidas las vistas que aun no se han migrado. Badges y paleta
       general usan nombres que no existen en style.css, no lo necesitan.

       Nomenclatura: solo llevan nombre propio el negro, el blanco, los grises
       (gris-1..5) y los 3 verdes de marca (principal/secundario/terciario).
       El resto son numerados (azul-N, verde-N, rojo-N, naranja-N) para que
       nunca haga falta adivinar que color es uno por su nombre - un nombre
       tipo "status-ok" no dice nada de que color se trata. La numeracion
       de esta seccion es independiente de la del punto 3 (paleta general);
       no hace falta que coincida ni mantener orden perfecto si se añade
       algo nuevo en medio mas adelante. */
    --colors-negro:                    #000000;
    --colors-font-color:               #343d4e;
    --colors-azul-1:                   #2973fc;
    --colors-verde-1:                  #008000;
    --colors-verde-2:                  #019901;
    --colors-verde-principal:          #2e7d32;
    --colors-verde-secundario:         #66bb6a;
    --colors-verde-terciario:          #a5d6a7;
    --colors-rojo-1:                   #c62828;
    --colors-naranja-1:                #e65100;
    --colors-rojo-2:                   #f83223;
    --colors-naranja-2:                #f88323;
    --colors-azul-3:                   #1565c0;
    --colors-morado-1:                 #9c27b0;
    --colors-morado-2:                 #6a1b9a;
    --colors-marron-1:                 #5d4037;
    --colors-amarillo-1:               #ffc107;
    --colors-amarillo-2:               #ffe082;
    --colors-blanco:                   #ffffff;

    /* Derivados (formula guardada, no un color plano) - para que un mismo
       efecto (ej. hover de fila) use SIEMPRE la misma formula en toda la
       web en vez de repetirla suelta en cada fichero. Si se cambia el
       porcentaje aqui, se propaga solo a quien use la variable.
       install/migrate_v*.php (css/migrate.css) NO usa derivados: solo
       colores de marca y semantica. */
    --colors-gris-1:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 13%);
    --colors-gris-2:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 36%);
    --colors-gris-3:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 47%);    /* convencion: gris para texto pequeño/secundario (etiquetas, descripciones, timestamps) - gris-4 se veia demasiado claro para leer bien */
    --colors-gris-4:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 67%);
    --colors-gris-5:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 81%);
    --colors-gris-6:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 23%);    /* fondo oscuro de vista previa de icono: Developer - Iconos Disponibles */
    --colors-gris-7:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 93%);    /* fondo casi blanco de cajas info/etiquetas: Developer - Iconos Disponibles */
    --colors-row-hover:  color-mix(in srgb, var(--colors-verde-principal), white 12%);
    --colors-verde-3:    color-mix(in srgb, var(--colors-verde-principal), var(--colors-verde-secundario) 64%);    /* semaforo ok/warn/critical: Developer - Estado del Servidor */
    --colors-verde-4:    color-mix(in srgb, var(--colors-blanco), var(--colors-verde-secundario) 34%);
    --colors-verde-5:    color-mix(in srgb, var(--colors-blanco), var(--colors-verde-secundario) 23%);
    --colors-verde-8:    #f4fcf6;    /* fondo suave de modales, secciones, tarjetas, hover y etiquetas flotantes (absorbe los antiguos verde-6 y verde-7, casi identicos); NO derivable de terciario: necesita mas azul que rojo (244/246) para que el tinte sea frio y no amarillento */
    --colors-gris-8:     color-mix(in srgb, var(--colors-negro), var(--colors-blanco) 98%);    /* fondo casi blanco de las form-section de modales (era #fafaf9) */
    --colors-verde-btn-hover:  color-mix(in srgb, var(--colors-verde-principal), white 6%);     /* btn.css, .btn:hover - antes #388e3c suelto */
    --colors-verde-btn-active: color-mix(in srgb, var(--colors-verde-principal), black 28%);    /* btn.css, .btn:active - antes #1b5e20 suelto */
    --colors-rojo-btn-hover:   color-mix(in srgb, var(--colors-rojo-1), black 9%);              /* btn.css, .btn-danger:hover - antes #b71c1c suelto */
    --colors-rojo-btn-active:  color-mix(in srgb, var(--colors-rojo-1), black 35%);             /* btn.css, .btn-danger:active - antes --rojo-4 suelto */

    /* Colores de botones dedicados (btn.css) - una variable base por boton;
       hover/activo/tonal salen SIEMPRE calculados aqui mismo con color-mix
       sobre estas constantes compartidas (mismo alpha/darken para las 3
       familias), igual que --badge-ranking-oro-light se calcula a partir de
       --badge-ranking-oro. btn.css solo consume el resultado con var(...),
       nunca repite la formula. --btn-renovable y --btn-tacita apuntan a su
       badge --badge-cs-* equivalente a proposito (mismo significado:
       contrato renovable / tacita), asi que si ese badge cambia de color,
       el boton se actualiza solo. */
    --btn-hover-darken:        12%;
    --btn-active-darken:       28%;
    --btn-tonal-bg-alpha:      0.45;
    --btn-tonal-border-alpha:  1;
    --btn-tonal-text-darken:   40%;

    --btn-aceptar:                var(--colors-verde-principal);
    --btn-aceptar-tonal-bg:       rgb(from var(--btn-aceptar) r g b / var(--btn-tonal-bg-alpha));
    --btn-aceptar-tonal-border:   rgb(from var(--btn-aceptar) r g b / var(--btn-tonal-border-alpha));
    --btn-aceptar-tonal-text:     color-mix(in srgb, var(--btn-aceptar), black var(--btn-tonal-text-darken));
    --btn-aceptar-tonal-hover:    color-mix(in srgb, var(--btn-aceptar), black var(--btn-hover-darken));

    --btn-eliminar:               var(--colors-rojo-1);
    --btn-eliminar-tonal-bg:      rgb(from var(--btn-eliminar) r g b / var(--btn-tonal-bg-alpha));
    --btn-eliminar-tonal-border:  rgb(from var(--btn-eliminar) r g b / var(--btn-tonal-border-alpha));
    --btn-eliminar-tonal-text:    color-mix(in srgb, var(--btn-eliminar), black var(--btn-tonal-text-darken));
    --btn-eliminar-tonal-hover:   color-mix(in srgb, var(--btn-eliminar), black var(--btn-hover-darken));

    --btn-renovable:              var(--badge-cs-renovable);
    --btn-renovable-hover:        color-mix(in srgb, var(--btn-renovable), black var(--btn-hover-darken));
    --btn-renovable-active:       color-mix(in srgb, var(--btn-renovable), black var(--btn-active-darken));
    --btn-renovable-tonal-bg:     rgb(from var(--btn-renovable) r g b / var(--btn-tonal-bg-alpha));
    --btn-renovable-tonal-border: rgb(from var(--btn-renovable) r g b / var(--btn-tonal-border-alpha));
    --btn-renovable-tonal-text:   color-mix(in srgb, var(--btn-renovable), black var(--btn-tonal-text-darken));

    --btn-tacita:                 var(--badge-cs-tacita);
    --btn-tacita-hover:           color-mix(in srgb, var(--btn-tacita), black var(--btn-hover-darken));
    --btn-tacita-active:          color-mix(in srgb, var(--btn-tacita), black var(--btn-active-darken));
    --btn-tacita-tonal-bg:        rgb(from var(--btn-tacita) r g b / var(--btn-tonal-bg-alpha));
    --btn-tacita-tonal-border:    rgb(from var(--btn-tacita) r g b / var(--btn-tonal-border-alpha));
    --btn-tacita-tonal-text:      color-mix(in srgb, var(--btn-tacita), black var(--btn-tonal-text-darken));

    --btn-reactivate:             var(--badge-cs-pte-valid-adm);
    --btn-reactivate-hover:       color-mix(in srgb, var(--btn-reactivate), black var(--btn-hover-darken));
    --btn-reactivate-active:      color-mix(in srgb, var(--btn-reactivate), black var(--btn-active-darken));
    --btn-reactivate-tonal-bg:    rgb(from var(--btn-reactivate) r g b / var(--btn-tonal-bg-alpha));
    --btn-reactivate-tonal-border: rgb(from var(--btn-reactivate) r g b / var(--btn-tonal-border-alpha));
    --btn-reactivate-tonal-text:  color-mix(in srgb, var(--btn-reactivate), black var(--btn-tonal-text-darken));

    /* --btn-filtro reutiliza el gris de la paleta general (--colors-gris-4)
       para el boton de filtros/secundario, con hover/active/tonal
       calculados igual que el resto de familias. Con gris-7 el borde
       (mismo color, solo mas alpha) no se distinguia del fondo por ser
       casi blanco; gris-4 ya tiene suficiente presencia a esa opacidad. */
    --btn-filtro:                 var(--colors-gris-4);
    --btn-filtro-hover:           color-mix(in srgb, var(--btn-filtro), black var(--btn-hover-darken));
    --btn-filtro-active:          color-mix(in srgb, var(--btn-filtro), black var(--btn-active-darken));
    --btn-filtro-tonal-bg:        rgb(from var(--btn-filtro) r g b / var(--btn-tonal-bg-alpha));
    --btn-filtro-tonal-border:    rgb(from var(--btn-filtro) r g b / var(--btn-tonal-border-alpha));
    --btn-filtro-tonal-text:      color-mix(in srgb, var(--btn-filtro), black var(--btn-tonal-text-darken));

    /* ---- 2. Badges y estados (colores intocables) ---- */

    /* Estado de contrato (style.css, .cs-*)
         border:     1.5px solid var(--badge-cs-X)
         background: rgb(from var(--badge-cs-X) r g b / var(--badge-cs-alpha))
         color:      color-mix(in srgb, var(--badge-cs-X), black var(--badge-cs-darken)) */
    --badge-cs-alpha:   0.50;
    --badge-cs-darken:  40%;
    --badge-cs-sms-enviado:    #00b0f0;
    --badge-cs-pte-valid-adm:  #ffc000;
    --badge-cs-tramitando:     #2db82d;
    --badge-cs-pte-verif-tlf:  #ff99ff;
    --badge-cs-activado:       #1a7a1a;
    --badge-cs-scoring:        #ed7d31;
    --badge-cs-ko:             #a6a6a6;
    --badge-cs-baja:           #ff0000;
    --badge-cs-renovable:      #8ea9db;
    --badge-cs-renovado:       #5ba3c9;
    --badge-cs-tacita:         #9b59b6;
    --badge-cs-eliminado:      #333333;

    /* Liquidacion (style.css, .liq-badge-*) - misma formula que Estado de contrato.
       Valores alineados con --badge-cs-* del mismo concepto (mismo color, cada
       badge sigue con su propia variable independiente) para no acumular tonos
       parecidos sin sentido entre las dos familias. */
    --badge-liq-bg-alpha:     0.45;
    --badge-liq-border-alpha: 0.50;
    --badge-liq-darken:       35%;
    --badge-liq-pendiente:    #a6a6a6;    /* = badge-cs-ko */
    --badge-liq-cobrado:      #1a7a1a;    /* = badge-cs-activado */
    --badge-liq-pagado:       #1a7a1a;    /* = badge-cs-activado */
    --badge-liq-alta:         #1a7a1a;    /* = badge-cs-activado */
    --badge-liq-baja:         #ff0000;    /* = badge-cs-baja */
    --badge-liq-deducido:     #ff0000;    /* = badge-cs-baja */
    --badge-liq-rechazado:    #ff0000;    /* = badge-cs-baja */
    --badge-liq-estudio:      #5ba3c9;    /* = badge-cs-renovado */
    --badge-liq-tacita:       #9b59b6;    /* = badge-cs-tacita */
    --badge-liq-cancelado:    #333333;    /* = badge-cs-eliminado */
    --badge-liq-preparado:    #00b0f0;    /* = badge-cs-sms-enviado */
    --badge-liq-renovacion:   #5ba3c9;    /* = badge-cs-renovado */
    --badge-liq-reclamado:    #ed7d31;    /* = badge-cs-scoring */
    --badge-liq-sincomision:  #333333;    /* = badge-cs-eliminado */

    /* Comisiones (style.css/commissions.css/contractdetail_modal.css, .comm-badge-*)
       texto = color base oscurecido (neon en crudo, igual que Estado de
       contrato usa un texto mas oscuro que su borde); fondo/borde derivados
       con alpha sobre el color base. Valores alineados con --badge-cs-* del
       mismo concepto. */
    --badge-comm-bg-alpha:     0.12;
    --badge-comm-border-alpha: 0.30;
    --badge-comm-darken:       40%;
    --badge-comm-amount-positive: #1a7a1a;    /* = badge-cs-activado */
    --badge-comm-amount-negative: #ff0000;    /* = badge-cs-baja */
    --badge-comm-eliminado:       #333333;    /* = badge-cs-eliminado */
    --badge-comm-sincom:          #333333;    /* = badge-cs-eliminado */

    /* Badges de rol - Gestion de usuarios (style.css, .role-badge-*) */
    --badge-role-bg-alpha:     0.28;
    --badge-role-border-alpha: 0.40;
    --badge-role-darken:       38%;
    --badge-role-comercial:      #5ba3c9;    /* = badge-cs-renovado */
    --badge-role-supervisor:     #ed7d31;    /* = badge-cs-scoring */
    --badge-role-administrador:  #9b59b6;    /* = badge-cs-tacita */
    --badge-role-desarrollador:  #1a7a1a;    /* = badge-cs-activado */

    /* Banner dashboard - tipo (dashboard_banner.css, .db-banner-type-badge--*) */
    --badge-banner-oferta:        #1a7a1a;    /* = badge-cs-activado */
    --badge-banner-sorteo:        #ed7d31;    /* = badge-cs-scoring */
    --badge-banner-ranking:       #ffc000;    /* = badge-cs-pte-valid-adm */

    /* Ranking mensual - podio Oro/Plata/Bronce (dashboard_banner.css, .db-ranking-*)
       mismo alpha/darken que Estado de contrato (--badge-cs-alpha/--badge-cs-darken) */
    --badge-ranking-bg-alpha:     0.50;
    --badge-ranking-border-alpha: 0.30;
    --badge-ranking-darken:       40%;
    --badge-ranking-oro:          #ffc000;    /* = badge-cs-pte-valid-adm */
    --badge-ranking-oro-light:    color-mix(in srgb, var(--badge-ranking-oro), white 35%);
    --badge-ranking-plata:        #a6a6a6;    /* = badge-cs-ko */
    --badge-ranking-plata-light:  color-mix(in srgb, var(--badge-ranking-plata), white 35%);
    --badge-ranking-bronce:       #ed7d31;    /* = badge-cs-scoring */
    --badge-ranking-bronce-light: color-mix(in srgb, var(--badge-ranking-bronce), white 35%);

   /* Developer - Estado del Servidor (devserverstatus.css, .badge-ok/.badge-down) */
    --badge-srvstatus-bg-alpha:     0.12;
    --badge-srvstatus-border-alpha: 0.30;
    --badge-srvstatus-darken:       40%;
    --badge-srvstatus-ok:           #1a7a1a;    /* = badge-cs-activado */
    --badge-srvstatus-down:         #ff0000;    /* = badge-cs-baja */

    /* Developer - Consultar Logs, tabla afectada (devlogs.css, .devlogs-badge-*)
       mismo patron que Comisiones/Perfil/Rol: color = var(--badge-devlog-X);
       fondo/borde derivados con alpha. "logs" llevaba alpha distinta
       (0.08/0.30) - unificada a la del resto, igual que el resto de familias
       de badges (una sola formula, sin excepciones) */
    --badge-devlog-bg-alpha:     0.12;
    --badge-devlog-border-alpha: 0.30;
    --badge-devlog-darken:       40%;
    --badge-devlog-users:        #00b0f0;    /* = badge-cs-sms-enviado */
    --badge-devlog-customers:    #ffc000;    /* = badge-cs-pte-valid-adm */
    --badge-devlog-schedule:     #2db82d;    /* = badge-cs-tramitando */
    --badge-devlog-memo:         #ff99ff;    /* = badge-cs-pte-verif-tlf */
    --badge-devlog-proposal:     #1a7a1a;    /* = badge-cs-activado */
    --badge-devlog-banners:      #ed7d31;    /* = badge-cs-scoring */
    --badge-devlog-contracts:    #a6a6a6;    /* = badge-cs-ko */
    --badge-devlog-commissions:  #ff0000;    /* = badge-cs-baja */
    --badge-devlog-notifies:     #8ea9db;    /* = badge-cs-renovable */
    --badge-devlog-logs:         #5ba3c9;    /* = badge-cs-renovado */
    --badge-devlog-channels:     #9b59b6;    /* = badge-cs-tacita */
    --badge-devlog-tokens:       #333333;    /* = badge-cs-eliminado */
    --badge-devlog-light:        #0097a7;
    --badge-devlog-docs:         #8d6e63;

    /* Developer - Consultar Logs, tipo de operacion (devlogs.css, .dl-op-*) */
    --badge-devop-bg-alpha:     0.12;
    --badge-devop-border-alpha: 0.30;
    --badge-devop-darken:       40%;
    --badge-devop-auth:         #00b0f0;    /* = badge-devlog-users */
    --badge-devop-users:        #ffc000;    /* = badge-devlog-customers */
    --badge-devop-clients:      #2db82d;    /* = badge-devlog-schedule */
    --badge-devop-contracts:    #ff99ff;    /* = badge-devlog-memo */
    --badge-devop-tasks:        #1a7a1a;    /* = badge-devlog-proposal */
    --badge-devop-proposals:    #ed7d31;    /* = badge-devlog-banners */
    --badge-devop-memo:         #a6a6a6;    /* = badge-devlog-contracts */
    --badge-devop-notif:        #ff0000;    /* = badge-devlog-commissions */
    --badge-devop-liq:          #8ea9db;    /* = badge-devlog-notifies */
    --badge-devop-channels:     #5ba3c9;    /* = badge-devlog-logs */
    --badge-devop-banners:      #9b59b6;    /* = badge-devlog-channels */
    --badge-devop-system:       #333333;    /* = badge-devlog-tokens */
    --badge-devop-light:        #0097a7;    /* = badge-devlog-light */
    --badge-devop-docs:         #8d6e63;    /* = badge-devlog-docs */

    /* Developer - Consultar Logs, estado (devlogs.css, .dl-status-*)
       "neutral" llevaba alpha distinta (0.08/0.25) - unificada igual que logs */
    --badge-devstatus-bg-alpha:     0.12;
    --badge-devstatus-border-alpha: 0.30;
    --badge-devstatus-darken:       40%;
    --badge-devstatus-ok:           #1a7a1a;    /* = badge-cs-activado */
    --badge-devstatus-error:        #ff0000;    /* = badge-cs-baja */
    --badge-devstatus-neutral:      #333333;    /* = badge-cs-eliminado */

    /* Developer - Novedades / Modal de novedades, audiencia (devchangelog.css
       .cdev-badge-*, changelog_modal.css .changelog-badge-*) - ambas vistas
       muestran el mismo badge de audiencia y comparten estos valores. */
    --badge-cdev-bg-alpha:       0.50;
    --badge-cdev-empty-bg-alpha: 0.15;
    --badge-cdev-darken:         40%;
    --badge-cdev-comercial:  #5ba3c9;    /* = badge-cs-renovado */
    --badge-cdev-supervisor: #ed7d31;    /* = badge-cs-scoring */
    --badge-cdev-admin:      #9b59b6;    /* = badge-cs-tacita */
    --badge-cdev-empty:      #a6a6a6;    /* = badge-cs-ko */

    /* Solicitudes (proposals.css, .proposal-status-*) */
    --badge-propstatus-bg-alpha:     0.28;
    --badge-propstatus-border-alpha: 0.40;
    --badge-propstatus-darken:       38%;
    --badge-propstatus-pending:      #ff0000;    /* = badge-cs-baja */
    --badge-propstatus-responded:    #1a7a1a;    /* = badge-cs-activado */
    --badge-propstatus-rejected:     #333333;    /* = badge-cs-eliminado */
    --badge-propstatus-closed:       #a6a6a6;    /* = badge-cs-ko */
    --badge-propstatus-initiated:    #00b0f0;    /* = badge-cs-sms-enviado */

    /* Solicitudes (proposals.css, .proposal-type-*) */
    --badge-proptype-bg-alpha:     0.38;
    --badge-proptype-border-alpha: 0.50;
    --badge-proptype-darken:       38%;
    --badge-proptype-estudio:      #00b0f0;    /* = badge-cs-sms-enviado */
    --badge-proptype-otras:        #ff99ff;    /* = badge-cs-pte-verif-tlf */

    /* Detalle de contrato - banco detectado desde IBAN (contractdetail_modal.css, .bank-badge) */
    --badge-bank-bg-alpha:     0.12;
    --badge-bank-border-alpha: 0.30;
    --badge-bank-darken:       40%;
    --badge-bank-detected:     #1a7a1a;    /* = badge-cs-activado */
    --badge-bank-unknown:      #ff0000;    /* = badge-cs-baja */

    /* Contador cero/no-cero - compartido por devcleanup.css/devdbbackup.css
       (.cleanup-count-*) y devassistant.css (.da-nomatch-*), mismo concepto
       repetido en 3 ficheros con las mismas clases o el mismo patron */
    --badge-count-bg-alpha:     0.12;
    --badge-count-border-alpha: 0.30;
    --badge-count-darken:       40%;
    --badge-count-zero:         #1a7a1a;    /* = badge-cs-activado */
    --badge-count-nonzero:      #ed7d31;    /* = badge-cs-scoring */

    /* Archivos huerfanos (devcleanup.css, .cleanup-orphan-badge*) */
    --badge-orphan-bg-alpha:     0.12;
    --badge-orphan-border-alpha: 0.30;
    --badge-orphan-darken:       40%;
    --badge-orphan-pending:      #9b59b6;    /* = badge-cs-tacita */
    --badge-orphan-used:         #ff0000;    /* = badge-cs-baja */

    /* Dashboard - cumpleaños +/- dias (dashboard.css, .db-bday-badge-*) */
    --badge-bday-bg-alpha:     0.12;
    --badge-bday-border-alpha: 0.30;
    --badge-bday-darken:       40%;
    --badge-bday-plus:         #1a7a1a;    /* = badge-cs-activado */
    --badge-bday-minus:        #ff0000;    /* = badge-cs-baja */

    /* Dashboard - tendencia clientes nuevos (dashboard.css, .db-trend-badge.*) */
    --badge-trend-bg-alpha:     0.12;
    --badge-trend-border-alpha: 0.30;
    --badge-trend-darken:       40%;
    --badge-trend-up:           #1a7a1a;    /* = badge-cs-activado */
    --badge-trend-down:         #ff0000;    /* = badge-cs-baja */
    --badge-trend-neutral:      #333333;    /* = badge-cs-eliminado */

    /* Cliente - tipo (clientdetails.css, .cfi-type-*) */
    --badge-clienttype-bg-alpha:     0.12;
    --badge-clienttype-border-alpha: 0.30;
    --badge-clienttype-darken:       40%;
    --badge-clienttype-domestico: #5ba3c9;    /* = badge-cs-renovado */
    --badge-clienttype-negocio:   #9b59b6;    /* = badge-cs-tacita */
    --badge-clienttype-pendiente: #a6a6a6;    /* = badge-cs-ko */

    /* Cliente - contratos por estado (manageclients.css, .cc-badge-*) */
    --badge-ccbadge-bg-alpha:     0.12;
    --badge-ccbadge-border-alpha: 0.30;
    --badge-ccbadge-darken:       40%;
    --badge-ccbadge-total:      #333333;    /* = badge-cs-eliminado */
    --badge-ccbadge-activo:     #1a7a1a;    /* = badge-cs-activado */
    --badge-ccbadge-renovable:  #8ea9db;    /* = badge-cs-renovable */
    --badge-ccbadge-baja:       #ff0000;    /* = badge-cs-baja */

    /* Agenda - tarea completada (schedule_modal.css, .sched-badge-*) */
    --badge-sched-completed-bg-alpha: 0.12;
    --badge-sched-border-alpha:       0.30;
    --badge-sched-darken:             40%;
    --badge-sched-completed:          #1a7a1a;    /* = badge-cs-activado */
    --badge-sched-pending:            #a6a6a6;    /* = badge-cs-ko */

    /* Comisiones - tarjeta flotante de comercial, donut + leyenda (comm_user_card.js) */
    --badge-cucard-bg-alpha:     0.12;
    --badge-cucard-border-alpha: 0.30;
    --badge-cucard-darken:       40%;
    --badge-cucard-activos:    #1a7a1a;    /* = badge-cs-activado */
    --badge-cucard-renovables: #8ea9db;    /* = badge-cs-renovable */
    --badge-cucard-baja:       #ff0000;    /* = badge-cs-baja */
    --badge-cucard-otros:      #a6a6a6;    /* = badge-cs-ko */

    /* Mi perfil - estado de cuenta (myprofile.css) - mismo patron que Comisiones */
    --badge-perfil-bg-alpha:     0.12;
    --badge-perfil-border-alpha: 0.30;
    --badge-perfil-darken:       40%;
    --badge-perfil-activo:       #1a7a1a;    /* = badge-cs-activado */
    --badge-perfil-inactivo:     #ff0000;    /* = badge-cs-baja */

    /* Mi perfil - historial de accesos, OK/FAIL (myprofile.css, .lh-ok/.lh-fail) */
    --badge-lh-bg-alpha:     0.12;
    --badge-lh-border-alpha: 0.30;
    --badge-lh-darken:       40%;
    --badge-lh-ok:           #2e7d32;
    --badge-lh-fail:         #b71c1c;

    /* Tipo de archivo adjunto (style.css, .badge-documento/.badge-imagen/.badge-excel)
       sin borde (estilo distinto al resto de badges, pastilla plana) - el texto
       usa el color base directamente, no hace falta oscurecerlo mas */
    --badge-filetype-bg-alpha: 0.10;
    --badge-filetype-documento: #1a56db;
    --badge-filetype-imagen:    #9c27b0;    /* = colors-morado-1 */
    --badge-filetype-excel:     #2e7d32;    /* = colors-verde-principal */

    /* ---- 3. Gradientes y colores compuestos ---- */
    --fondo:                      linear-gradient(45deg, #18ccc6, #cbe909);
    --dashboard-container:        rgba(255, 255, 255, 0.8);
    --modal-container:            rgba(244, 252, 246, 0.8);

    /* Notificaciones flotantes (style.css, .notifications-success/.notifications-error) */
    --notifications-success-gradient: linear-gradient(135deg, var(--colors-verde-2) 0%, #027d02 100%);
    --notifications-success-border:   #00dd00;
    --notifications-error-gradient:   linear-gradient(135deg, var(--colors-rojo-2) 0%, #d62817 100%);
    --notifications-error-border:     #ff5544;

}