/**
 * design-tokens.css — Deklaro Design System
 * Generado desde design/00-design-tokens.md (Google Stitch)
 * Importar ANTES de Bootstrap en todos los HTML.
 *
 * Estrategia:
 *   1. CSS custom properties del sistema Deklaro
 *   2. Overrides de variables Bootstrap 5 para que componentes BS
 *      hereden automáticamente la paleta Deklaro
 *   3. Clases de utilidad específicas del sistema (dk-*)
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    /* Surface */
    --dk-surface:                    #f8f9ff;
    --dk-surface-dim:                #cbdbf5;
    --dk-surface-bright:             #f8f9ff;
    --dk-surface-lowest:             #ffffff;
    --dk-surface-low:                #eff4ff;
    --dk-surface-container:          #e5eeff;
    --dk-surface-high:               #dce9ff;
    --dk-surface-highest:            #d3e4fe;

    /* On-surface */
    --dk-on-surface:                 #0b1c30;
    --dk-on-surface-variant:         #45464d;
    --dk-inverse-surface:            #213145;
    --dk-inverse-on-surface:         #eaf1ff;

    /* Outlines */
    --dk-outline:                    #76777d;
    --dk-outline-variant:            #c6c6cd;

    /* Primary (navy/black) */
    --dk-primary:                    #000000;
    --dk-on-primary:                 #ffffff;
    --dk-primary-container:          #131b2e;
    --dk-on-primary-container:       #7c839b;
    --dk-primary-fixed:              #dae2fd;
    --dk-primary-fixed-dim:          #bec6e0;
    --dk-inverse-primary:            #bec6e0;

    /* Secondary (emerald — profit/success) */
    --dk-secondary:                  #006c49;
    --dk-on-secondary:               #ffffff;
    --dk-secondary-container:        #6cf8bb;
    --dk-on-secondary-container:     #00714d;
    --dk-secondary-fixed:            #6ffbbe;
    --dk-secondary-fixed-dim:        #4edea3;

    /* Tertiary (indigo) */
    --dk-tertiary:                   #000000;
    --dk-tertiary-container:         #07006c;
    --dk-on-tertiary-container:      #7073ff;
    --dk-tertiary-fixed:             #e1e0ff;
    --dk-tertiary-fixed-dim:         #c0c1ff;

    /* Error */
    --dk-error:                      #ba1a1a;
    --dk-on-error:                   #ffffff;
    --dk-error-container:            #ffdad6;
    --dk-on-error-container:         #93000a;

    /* Background */
    --dk-background:                 #f8f9ff;
    --dk-on-background:              #0b1c30;

    /* Typography scale */
    --dk-font:                       'Inter', system-ui, -apple-system, sans-serif;
    --dk-fs-display:                 3rem;       /* 48px */
    --dk-fw-display:                 700;
    --dk-fs-headline:                2rem;       /* 32px */
    --dk-fw-headline:                600;
    --dk-fs-headline-mobile:         1.5rem;     /* 24px */
    --dk-fs-summary:                 1.5rem;     /* 24px */
    --dk-fw-summary:                 700;
    --dk-fs-body-md:                 1rem;       /* 16px */
    --dk-fs-body-sm:                 0.875rem;   /* 14px */
    --dk-fs-label:                   0.75rem;    /* 12px */
    --dk-fw-label:                   600;
    --dk-ls-label:                   0.05em;
    --dk-fs-table:                   0.8125rem;  /* 13px */
    --dk-fw-table:                   500;

    /* Radius */
    --dk-radius-sm:                  0.25rem;
    --dk-radius:                     0.5rem;
    --dk-radius-md:                  0.75rem;
    --dk-radius-lg:                  1rem;
    --dk-radius-xl:                  1.5rem;
    --dk-radius-full:                9999px;

    /* Spacing */
    --dk-space-unit:                 4px;
    --dk-space-sm:                   8px;
    --dk-space-md:                   16px;
    --dk-space-lg:                   32px;
    --dk-space-gutter:               24px;
    --dk-space-card:                 24px;
    --dk-margin-desktop:             40px;
    --dk-margin-mobile:              16px;

    /* Elevation */
    --dk-shadow-card:                0px 4px 20px rgba(15, 23, 42, 0.05);
    --dk-shadow-modal:               0px 8px 32px rgba(15, 23, 42, 0.12);

    /* ── Bootstrap 5 variable overrides ──────────────────────────────────── */
    --bs-font-sans-serif:            var(--dk-font);
    --bs-body-font-family:           var(--dk-font);
    --bs-body-bg:                    var(--dk-background);
    --bs-body-color:                 var(--dk-on-background);

    --bs-primary:                    var(--dk-primary);
    --bs-primary-rgb:                0, 0, 0;
    --bs-secondary:                  var(--dk-secondary);
    --bs-secondary-rgb:              0, 108, 73;
    --bs-danger:                     var(--dk-error);
    --bs-danger-rgb:                 186, 26, 26;
    --bs-success:                    var(--dk-secondary);

    --bs-border-color:               var(--dk-outline-variant);
    --bs-border-radius:              var(--dk-radius);
    --bs-border-radius-sm:           var(--dk-radius-sm);
    --bs-border-radius-lg:           var(--dk-radius-md);
    --bs-border-radius-xl:           var(--dk-radius-lg);
    --bs-border-radius-pill:         var(--dk-radius-full);

    --bs-card-border-radius:         var(--dk-radius-lg);
    --bs-card-box-shadow:            var(--dk-shadow-card);
    --bs-card-cap-padding-y:         var(--dk-space-card);
    --bs-card-cap-padding-x:         var(--dk-space-card);
    --bs-card-spacer-y:              var(--dk-space-card);
    --bs-card-spacer-x:              var(--dk-space-card);
}

/* ── Base reset y tipografía ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:      var(--dk-font);
    background-color: var(--dk-background);
    color:            var(--dk-on-surface);
    -webkit-font-smoothing: antialiased;
}

/* Material Symbols base */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-style:  normal;
    font-size:   24px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* ── dk-card ──────────────────────────────────────────────────────────────── */
.dk-card {
    background:    var(--dk-surface-lowest);
    border:        1px solid var(--dk-outline-variant);
    border-radius: var(--dk-radius-lg);
    box-shadow:    var(--dk-shadow-card);
    overflow:      hidden;
}

.dk-card-header {
    padding:       var(--dk-space-card);
    border-bottom: 1px solid var(--dk-outline-variant);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           var(--dk-space-md);
}

.dk-card-body {
    padding: var(--dk-space-card);
}

/* Dark/navy card variant */
.dk-card-dark {
    background:    var(--dk-primary-container);
    border-color:  transparent;
    color:         var(--dk-on-primary-fixed);
}

.dk-card-dark .dk-card-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

/* ── dk-navbar ────────────────────────────────────────────────────────────── */
.dk-navbar {
    background:    var(--dk-surface);
    border-bottom: 1px solid var(--dk-outline-variant);
    padding:       var(--dk-space-md) var(--dk-margin-mobile);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    position:      sticky;
    top:           0;
    z-index:       1000;
}

@media (min-width: 768px) {
    .dk-navbar { padding-inline: var(--dk-margin-desktop); }
}

.dk-navbar-brand {
    display:     flex;
    align-items: center;
    gap:         var(--dk-space-sm);
    text-decoration: none;
    color:       var(--dk-on-surface);
}

.dk-brand-icon {
    width:         40px;
    height:        40px;
    border-radius: var(--dk-radius);
    background:    var(--dk-primary-container);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--dk-on-primary);
}

.dk-brand-name {
    font-size:   var(--dk-fs-headline-mobile);
    font-weight: var(--dk-fw-headline);
    line-height: 1.2;
    color:       var(--dk-on-surface);
}

/* ── dk-btn ───────────────────────────────────────────────────────────────── */
.dk-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--dk-space-sm);
    padding:         0.625rem 1.25rem;   /* ~10px 20px → 44px touch target */
    height:          44px;
    border-radius:   var(--dk-radius);
    font-family:     var(--dk-font);
    font-size:       var(--dk-fs-body-md);
    font-weight:     500;
    line-height:     1;
    border:          none;
    cursor:          pointer;
    transition:      opacity .15s, transform .1s;
    text-decoration: none;
    white-space:     nowrap;
}

.dk-btn:active { transform: scale(0.97); }

.dk-btn-primary {
    background: var(--dk-primary);
    color:      var(--dk-on-primary);
}
.dk-btn-primary:hover { opacity: .88; color: var(--dk-on-primary); }

.dk-btn-secondary {
    background: var(--dk-secondary);
    color:      var(--dk-on-secondary);
}
.dk-btn-secondary:hover { opacity: .88; color: var(--dk-on-secondary); }

.dk-btn-ghost {
    background: var(--dk-surface-lowest);
    color:      var(--dk-primary);
    border:     1px solid var(--dk-outline-variant);
}
.dk-btn-ghost:hover { background: var(--dk-surface-low); color: var(--dk-primary); }

.dk-btn-icon {
    width:         40px;
    height:        40px;
    padding:       0;
    border-radius: var(--dk-radius);
    background:    var(--dk-surface-lowest);
    border:        1px solid var(--dk-outline-variant);
    color:         var(--dk-primary);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    background .15s;
}
.dk-btn-icon:hover { background: var(--dk-surface-container); }

/* ── dk-badge (status pills) ─────────────────────────────────────────────── */
.dk-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 10px;
    border-radius: var(--dk-radius-full);
    font-size:     var(--dk-fs-label);
    font-weight:   var(--dk-fw-label);
    letter-spacing: var(--dk-ls-label);
    white-space:   nowrap;
}

.dk-badge-active {
    background: rgba(0, 108, 73, 0.10);
    color:      var(--dk-secondary);
}
.dk-badge-closed {
    background: rgba(69, 70, 77, 0.10);
    color:      var(--dk-on-surface-variant);
}
.dk-badge-archived {
    background: rgba(69, 70, 77, 0.08);
    color:      var(--dk-on-surface-variant);
}
/* Batch statuses */
.dk-badge-pending, .dk-badge-parsing, .dk-badge-pricing {
    background: rgba(19, 27, 46, 0.10);
    color:      var(--dk-on-primary-container);
}
.dk-badge-computed {
    background: rgba(0, 108, 73, 0.10);
    color:      var(--dk-secondary);
}
.dk-badge-error {
    background: var(--dk-error-container);
    color:      var(--dk-on-error-container);
}

/* ── dk-year-selector ─────────────────────────────────────────────────────── */
.dk-year-selector {
    display:       flex;
    align-items:   center;
    gap:           2px;
    background:    var(--dk-surface-high);
    border-radius: var(--dk-radius);
    padding:       4px;
}

.dk-year-tab {
    padding:       6px 16px;
    border-radius: var(--dk-radius-sm);
    font-size:     var(--dk-fs-label);
    font-weight:   var(--dk-fw-label);
    letter-spacing: var(--dk-ls-label);
    color:         var(--dk-on-surface-variant);
    border:        none;
    background:    transparent;
    cursor:        pointer;
    transition:    background .15s, color .15s;
    white-space:   nowrap;
}
.dk-year-tab:hover { background: var(--dk-surface-container); }
.dk-year-tab.active {
    background: var(--dk-primary);
    color:      var(--dk-on-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* ── dk-table ─────────────────────────────────────────────────────────────── */
.dk-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--dk-fs-table);
    font-weight:     var(--dk-fw-table);
}

.dk-table thead tr {
    background:    var(--dk-surface-low);
    border-bottom: 1px solid var(--dk-outline-variant);
}

.dk-table th {
    padding:        var(--dk-space-md) var(--dk-space-card);
    font-size:      var(--dk-fs-label);
    font-weight:    var(--dk-fw-label);
    letter-spacing: var(--dk-ls-label);
    color:          var(--dk-on-surface-variant);
    text-transform: uppercase;
    white-space:    nowrap;
}

.dk-table td {
    padding:        var(--dk-space-md) var(--dk-space-card);
    color:          var(--dk-on-surface);
    border-bottom:  1px solid var(--dk-outline-variant);
    vertical-align: middle;
}

.dk-table tbody tr:last-child td { border-bottom: none; }
.dk-table tbody tr:hover { background: var(--dk-surface-low); }

/* ── dk-stat ──────────────────────────────────────────────────────────────── */
.dk-stat-label {
    font-size:      var(--dk-fs-label);
    font-weight:    var(--dk-fw-label);
    letter-spacing: var(--dk-ls-label);
    text-transform: uppercase;
    color:          var(--dk-on-surface-variant);
    margin-bottom:  4px;
}

.dk-stat-value {
    font-size:   var(--dk-fs-summary);
    font-weight: var(--dk-fw-summary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dk-stat-value-lg {
    font-size:   var(--dk-fs-display);
    font-weight: var(--dk-fw-display);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Color helpers */
.dk-text-profit  { color: var(--dk-secondary); }
.dk-text-loss    { color: var(--dk-error); }
.dk-text-muted   { color: var(--dk-on-surface-variant); }
.dk-text-primary { color: var(--dk-primary); }
.dk-text-on-dark { color: var(--dk-on-primary-fixed); }

/* ── dk-progress-bar ──────────────────────────────────────────────────────── */
.dk-progress {
    height:        4px;
    background:    var(--dk-surface-variant);
    border-radius: var(--dk-radius-full);
    overflow:      hidden;
}

.dk-progress-bar {
    height:        100%;
    background:    var(--dk-secondary-fixed-dim);
    border-radius: var(--dk-radius-full);
    transition:    width .3s ease;
}

.dk-progress-bar-indeterminate {
    width:     40%;
    animation: dk-indeterminate 1.6s infinite linear;
}

@keyframes dk-indeterminate {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(350%); }
}

/* ── Exchange icon chip ───────────────────────────────────────────────────── */
.dk-exchange-icon {
    width:         40px;
    height:        40px;
    min-width:     40px;
    border-radius: var(--dk-radius);
    background:    var(--dk-surface-high);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--dk-primary);
    font-size:     20px;
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.dk-page-main {
    max-width: 1280px;
    margin:    0 auto;
    padding:   var(--dk-space-lg) var(--dk-margin-mobile);
}

@media (min-width: 768px) {
    .dk-page-main { padding-inline: var(--dk-margin-desktop); }
}

/* Bento grid shorthand */
.dk-bento {
    display: grid;
    gap:     var(--dk-space-gutter);
}

/* ── Inline edit (batch name, etc.) ──────────────────────────────────────── */
.dk-inline-edit-input {
    font-size:   var(--dk-fs-headline-mobile);
    font-weight: var(--dk-fw-headline);
    border:      1px solid var(--dk-outline-variant);
    border-radius: var(--dk-radius);
    padding:     4px 10px;
    outline:     none;
    background:  var(--dk-surface-lowest);
    color:       var(--dk-on-surface);
    transition:  border-color .15s, box-shadow .15s;
}
.dk-inline-edit-input:focus {
    border-color: var(--dk-primary);
    box-shadow:   0 0 0 3px rgba(0,0,0,.08);
}

/* ── Legal footer ─────────────────────────────────────────────────────────── */
.dk-footer-legal {
    padding:     var(--dk-space-lg) var(--dk-margin-mobile);
    text-align:  center;
    font-size:   var(--dk-fs-body-sm);
    color:       var(--dk-on-surface-variant);
    border-top:  1px solid var(--dk-outline-variant);
    margin-top:  var(--dk-space-lg);
}