/* ============================================================
   Carbon Design System — IBM Style
   IBM Plex Sans + Carbon Blue #0f62fe + UI Shell tokens
   https://carbondesignsystem.com
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* ── Carbon Blue (Interactive) ── */
    --carbon-blue:          #0f62fe;
    --carbon-blue-hover:    #0050e6;
    --carbon-blue-active:   #0043ce;
    --carbon-blue-light:    #d0e2ff;
    --carbon-blue-subtle:   #edf5ff;

    /* ── Carbon UI Shell ── */
    --carbon-bg:            #f4f4f4;   /* $ui-background */
    --carbon-bg-2:          #ffffff;
    --carbon-ui-01:         #f4f4f4;   /* layer */
    --carbon-ui-02:         #ffffff;
    --carbon-ui-03:         #e0e0e0;   /* subtle border */
    --carbon-ui-04:         #8d8d8d;   /* medium border */
    --carbon-ui-05:         #161616;   /* strong border */

    /* ── Carbon Tertiary / Hover ── */
    --carbon-hover-ui:      #e8e8e8;
    --carbon-selected-ui:   #e0e0e0;
    --carbon-active-ui:     #c6c6c6;

    /* ── Semantic colors ── */
    --carbon-green:         #198038;
    --carbon-green-light:   #defbe6;
    --carbon-red:           #da1e28;
    --carbon-red-light:     #fff1f1;
    --carbon-orange:        #ff832b;
    --carbon-orange-light:  #fff2e8;
    --carbon-yellow:        #f1c21b;
    --carbon-yellow-light:  #fdf6dd;
    --carbon-teal:          #007d79;
    --carbon-purple:        #6929c4;

    /* ── Carbon Text ── */
    --carbon-text-01:       #161616;   /* primary */
    --carbon-text-02:       #525252;   /* secondary */
    --carbon-text-03:       #a8a8a8;   /* placeholder */
    --carbon-text-04:       #ffffff;   /* on color */
    --carbon-text-05:       #6f6f6f;   /* helper */
    --carbon-link:          #0f62fe;
    --carbon-link-hover:    #0043ce;
    --carbon-link-visited:  #8a3ffc;

    /* ── Carbon Layout ── */
    --carbon-spacing-01:    0.125rem;  /* 2px  */
    --carbon-spacing-02:    0.25rem;   /* 4px  */
    --carbon-spacing-03:    0.5rem;    /* 8px  */
    --carbon-spacing-04:    0.75rem;   /* 12px */
    --carbon-spacing-05:    1rem;      /* 16px */
    --carbon-spacing-06:    1.5rem;    /* 24px */
    --carbon-spacing-07:    2rem;      /* 32px */
    --carbon-spacing-08:    2.5rem;    /* 40px */
    --carbon-spacing-09:    3rem;      /* 48px */

    /* ── Borders: Carbon usa 0 o 2px, sin radios grandes ── */
    --carbon-radius-sm:     2px;
    --carbon-radius-md:     2px;
    --carbon-radius-lg:     2px;
    --carbon-radius-xl:     2px;

    /* ── Shadows: mínimas en Carbon ── */
    --carbon-shadow-sm:     0 1px 2px rgba(0,0,0,0.10);
    --carbon-shadow-md:     0 2px 6px rgba(0,0,0,0.12);
    --carbon-shadow-lg:     0 4px 16px rgba(0,0,0,0.14);

    /* ── Separators ── */
    --carbon-separator:     #e0e0e0;

    /* ── Sidebar ── */
    --carbon-sidebar-bg:    #161616;   /* Carbon UI Shell nav dark */
    --carbon-sidebar-hover: #353535;
    --carbon-sidebar-active:#4c4c4c;
    --carbon-sidebar-link:  #f4f4f4;

    /* ── Aliases legacy (compatibilidad con código existente) ── */
    --apple-blue:           var(--carbon-blue);
    --apple-blue-hover:     var(--carbon-blue-hover);
    --apple-blue-active:    var(--carbon-blue-active);
    --apple-blue-light:     var(--carbon-blue-light);
    --apple-pink:           #ee5396;
    --apple-pink-light:     #ffd6e8;
    --apple-green:          var(--carbon-green);
    --apple-red:            var(--carbon-red);
    --apple-orange:         var(--carbon-orange);
    --apple-yellow:         var(--carbon-yellow);
    --apple-teal:           var(--carbon-teal);
    --apple-indigo:         var(--carbon-purple);
    --apple-bg:             var(--carbon-bg);
    --apple-bg-2:           var(--carbon-bg-2);
    --apple-fill-1:         var(--carbon-ui-01);
    --apple-fill-2:         var(--carbon-ui-03);
    --apple-fill-3:         #c6c6c6;
    --apple-fill-4:         #a8a8a8;
    --apple-separator:      var(--carbon-separator);
    --apple-label:          var(--carbon-text-01);
    --apple-label-2:        var(--carbon-text-02);
    --apple-label-3:        var(--carbon-text-05);
    --apple-label-4:        var(--carbon-text-03);
    --apple-white:          #ffffff;
    --apple-sidebar-bg:     var(--carbon-sidebar-bg);
    --apple-sidebar-active: var(--carbon-blue);
    --apple-shadow-sm:      var(--carbon-shadow-sm);
    --apple-shadow-md:      var(--carbon-shadow-md);
    --apple-shadow-lg:      var(--carbon-shadow-lg);
    --apple-radius-sm:      var(--carbon-radius-sm);
    --apple-radius-md:      var(--carbon-radius-md);
    --apple-radius-lg:      var(--carbon-radius-lg);
    --apple-radius-xl:      var(--carbon-radius-xl);
    --empleadores-primary:    var(--carbon-blue);
    --empleadores-secondary:  var(--carbon-blue-hover);
    --empleadores-accent:     var(--carbon-blue-subtle);
    --empleadores-dark:       var(--carbon-blue-active);
    --empleadores-light:      var(--carbon-bg);
    --empleadores-text:       var(--carbon-text-01);
    --empleadores-text-light: var(--carbon-text-02);
    --empleadores-warning:    var(--carbon-orange);
    --empleadores-danger:     var(--carbon-red);
    --empleadores-info:       var(--carbon-teal);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.42857;  /* Carbon body-short-01 */
    color: var(--carbon-text-01);
    background-color: var(--carbon-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    color: var(--carbon-text-01);
    letter-spacing: 0;           /* Carbon no usa letter-spacing negativo */
}
h1:focus { outline: none; }

a, .btn-link {
    color: var(--carbon-link);
    text-decoration: none;
}
a:hover, .btn-link:hover {
    color: var(--carbon-link-hover);
    text-decoration: underline;
}

code {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    color: #da1e28;
    background-color: var(--carbon-ui-01);
    padding: 0.1em 0.3em;
    font-size: 0.875em;
}