/* ==========================================================================
   GBX Cultiva AI — Tema agro sobre Bootstrap 5.3 (claro / oscuro)
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="light"] {
    --c-primary: #15803d;
    --c-primary-rgb: 21, 128, 61;
    --c-primary-hover: #166534;
    --c-primary-strong: #14532d;
    --c-primary-soft: #e8f5ec;
    --c-on-primary: #ffffff;
    --c-accent: #d97706;
    --c-accent-rgb: 217, 119, 6;
    --c-accent-soft: #fef3c7;
    --c-earth: #92400e;
    --c-water: #0284c7;
    --c-water-soft: #e0f2fe;

    --c-bg: #f5f7f3;
    --c-surface: #ffffff;
    --c-surface-2: #f8faf7;
    --c-border: #e2e8e0;
    --c-border-strong: #cbd5c8;
    --c-text: #1f2a24;
    --c-heading: #0f1f17;
    --c-muted: #5d6b62;
    --c-faint: #8a978f;

    --c-success: #16a34a;
    --c-success-soft: #dcfce7;
    --c-warning: #d97706;
    --c-warning-soft: #fef3c7;
    --c-danger: #dc2626;
    --c-danger-soft: #fee2e2;
    --c-info: #0284c7;
    --c-info-soft: #e0f2fe;
    --c-secondary-soft: #eef1ec;

    --sidebar-bg: #0f2a1d;
    --sidebar-bg-2: #13352a;
    --sidebar-text: #b8cbbf;
    --sidebar-text-strong: #ffffff;
    --sidebar-muted: #6f8c7c;
    --sidebar-active: rgba(134, 239, 172, 0.12);
    --sidebar-accent: #86efac;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 40, 24, 0.06);
    --shadow: 0 1px 3px rgba(16, 40, 24, 0.06), 0 8px 24px -12px rgba(16, 40, 24, 0.12);
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: var(--c-bg);
    --bs-body-color: var(--c-text);
    --bs-emphasis-color: var(--c-heading);
    --bs-secondary-color: var(--c-muted);
    --bs-border-color: var(--c-border);
    --bs-primary: var(--c-primary);
    --bs-primary-rgb: var(--c-primary-rgb);
    --bs-link-color: var(--c-primary);
    --bs-link-color-rgb: var(--c-primary-rgb);
    --bs-link-hover-color: var(--c-primary-hover);
    --bs-success: var(--c-success);
    --bs-warning: var(--c-warning);
    --bs-danger: var(--c-danger);
    --bs-info: var(--c-info);
    --bs-tertiary-bg: var(--c-surface-2);
    --bs-secondary-bg: var(--c-secondary-soft);
    --bs-card-bg: var(--c-surface);
    --bs-focus-ring-color: rgba(var(--c-primary-rgb), 0.25);
}

[data-bs-theme="dark"] {
    --c-primary: #22c55e;
    --c-primary-rgb: 34, 197, 94;
    --c-primary-hover: #4ade80;
    --c-primary-strong: #86efac;
    --c-primary-soft: rgba(34, 197, 94, 0.14);
    --c-on-primary: #052e16;
    --c-accent: #fbbf24;
    --c-accent-rgb: 251, 191, 36;
    --c-accent-soft: rgba(251, 191, 36, 0.15);
    --c-water: #38bdf8;
    --c-water-soft: rgba(56, 189, 248, 0.14);

    --c-bg: #0a1310;
    --c-surface: #101c17;
    --c-surface-2: #13221c;
    --c-border: #1f3129;
    --c-border-strong: #2c4339;
    --c-text: #d3e0d8;
    --c-heading: #f2f7f4;
    --c-muted: #8ea398;
    --c-faint: #66796f;

    --c-success: #4ade80;
    --c-success-soft: rgba(74, 222, 128, 0.14);
    --c-warning: #fbbf24;
    --c-warning-soft: rgba(251, 191, 36, 0.14);
    --c-danger: #f87171;
    --c-danger-soft: rgba(248, 113, 113, 0.14);
    --c-info: #38bdf8;
    --c-info-soft: rgba(56, 189, 248, 0.14);
    --c-secondary-soft: #18282100;

    --sidebar-bg: #08110d;
    --sidebar-bg-2: #0d1a14;
    --sidebar-text: #9fb5a8;
    --sidebar-muted: #5c7367;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.6);

    --bs-body-bg: var(--c-bg);
    --bs-body-color: var(--c-text);
    --bs-emphasis-color: var(--c-heading);
    --bs-secondary-color: var(--c-muted);
    --bs-border-color: var(--c-border);
    --bs-tertiary-bg: var(--c-surface-2);
    --bs-secondary-bg: #18282190;
    --bs-card-bg: var(--c-surface);
    color-scheme: dark;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--bs-body-font-family);
    font-size: 0.875rem;
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--c-heading); font-weight: 650; letter-spacing: -0.02em; }
a { text-decoration: none; }
.text-muted, .text-secondary { color: var(--c-muted) !important; }
.text-faint { color: var(--c-faint) !important; }
.text-heading { color: var(--c-heading) !important; }
.text-primary { color: var(--c-primary) !important; }
.text-accent { color: var(--c-accent) !important; }
.text-water { color: var(--c-water) !important; }
.fw-semibold { font-weight: 600 !important; }
.fs-7 { font-size: 0.8125rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.6875rem !important; }
.lh-tight { line-height: 1.2 !important; }
.tabular { font-variant-numeric: tabular-nums; }
.ph { line-height: 1; vertical-align: -0.125em; }
::selection { background: rgba(var(--c-primary-rgb), 0.2); }

/* ---------- App shell ---------- */
.app { min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    display: flex; flex-direction: column;
    transition: width .2s ease, transform .25s ease;
}
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin .2s ease; }
.app-content { flex: 1; padding: 1.5rem; max-width: 1680px; width: 100%; margin: 0 auto; }
.app-footer { padding: 1rem 1.5rem; color: var(--c-faint); font-size: .75rem; border-top: 1px solid var(--c-border); }

.sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; gap: .7rem; padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.sidebar-brand img { width: 36px; height: 36px; border-radius: 10px; }
.sidebar-brand .brand-name { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.sidebar-brand .brand-sub { color: var(--sidebar-accent); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.sidebar-company { margin: .875rem 1rem .25rem; padding: .625rem .75rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: .6rem; }
.sidebar-company .avatar { background: rgba(134,239,172,.15); color: var(--sidebar-accent); }
.sidebar-company .name { color: #fff; font-weight: 600; font-size: .8125rem; line-height: 1.2; }
.sidebar-company .meta { color: var(--sidebar-muted); font-size: .6875rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1.25rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-section { color: var(--sidebar-muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1.1rem .75rem .45rem; white-space: nowrap; }
.nav-link-app {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .55rem .75rem; border-radius: 9px; border: 0; background: transparent;
    color: var(--sidebar-text); font-weight: 500; font-size: .8438rem; text-align: left;
    transition: background .15s, color .15s; white-space: nowrap;
}
.nav-link-app > .ph { font-size: 1.2rem; flex-shrink: 0; opacity: .9; }
.nav-link-app:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-link-app.active { background: var(--sidebar-active); color: #fff; box-shadow: inset 3px 0 0 var(--sidebar-accent); }
.nav-link-app.active > .ph { color: var(--sidebar-accent); }
.nav-link-app .caret { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.nav-link-app[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-link-app .badge { margin-left: auto; }
.nav-sub { padding: .15rem 0 .35rem 2.45rem; }
.nav-sub a { display: block; padding: .38rem .7rem; border-radius: 7px; color: var(--sidebar-text); font-size: .8125rem; white-space: nowrap; }
.nav-sub a:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-sub a.active { color: var(--sidebar-accent); font-weight: 600; }
.sidebar-footer { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .75rem; color: var(--sidebar-muted); }
.sidebar-footer .plan { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 10px; background: rgba(251,191,36,.08); color: #fde68a; }

/* Sidebar colapsado (escritorio) */
@media (min-width: 992px) {
    body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .sidebar-brand .brand-text,
    body.sidebar-collapsed .sidebar-company .company-text,
    body.sidebar-collapsed .nav-section,
    body.sidebar-collapsed .nav-link-app span,
    body.sidebar-collapsed .nav-link-app .caret,
    body.sidebar-collapsed .nav-link-app .badge,
    body.sidebar-collapsed .nav-sub,
    body.sidebar-collapsed .sidebar-footer { display: none !important; }
    body.sidebar-collapsed .nav-link-app { justify-content: center; padding: .65rem; }
    body.sidebar-collapsed .sidebar-company { justify-content: center; padding: .5rem; margin: .75rem .6rem; }
    body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
    body.sidebar-collapsed .app-sidebar:hover { width: var(--sidebar-w); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
    body.sidebar-collapsed .app-sidebar:hover .brand-text,
    body.sidebar-collapsed .app-sidebar:hover .company-text,
    body.sidebar-collapsed .app-sidebar:hover .nav-section,
    body.sidebar-collapsed .app-sidebar:hover .nav-link-app span,
    body.sidebar-collapsed .app-sidebar:hover .nav-link-app .caret,
    body.sidebar-collapsed .app-sidebar:hover .sidebar-footer { display: revert !important; }
    body.sidebar-collapsed .app-sidebar:hover .nav-sub.show { display: block !important; }
    body.sidebar-collapsed .app-sidebar:hover .nav-link-app { justify-content: flex-start; padding: .55rem .75rem; }
    body.sidebar-collapsed .app-sidebar:hover .sidebar-brand { justify-content: flex-start; padding: 0 1.25rem; }
    body.sidebar-collapsed .app-sidebar:hover .sidebar-company { justify-content: flex-start; padding: .625rem .75rem; margin: .875rem 1rem .25rem; }
}

/* Movil / tablet */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: none; }
    body.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 10px 0 40px rgba(0,0,0,.35); }
    .app-main { margin-left: 0; }
    .app-content { padding: 1rem; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(5, 20, 12, .55); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s; }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

/* ---------- Topbar ---------- */
.app-topbar {
    position: sticky; top: 0; z-index: 1030; height: var(--topbar-h);
    display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem;
    background: color-mix(in srgb, var(--c-surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--c-border);
}
.topbar-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    background: transparent; color: var(--c-muted); font-size: 1.2rem; transition: all .15s; flex-shrink: 0;
}
.topbar-btn:hover, .topbar-btn[aria-expanded="true"] { background: var(--c-primary-soft); color: var(--c-primary); }
.topbar-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger); border: 2px solid var(--c-surface); }
.topbar-search { position: relative; max-width: 420px; flex: 1; }
.topbar-search .ph { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--c-faint); font-size: 1rem; }
.topbar-search input { padding-left: 2.4rem; height: 40px; border-radius: 10px; background: var(--c-surface-2); border-color: var(--c-border); }
.topbar-search kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: var(--c-surface); color: var(--c-faint); border: 1px solid var(--c-border); font-size: .65rem; padding: .1rem .35rem; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050; max-height: 420px; overflow-y: auto; }
.topbar-user { display: flex; align-items: center; gap: .6rem; padding: .25rem .4rem .25rem .25rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--c-text); }
.topbar-user:hover { background: var(--c-surface-2); border-color: var(--c-border); }
.acting-banner { background: var(--c-accent-soft); color: var(--c-earth); border-bottom: 1px solid rgba(var(--c-accent-rgb), .25); font-size: .8125rem; padding: .45rem 1.25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
[data-bs-theme="dark"] .acting-banner { color: var(--c-accent); }

/* ---------- Page header ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header .subtitle { color: var(--c-muted); margin-top: .25rem; font-size: .875rem; }
.breadcrumb { font-size: .75rem; margin-bottom: .4rem; --bs-breadcrumb-divider-color: var(--c-faint); --bs-breadcrumb-item-active-color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-primary); }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Cards ---------- */
.card {
    --bs-card-border-color: var(--c-border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}
.card-header { border-bottom: 1px solid var(--c-border); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.card-header .card-title { margin: 0; font-size: .9375rem; font-weight: 650; color: var(--c-heading); }
.card-header .card-subtitle { font-size: .75rem; color: var(--c-muted); margin-top: .1rem; }
.card-header .card-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.card-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--c-primary-soft); color: var(--c-primary); flex-shrink: 0; }
.card-footer { background: transparent; border-top: 1px solid var(--c-border); padding: .875rem 1.25rem; }
.card-hover { transition: transform .15s, box-shadow .15s, border-color .15s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-border-strong); }

/* ---------- Stat ---------- */
.stat { padding: 1.15rem 1.25rem; height: 100%; display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stat .stat-label { color: var(--c-muted); font-size: .8125rem; font-weight: 500; }
.stat .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--c-heading); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .stat-hint { font-size: .75rem; color: var(--c-faint); }
.stat .stat-spark { margin: 0 -1.25rem -1.15rem; }
.delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; }
.delta.up { color: var(--c-success); background: var(--c-success-soft); }
.delta.down { color: var(--c-danger); background: var(--c-danger-soft); }
.delta.flat { color: var(--c-muted); background: var(--c-secondary-soft); }

/* Iconos tonales */
.icon-tone { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.icon-tone.sm { width: 32px; height: 32px; font-size: 1rem; border-radius: 9px; }
.icon-tone.lg { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 14px; }
.tone-primary { background: var(--c-primary-soft); color: var(--c-primary); }
.tone-success { background: var(--c-success-soft); color: var(--c-success); }
.tone-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.tone-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.tone-info { background: var(--c-info-soft); color: var(--c-info); }
.tone-accent { background: var(--c-accent-soft); color: var(--c-accent); }
.tone-water { background: var(--c-water-soft); color: var(--c-water); }
.tone-secondary { background: var(--c-secondary-soft); color: var(--c-muted); }
[data-bs-theme="dark"] .tone-secondary { background: rgba(255,255,255,.06); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; font-size: .6875rem; padding: .32em .65em; border-radius: 6px; letter-spacing: .01em; }
.badge-soft-primary { background: var(--c-primary-soft); color: var(--c-primary); }
.badge-soft-success { background: var(--c-success-soft); color: var(--c-success); }
.badge-soft-warning { background: var(--c-warning-soft); color: #b45309; }
.badge-soft-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge-soft-info { background: var(--c-info-soft); color: var(--c-info); }
.badge-soft-secondary { background: var(--c-secondary-soft); color: var(--c-muted); }
.badge-soft-accent { background: var(--c-accent-soft); color: #b45309; }
[data-bs-theme="dark"] .badge-soft-warning, [data-bs-theme="dark"] .badge-soft-accent { color: var(--c-warning); }
[data-bs-theme="dark"] .badge-soft-secondary { background: rgba(255,255,255,.07); }
.badge-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .4em; vertical-align: .1em; }

/* ---------- Botones ---------- */
.btn { --bs-btn-font-weight: 550; --bs-btn-font-size: .8438rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .95rem; --bs-btn-border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn .ph { font-size: 1.05rem; }
.btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .78rem; --bs-btn-border-radius: 7px; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: .95rem; }
.btn-icon { width: 36px; height: 36px; padding: 0 !important; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-primary {
    --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-color: var(--c-on-primary);
    --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-hover-border-color: var(--c-primary-hover); --bs-btn-hover-color: var(--c-on-primary);
    --bs-btn-active-bg: var(--c-primary-strong); --bs-btn-active-border-color: var(--c-primary-strong); --bs-btn-active-color: var(--c-on-primary);
    --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary); --bs-btn-disabled-color: var(--c-on-primary);
    --bs-btn-focus-shadow-rgb: var(--c-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--c-primary); --bs-btn-border-color: rgba(var(--c-primary-rgb), .45);
    --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-hover-color: var(--c-on-primary);
    --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-border-color: var(--c-primary-hover);
}
.btn-soft-primary { --bs-btn-bg: var(--c-primary-soft); --bs-btn-color: var(--c-primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-color: var(--c-on-primary); --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-color: var(--c-on-primary); }
.btn-soft-danger { --bs-btn-bg: var(--c-danger-soft); --bs-btn-color: var(--c-danger); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--c-danger); --bs-btn-hover-color: #fff; }
.btn-soft-warning { --bs-btn-bg: var(--c-warning-soft); --bs-btn-color: #b45309; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--c-warning); --bs-btn-hover-color: #fff; }
.btn-accent { --bs-btn-bg: var(--c-accent); --bs-btn-border-color: var(--c-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309; --bs-btn-hover-color: #fff; }
.btn-light, .btn-white {
    --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-border); --bs-btn-color: var(--c-text);
    --bs-btn-hover-bg: var(--c-surface-2); --bs-btn-hover-border-color: var(--c-border-strong); --bs-btn-hover-color: var(--c-heading);
    --bs-btn-active-bg: var(--c-surface-2); --bs-btn-active-border-color: var(--c-border-strong); --bs-btn-active-color: var(--c-heading);
}
.btn-ghost { --bs-btn-color: var(--c-muted); --bs-btn-hover-bg: var(--c-surface-2); --bs-btn-hover-color: var(--c-heading); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-check:checked + .btn-light { background: var(--c-primary-soft); color: var(--c-primary); border-color: rgba(var(--c-primary-rgb), .4); }

/* ---------- Formularios ---------- */
.form-label { font-weight: 550; font-size: .8125rem; color: var(--c-heading); margin-bottom: .35rem; }
.form-control, .form-select { border-color: var(--c-border); border-radius: 9px; font-size: .875rem; padding: .55rem .8rem; background-color: var(--c-surface); color: var(--c-text); }
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .8125rem; border-radius: 7px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--c-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .15); }
.form-control::placeholder { color: var(--c-faint); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2821,128,61,.5%29'/%3e%3c/svg%3e"); }
.form-text { color: var(--c-faint); font-size: .75rem; }
.input-group-text { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-muted); font-size: .8125rem; }
.form-section { border-bottom: 1px dashed var(--c-border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.required::after { content: " *"; color: var(--c-danger); }
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0 !important; }
.ts-control { border-radius: 9px !important; border-color: var(--c-border) !important; background: var(--c-surface) !important; color: var(--c-text) !important; min-height: 38px; padding: .45rem .8rem !important; }
.ts-dropdown { border-color: var(--c-border) !important; background: var(--c-surface) !important; color: var(--c-text) !important; border-radius: 9px !important; box-shadow: var(--shadow) !important; }
.ts-dropdown .active { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; }
.ts-control input { color: var(--c-text) !important; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--c-text); --bs-table-border-color: var(--c-border); --bs-table-hover-bg: var(--c-surface-2); --bs-table-striped-bg: var(--c-surface-2); margin-bottom: 0; font-size: .8438rem; }
.table > thead th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 650; background: var(--c-surface-2); border-bottom-width: 1px; padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .45rem .75rem; }
.card > .table-responsive > .table > thead th:first-child, .card > .table-responsive > .table td:first-child { padding-left: 1.25rem; }
.card > .table-responsive > .table > thead th:last-child, .card > .table-responsive > .table td:last-child { padding-right: 1.25rem; }
.card > .table-responsive:last-child .table tr:last-child td { border-bottom: 0; }
.table .cell-title { font-weight: 600; color: var(--c-heading); }
.table .cell-sub { font-size: .75rem; color: var(--c-muted); }
.table-actions { white-space: nowrap; text-align: right; }

/* ---------- Pestañas / navegacion secundaria ---------- */
.nav-tabs-app { border-bottom: 1px solid var(--c-border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs-app .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--c-muted); font-weight: 550; padding: .7rem .9rem; display: flex; align-items: center; gap: .45rem; white-space: nowrap; border-radius: 0; background: transparent; }
.nav-tabs-app .nav-link:hover { color: var(--c-heading); }
.nav-tabs-app .nav-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.nav-pills-app { background: var(--c-surface-2); border: 1px solid var(--c-border); padding: .25rem; border-radius: 10px; display: inline-flex; gap: .2rem; flex-wrap: wrap; }
.nav-pills-app .nav-link, .nav-pills-app a { padding: .38rem .8rem; border-radius: 7px; color: var(--c-muted); font-weight: 550; font-size: .8125rem; display: inline-flex; align-items: center; gap: .35rem; }
.nav-pills-app .nav-link.active, .nav-pills-app a.active { background: var(--c-surface); color: var(--c-heading); box-shadow: var(--shadow-sm); }

/* ---------- Dropdowns, modales, alertas ---------- */
.dropdown-menu { --bs-dropdown-bg: var(--c-surface); --bs-dropdown-border-color: var(--c-border); --bs-dropdown-link-color: var(--c-text); --bs-dropdown-link-hover-bg: var(--c-surface-2); --bs-dropdown-link-active-bg: var(--c-primary-soft); --bs-dropdown-link-active-color: var(--c-primary); --bs-dropdown-font-size: .8438rem; border-radius: 12px; box-shadow: var(--shadow); padding: .4rem; }
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; display: flex; align-items: center; gap: .55rem; }
.dropdown-item .ph { font-size: 1.05rem; color: var(--c-muted); }
.dropdown-header { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--c-faint); }
.modal-content { --bs-modal-bg: var(--c-surface); --bs-modal-border-color: var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.modal-header { border-bottom: 1px solid var(--c-border); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-size: 1rem; font-weight: 650; }
.modal-footer { border-top: 1px solid var(--c-border); padding: .85rem 1.25rem; }
.alert { border-radius: 10px; font-size: .8438rem; border: 1px solid transparent; display: flex; gap: .65rem; align-items: flex-start; }
.alert > .ph { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
.alert-success { background: var(--c-success-soft); color: var(--c-success); border-color: rgba(22,163,74,.2); }
.alert-warning { background: var(--c-warning-soft); color: #92400e; border-color: rgba(217,119,6,.25); }
.alert-danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: rgba(220,38,38,.2); }
.alert-info { background: var(--c-info-soft); color: #075985; border-color: rgba(2,132,199,.2); }
[data-bs-theme="dark"] .alert-warning { color: var(--c-warning); }
[data-bs-theme="dark"] .alert-info { color: var(--c-info); }
.list-group { --bs-list-group-bg: var(--c-surface); --bs-list-group-border-color: var(--c-border); --bs-list-group-color: var(--c-text); --bs-list-group-action-hover-bg: var(--c-surface-2); --bs-list-group-active-bg: var(--c-primary-soft); --bs-list-group-active-color: var(--c-primary); --bs-list-group-active-border-color: var(--c-border); }
.progress { --bs-progress-bg: var(--c-secondary-soft); --bs-progress-bar-bg: var(--c-primary); border-radius: 999px; height: .5rem; }
[data-bs-theme="dark"] .progress { --bs-progress-bg: rgba(255,255,255,.07); }
.pagination { --bs-pagination-color: var(--c-text); --bs-pagination-bg: var(--c-surface); --bs-pagination-border-color: var(--c-border); --bs-pagination-hover-bg: var(--c-surface-2); --bs-pagination-hover-color: var(--c-primary); --bs-pagination-active-bg: var(--c-primary); --bs-pagination-active-border-color: var(--c-primary); --bs-pagination-disabled-bg: var(--c-surface); --bs-pagination-font-size: .8125rem; margin: 0; gap: .25rem; }
.pagination .page-link { border-radius: 8px !important; min-width: 34px; text-align: center; }
.toast-container { z-index: 1090; }
.toast { border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow); }

/* ---------- Avatares ---------- */
.avatar { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; background: var(--c-primary-soft); color: var(--c-primary); overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: .65rem; border-radius: 8px; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; border-radius: 14px; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.6rem; border-radius: 20px; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--c-surface); margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ---------- Estados vacios ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state .icon-tone { margin-bottom: 1rem; }
.empty-state h6 { margin-bottom: .35rem; }
.empty-state p { color: var(--c-muted); max-width: 420px; margin: 0 auto 1rem; }

/* ---------- Anillo de salud (Farm Health Score) ---------- */
.ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-track { stroke: var(--c-secondary-soft); }
[data-bs-theme="dark"] .ring .ring-track { stroke: rgba(255,255,255,.07); }
.ring .ring-value { transition: stroke-dashoffset .8s ease; stroke-linecap: round; }
.ring .ring-label { position: absolute; text-align: center; line-height: 1.1; }
.ring .ring-label strong { display: block; font-size: 1.6rem; font-weight: 750; color: var(--c-heading); letter-spacing: -0.03em; }
.ring .ring-label span { font-size: .7rem; color: var(--c-muted); }
.health-component { display: flex; align-items: center; gap: .75rem; }
.health-component .bar { flex: 1; }

/* ---------- Gemelo digital ---------- */
.twin-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); }
.twin-compare > div { background: var(--c-surface); padding: 1rem; text-align: center; }
.twin-compare .v { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.03em; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.twin-compare .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); font-weight: 650; }
.stage-track { display: flex; gap: 3px; }
.stage-track .stage { flex: 1; height: 8px; border-radius: 4px; background: var(--c-secondary-soft); position: relative; }
[data-bs-theme="dark"] .stage-track .stage { background: rgba(255,255,255,.07); }
.stage-track .stage.done { background: rgba(var(--c-primary-rgb), .45); }
.stage-track .stage.current { background: var(--c-primary); box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .18); }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--c-border); font-size: .8125rem; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--c-muted); }
.kv .v { font-weight: 600; color: var(--c-heading); text-align: right; }

/* ---------- Timeline (auditoria / actividad) ---------- */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .25rem; bottom: .25rem; width: 2px; background: var(--c-border); }
.timeline-item { position: relative; padding-bottom: 1.15rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .tl-dot { position: absolute; left: -1.75rem; top: .1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 3px solid var(--c-surface); background: var(--c-primary); box-shadow: 0 0 0 1px var(--c-border); }
.timeline-item .tl-time { font-size: .7rem; color: var(--c-faint); }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(270px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 420px; }
.kanban-col-head { padding: .8rem 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--c-border); font-weight: 650; color: var(--c-heading); }
.kanban-list { padding: .75rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 80px; }
.kanban-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: .8rem; cursor: grab; box-shadow: var(--shadow-sm); }
.kanban-card:hover { border-color: var(--c-border-strong); }
.kanban-card.sortable-ghost { opacity: .4; }
.prio-bar { width: 4px; border-radius: 4px; align-self: stretch; }

/* ---------- Chat Agronomist AI ---------- */
.chat-shell { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - var(--topbar-h) - 3rem - 70px); min-height: 560px; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.chat-side { border-right: 1px solid var(--c-border); display: flex; flex-direction: column; min-height: 0; background: var(--c-surface-2); }
.chat-side .list { overflow-y: auto; flex: 1; padding: .5rem; }
.chat-conv { display: block; padding: .6rem .75rem; border-radius: 9px; color: var(--c-text); margin-bottom: .15rem; }
.chat-conv:hover { background: var(--c-surface); }
.chat-conv.active { background: var(--c-surface); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: .8rem 1.1rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.chat-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; background: var(--c-bg); }
.chat-input { border-top: 1px solid var(--c-border); padding: .85rem 1rem; background: var(--c-surface); }
.chat-input textarea { resize: none; border-radius: 12px; }
.msg { display: flex; gap: .7rem; max-width: 880px; }
.msg.user { margin-left: auto; flex-direction: row-reverse; }
.msg .bubble { padding: .85rem 1rem; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); min-width: 0; }
.msg.user .bubble { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble table { font-size: .8rem; margin: .5rem 0; width: 100%; }
.msg .bubble table td, .msg .bubble table th { border: 1px solid var(--c-border); padding: .3rem .5rem; }
.msg .bubble blockquote { border-left: 3px solid var(--c-warning); padding: .4rem .75rem; background: var(--c-warning-soft); border-radius: 0 8px 8px 0; margin: .75rem 0 0; font-size: .8rem; }
.msg .meta { font-size: .7rem; color: var(--c-faint); margin-top: .35rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.evidence { margin-top: .75rem; border-top: 1px dashed var(--c-border); padding-top: .65rem; }
.evidence-item { font-size: .75rem; padding: .45rem .6rem; border-radius: 8px; background: var(--c-surface-2); border: 1px solid var(--c-border); margin-bottom: .35rem; }
.mode-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-muted); font-size: .78rem; font-weight: 550; cursor: pointer; }
.btn-check:checked + .mode-chip { background: var(--c-primary-soft); border-color: rgba(var(--c-primary-rgb), .4); color: var(--c-primary); }
.typing span { width: 6px; height: 6px; background: var(--c-faint); border-radius: 50%; display: inline-block; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (max-width: 991.98px) {
    .chat-shell { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h) - 2rem - 60px); }
    .chat-side { display: none; }
    .chat-shell.show-side .chat-side { display: flex; position: absolute; inset: 0; z-index: 5; }
}

/* ---------- Mapas ---------- */
.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-surface-2); }
.map-canvas { width: 100%; height: 100%; min-height: 320px; }
.map-full { height: calc(100vh - var(--topbar-h) - 3rem - 70px); min-height: 520px; }
.map-panel { position: absolute; top: 12px; left: 12px; z-index: 5; width: 280px; max-height: calc(100% - 24px); overflow-y: auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--shadow); }
.map-panel .layer { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; font-size: .8125rem; cursor: pointer; border-radius: 8px; margin: 0 .35rem; }
.map-panel .layer:hover { background: var(--c-surface-2); }
.map-panel .swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.map-legend { position: absolute; bottom: 30px; right: 12px; z-index: 5; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: .6rem .8rem; font-size: .72rem; box-shadow: var(--shadow); }
.ndvi-scale { height: 8px; width: 160px; border-radius: 4px; background: linear-gradient(90deg, #a50026, #f46d43, #fee08b, #a6d96a, #1a9850, #006837); }
.mapboxgl-popup-content { border-radius: 10px !important; padding: .75rem .9rem !important; font-family: var(--bs-body-font-family); background: var(--c-surface) !important; color: var(--c-text); box-shadow: var(--shadow) !important; }
.mapboxgl-popup-tip { border-top-color: var(--c-surface) !important; border-bottom-color: var(--c-surface) !important; }
.map-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; color: var(--c-muted); height: 100%; min-height: 260px; text-align: center; padding: 1.5rem; }
@media (max-width: 767.98px) { .map-panel { width: calc(100% - 24px); max-height: 45%; } }

/* ---------- Clima ---------- */
.forecast-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.forecast-day { text-align: center; padding: .7rem .4rem; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface-2); }
.forecast-day .ph { font-size: 1.6rem; color: var(--c-accent); }
.forecast-day.today { border-color: rgba(var(--c-primary-rgb), .45); background: var(--c-primary-soft); }
.weather-now { background: linear-gradient(135deg, #14532d 0%, #15803d 55%, #65a30d 100%); color: #fff; border: 0; }
.weather-now .text-muted { color: rgba(255,255,255,.75) !important; }
.weather-now h2, .weather-now h3, .weather-now h5 { color: #fff; }

/* ---------- Campo (app trabajador) ---------- */
.field-shell { max-width: 640px; margin: 0 auto; }
.field-task { display: flex; gap: .85rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface); margin-bottom: .75rem; color: var(--c-text); box-shadow: var(--shadow-sm); }
.field-task:hover { border-color: rgba(var(--c-primary-rgb), .4); }
.field-big-btn { min-height: 56px; font-size: 1rem !important; border-radius: 14px !important; }
.signature-pad { border: 2px dashed var(--c-border-strong); border-radius: 12px; width: 100%; height: 180px; background: var(--c-surface-2); touch-action: none; }

/* ---------- Auth ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--c-surface); }
.auth-art { position: relative; overflow: hidden; background: #0f2a1d; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-art .auth-art-content { position: absolute; inset: auto 0 0 0; padding: 3rem; color: #fff; background: linear-gradient(0deg, rgba(5,20,12,.85), transparent); }
.auth-art .auth-art-content h2 { color: #fff; font-size: 2rem; }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(1.5rem, 6vw, 6rem); }
.auth-form .inner { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-feature { display: flex; gap: .6rem; align-items: center; font-size: .875rem; margin-bottom: .6rem; color: rgba(255,255,255,.88); }
.auth-feature .ph { color: #86efac; font-size: 1.15rem; }
@media (max-width: 991.98px) { .auth-shell { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* ---------- Publico (trazabilidad) ---------- */
.public-shell { max-width: 880px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.public-hero { border-radius: var(--radius-lg); background: linear-gradient(135deg, #0f2a1d, #15803d); color: #fff; padding: 2rem; }
.public-hero h1, .public-hero h2 { color: #fff; }

/* ---------- Utilidades ---------- */
.surface-2 { background: var(--c-surface-2) !important; }
.border-dashed { border-style: dashed !important; }
.rounded-app { border-radius: var(--radius) !important; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.hover-bg:hover { background: var(--c-surface-2); }
.divider { height: 1px; background: var(--c-border); margin: 1rem 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.chart-box { min-height: 260px; }
.apexcharts-tooltip { border-radius: 10px !important; border: 1px solid var(--c-border) !important; box-shadow: var(--shadow) !important; background: var(--c-surface) !important; color: var(--c-text) !important; }
.apexcharts-tooltip-title { background: var(--c-surface-2) !important; border-bottom: 1px solid var(--c-border) !important; font-family: var(--bs-body-font-family) !important; }
.apexcharts-menu { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
.apexcharts-text, .apexcharts-legend-text { font-family: var(--bs-body-font-family) !important; }
.scroll-y { overflow-y: auto; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qr-box { background: #fff; padding: 12px; border-radius: 12px; display: inline-block; border: 1px solid var(--c-border); }
.photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--c-border); }
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 150px; }
@media (max-width: 575.98px) {
    .filter-bar .form-control, .filter-bar .form-select { width: 100%; min-width: 0; }
    .page-header h1 { font-size: 1.25rem; }
    .stat .stat-value { font-size: 1.35rem; }
    .table > :not(caption) > * > * { padding: .6rem .7rem; }
}
@media print {
    .app-sidebar, .app-topbar, .page-actions, .app-footer, .no-print { display: none !important; }
    .app-main { margin: 0 !important; }
    .card { box-shadow: none; break-inside: avoid; }
}

/* Markdown en respuestas de la IA */
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-size: .95rem; font-weight: 700; margin: .9rem 0 .4rem; letter-spacing: -0.01em; }
.md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child { margin-top: 0; }
.md-body p { margin-bottom: .55rem; line-height: 1.6; }
.md-body ul, .md-body ol { padding-left: 1.25rem; margin-bottom: .55rem; }
.md-body li { margin-bottom: .2rem; }
.md-body code { background: var(--c-surface-2); padding: .1rem .3rem; border-radius: 4px; font-size: .8em; }
.md-body table { width: 100%; font-size: .8rem; margin: .5rem 0; }
.md-body th, .md-body td { border: 1px solid var(--c-border); padding: .3rem .5rem; }
.md-body > :last-child { margin-bottom: 0; }
.chat-input kbd { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); font-size: .62rem; padding: .05rem .3rem; border-radius: 4px; box-shadow: none; }

/* ---------- Conexión WhatsApp ---------- */
.wa-ok-box { background: var(--c-success-soft); border: 1px solid rgba(22, 163, 74, .25); }
.wa-pills .nav-link { font-size: .8rem; padding: .45rem .5rem; color: var(--c-muted); border: 1px solid var(--c-border); background: var(--c-surface); }
.wa-pills .nav-item + .nav-item .nav-link { margin-left: .35rem; }
.wa-pills .nav-link.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.wa-qr-box { position: relative; aspect-ratio: 1 / 1; max-width: 260px; margin: 0 auto; border: 1px dashed var(--c-border-strong); border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wa-qr-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 6px; }
.wa-qr-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; text-align: center; color: #8a978f; font-size: .8rem; }
.wa-qr-empty i { font-size: 3rem; opacity: .5; }
.wa-qr-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .8); }
.wa-pair { text-align: center; padding: 1rem; border-radius: var(--radius); background: var(--c-primary-soft); border: 1px solid rgba(var(--c-primary-rgb), .2); }
.wa-pair-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.9rem; font-weight: 700; letter-spacing: .18em; color: var(--c-heading); }
.wa-steps { padding-left: 1.1rem; margin: 0; color: var(--c-muted); }
.wa-steps li { margin-bottom: .3rem; }
.wa-steps strong { color: var(--c-heading); }
.min-w-0 { min-width: 0; }