/* ============================================
   UTILIDADES GLOBALES
============================================ */
.hidden {
    display: none !important;
}

/* ============================================
   PALETA JADE - Monyma Design System
============================================ */
:root {
    /* Jade Colors */
    --jade-primary: #339999;
    --jade-light: #6cc;
    --jade-dark: #2d8080;
    --jade-alpha-5: rgba(51, 153, 153, 0.05);
    --jade-alpha-10: rgba(51, 153, 153, 0.1);
    --jade-alpha-15: rgba(51, 153, 153, 0.15);
    --jade-alpha-25: rgba(51, 153, 153, 0.25);
    --jade-alpha-30: rgba(51, 153, 153, 0.3);

    /* Backgrounds */
    --bg-primary: #09080b;
    --bg-secondary: #131215;
    --bg-black: #050505;

    /* Borders */
    --border-primary: #1e1e20;

    /* Text */
    --text-primary: #E4E6E7;
    --text-secondary: #9ca3af;
    --text-muted: #9A9C9D;

    /* Grays */
    --gray-400: #9ca3af;        /* Gris claro */
    --gray-500: #6b7280;
    --gray-dark-1: #3A3C3D;     /* Botones deshabilitados */
    --gray-dark-2: #5a5f66;     /* Gris oscuro */
    --gray-dark-3: #6b7178;     /* Hover gris oscuro */
    --gray-light: #d1d5db;      /* Gris muy claro para texto */

    /* Accent Colors */
    --danger: #ef4444;
    --danger-light: #ff6666;
    --danger-bg: #3d1a1a;

    --warning: #f59e0b;
    --warning-bg: #3d2e1a;

    --success: #10b981;
    --success-bg: #1a3d2e;

    --blue: #60a5fa;
    --blue-bg: #192455;
    --blue-light: #60a5fa;
    --blue-alpha-10: rgba(59, 130, 246, 0.1);

    /* Success alpha */
    --success-light: #4ade80;
    --success-alpha-10: rgba(34, 197, 94, 0.1);
    --success-alpha-20: rgba(34, 197, 94, 0.2);

    /* Danger alpha */
    --danger-alpha-10: rgba(239, 68, 68, 0.1);
    --danger-alpha-20: rgba(239, 68, 68, 0.2);

    /* Warning alpha */
    --warning-alpha-10: rgba(245, 158, 11, 0.1);

    /* Purple - Para incidencias nuevas */
    --purple: #6E56CF;
    --purple-light: #9E8CFC;
    --purple-alpha-10: rgba(110, 86, 207, 0.1);
    --purple-alpha-20: rgba(110, 86, 207, 0.2);

    /* Fondos tintados para cards de incidencias */
    --purple-bg-dark: #15121f;
    --warning-bg-dark: #1a1610;
    --blue-bg-dark: #0f1318;
    --success-bg-dark: #0f1512;
    --danger-bg-dark: #1a1012;
    --neutral-bg-light: #131215;

    /* Lime - Color secundario para cards alternativas */
    --lime-primary: #84cc16;
    --lime-hover: #65a30d;
    --lime-active: #4d7c0f;
}

/* ============================================
   FONT AWESOME ICONS - Ajuste vertical global
============================================ */
/* IMPORTANTE: Font Awesome tiene un desplazamiento baseline por defecto.
   Este ajuste de 2px compensa ese desplazamiento para la mayoría de casos.

   EXCEPCIONES: Contenedores que usan display: flex con align-items: center
   NO necesitan este ajuste porque flex ya centra correctamente.

   ANTES de añadir nuevas excepciones, verificar si el contenedor es flex.
   Ver: .btn i, .badge-table, .checkbox-icon, .metric-card-icon, .meta-fecha,
        .meta-tecnico, .card-incidencia-field, .info-empresa, .info-registro,
        .email-destinatario-label, .toolbar-label
        (todos son flex + align-items: center) */
.fas,
.far,
.fal,
.fab {
    vertical-align: baseline;
    position: relative;
    top: 2px;
}