/* ═══════════════════════════════════════════════════════
   COLINAGRO DASHBOARD — diseño basado en Indicadores JD
   Colores: #1a5276 (azul) · #2c7a7b (teal) · #f8fafc (fondo)
   Fuente: DM Sans · igual al dashboard de Junta Directiva
═══════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',-apple-system,sans-serif;background:#f8fafc;color:#1e293b;display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── HEADER (copia exacta del JD) ── */
.hdr{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 24px;box-shadow:0 1px 4px rgba(0,0,0,.03);position:sticky;top:0;z-index:100;flex-shrink:0}
.hdr-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#1a5276,#2c7a7b);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0}
h1{font-size:18px;font-weight:700;letter-spacing:-.02em}
.sub{font-size:13px;color:#94a3b8;margin:2px 0 0 46px}.sub b{color:#1e293b}
.ctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* User pill */
.user-pill{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:6px 14px 6px 8px;font-size:13px;cursor:pointer;position:relative;user-select:none}
.user-pill:hover{background:#f1f5f9}
.user-avatar{width:26px;height:26px;background:linear-gradient(135deg,#1a5276,#2c7a7b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);min-width:210px;z-index:300;border:1px solid #e2e8f0;overflow:hidden}
.user-dropdown.open{display:block}
.user-dropdown-header{padding:12px 16px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
.user-dropdown-header b{display:block;font-size:13px;color:#1e293b}
.user-dropdown-header span{font-size:12px;color:#94a3b8}
.user-dropdown button{width:100%;text-align:left;padding:10px 16px;border:none;background:none;font-size:13px;cursor:pointer;color:#475569;display:flex;align-items:center;gap:8px;font-family:inherit;font-weight:500}
.user-dropdown button:hover{background:#f8fafc}
.user-dropdown button.danger{color:#dc2626}
.user-dropdown button.danger:hover{background:#fef2f2}

/* ── LAYOUT ── */
.layout{display:flex;flex:1;overflow:hidden}

/* ── SIDEBAR (mismo dark del JD) ── */
.sidebar{width:224px;min-width:224px;background:#0f172a;color:#fff;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden}
.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* Dashboard selector */
.dash-selector{padding:14px 10px 8px}
.dash-selector-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#475569;padding:0 8px;margin-bottom:8px}
.dash-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#94a3b8;transition:.15s;margin-bottom:3px;position:relative}
.dash-item:hover{background:rgba(255,255,255,.07);color:#e2e8f0}
.dash-item.active{background:rgba(44,122,123,.2);color:#fff;border:1px solid rgba(44,122,123,.3)}
.dash-icon{font-size:17px;width:26px;text-align:center;flex-shrink:0}
.dash-name{font-size:12px;font-weight:700;line-height:1.2}
.dash-sub{font-size:10px;color:#64748b;margin-top:1px}
.dash-item.active .dash-sub{color:#7dd3c8}
.dash-ext{position:absolute;right:10px;font-size:10px;color:#64748b}
.nav-divider{height:1px;background:rgba(255,255,255,.07);margin:4px 10px}

/* Collapsible groups */
.sidebar-group{margin-bottom:1px}
.sidebar-group-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 7px;cursor:pointer;color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;user-select:none;transition:all .15s;border-left:2px solid transparent}
.sidebar-group-hdr:hover{color:#94a3b8;background:rgba(255,255,255,.04)}
.sidebar-group-hdr.open{color:#94a3b8;border-left-color:rgba(44,122,123,.5)}
.sidebar-group-body{overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1);max-height:0}
.sidebar-group-body.open{max-height:600px}
.chevron{font-size:9px;transition:transform .25s;opacity:.45}
.sidebar-group-hdr.open .chevron{transform:rotate(180deg);opacity:.8}

/* Nav items */
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 20px;cursor:pointer;transition:.12s;color:#64748b;font-size:12px;font-weight:500;border-left:2px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:#cbd5e1}
.nav-item.active{background:rgba(44,122,123,.15);color:#fff;border-left-color:#2c7a7b;font-weight:600}
.nav-item .icon{font-size:13px;width:16px;text-align:center;flex-shrink:0}

.sidebar-bottom{margin-top:auto;padding:12px}
.sidebar-bottom button{width:100%;padding:8px;background:rgba(220,38,38,.1);color:#fca5a5;border:1px solid rgba(220,38,38,.2);border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600}
.sidebar-bottom button:hover{background:rgba(220,38,38,.22)}

/* ── MAIN CONTENT ── */
.main{flex:1;overflow-y:auto;padding:20px 28px;background:#f8fafc}
.main::-webkit-scrollbar{width:6px}.main::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}
.page{display:none}.page.active{display:block}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.page-title{font-size:17px;font-weight:700;letter-spacing:-.02em;color:#1e293b}
.page-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── SELECTS (igual al JD) ── */
.sel,select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid #e2e8f0;border-radius:8px;padding:7px 30px 7px 10px;font-size:12px;font-weight:600;color:#1e293b;font-family:inherit;cursor:pointer;outline:none}
.sel:focus,select:focus{border-color:#2c7a7b}

/* ── BUTTONS ── */
.btn-upload{padding:7px 14px;background:linear-gradient(135deg,#1a5276,#2c7a7b);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-upload:hover{opacity:.9}
.btn-sm{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#475569;font-family:inherit;transition:.15s}
.btn-sm:hover{background:#f1f5f9}
.btn-sm.primary{background:linear-gradient(135deg,#1a5276,#2c7a7b);color:#fff;border:none}
.btn-sm.danger{background:#fde8e8;color:#943737;border-color:#fca5a5}
.btn-sm.blue{background:#dbeafe;color:#1a5276;border-color:#93c5fd}
.upload-status{font-size:11px;color:#94a3b8}
.admin-only{display:none}

/* ── KPI CARDS (copia exacta del JD) ── */
.kg,.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.kpi-bar,.kpi-t::before{position:absolute;top:0;left:0;right:0;height:3px;content:'';display:block}
.kpi-bar{background:#2c7a7b}
.kpi-label,.kpi-t{font-size:11px;color:#94a3b8;text-transform:uppercase;font-weight:700;letter-spacing:.07em;margin-bottom:5px}
.kpi-value,.kpi-v{font-size:24px;font-weight:700;line-height:1.1;margin-bottom:5px;color:#1e293b}
.kpi-sub,.kpi-s{font-size:12px;color:#94a3b8}
.kpi-r{display:flex;align-items:center;gap:6px}
.bg{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.bg-u{color:#276749;background:#e6f4ea}.bg-d{color:#943737;background:#fde8e8}
.kpi.green .kpi-value{color:#2c7a7b}.kpi.blue .kpi-value{color:#1a5276}
.kpi.red   .kpi-value{color:#943737}.kpi.yel  .kpi-value{color:#9c6a18}
.kpi.pur   .kpi-value{color:#5b6abf}

/* ── CHART CARDS (copia exacta del JD .cc) ── */
.cg{display:grid;grid-template-columns:1fr;gap:14px}
.cc,.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 14px 12px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:14px}
.cc h3,.card h3{font-size:13px;font-weight:600;color:#1e293b;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.cc h3 span,.card h3 span{font-size:11px;font-weight:400;color:#94a3b8}
.cw{position:relative;height:370px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}

/* ── TOGGLE BUTTONS (period/vista) — igual al JD .pb ── */
.pb,.btn-period,.btn-vista{padding:6px 12px;border-radius:7px;border:1px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;background:#fff;color:#475569;transition:all .15s}
.pb.on,.btn-period.active,.btn-vista.active{background:#1a5276;color:#fff;border-color:#1a5276}
.pb:hover,.btn-period:hover,.btn-vista:hover{border-color:#94a3b8}
.toggle-group,.eeff-period-btns{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.tgl{padding:6px 12px;border-radius:7px;border:1px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;background:#fff;color:#475569;transition:all .15s}
.tgl.active{background:#1a5276;color:#fff;border-color:#1a5276}
.tgl:hover{border-color:#94a3b8}

/* ── TABLES ── */
.tbl-wrap,.table-scroll{overflow-x:auto;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f8fafc;color:#64748b;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px;text-align:left;border-bottom:2px solid #e2e8f0;white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid #f1f5f9;white-space:nowrap;color:#1e293b}
tr:last-child td{border:none}
tr:hover td{background:#f8fafc}
td.r{text-align:right;font-weight:500}
td.c{text-align:center}

/* Financial tables (P&G / EEFF) — JD style */
.financial-table,.pyg-table{width:100%;border-collapse:collapse;font-size:13px}
.financial-table th,.pyg-table th{background:#f0fdf8;color:#475569;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px;border-bottom:2px solid #d1fae5;text-align:right;white-space:nowrap}
.financial-table th:first-child,.pyg-table th:first-child{text-align:left;min-width:200px}
.financial-table td,.pyg-table td{padding:7px 12px;border-bottom:1px solid #f1f5f9;text-align:right;white-space:nowrap}
.financial-table td:first-child,.pyg-table td:first-child{text-align:left}
.financial-table tr:hover td,.pyg-table tr:hover td{background:#f8fffe}
.financial-table tr.row-subtotal td,.pyg-table tr.subtotal td{background:#e0f2fe;font-weight:700;border-top:1px solid #bae6fd}
.financial-table tr.row-total td,.pyg-table tr.total td{background:#1a5276;color:#fff;font-weight:800;font-size:14px}
.financial-table tr.row-total td.pos,.pyg-table tr.total td.pos{color:#86efac}
.financial-table tr.row-total td.neg,.pyg-table tr.total td.neg{color:#fca5a5}
.financial-table tr.row-pct td{background:#fafafa;color:#94a3b8;font-size:11px;font-style:italic}
.indent1{padding-left:22px!important}.indent2{padding-left:38px!important}

/* Badges & deltas */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge.green{background:#e6f4ea;color:#276749}.badge.blue{background:#dbeafe;color:#1a5276}
.badge.red{background:#fde8e8;color:#943737}.badge.gray{background:#f1f5f9;color:#475569}
.pos{color:#276749;font-weight:600}.neg{color:#943737;font-weight:600}
.delta{font-size:11px;font-weight:700}
.delta-up{color:#276749;font-weight:700}.delta-dn{color:#943737;font-weight:700}
.bar-wrap{display:flex;align-items:center;gap:6px}
.bar{height:6px;border-radius:3px;background:#2c7a7b;min-width:2px}

/* ── EEFF KPIs ── */
.eeff-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.eeff-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:13px;box-shadow:0 1px 3px rgba(0,0,0,.04);position:relative;overflow:hidden}
.eeff-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1a5276,#2c7a7b)}
.eeff-kpi-label{font-size:9px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.eeff-kpi-value{font-size:18px;font-weight:800;color:#1e293b;margin:2px 0 4px}
.eeff-kpi-rows{font-size:11px;line-height:1.7}
.eeff-kpi-row{display:flex;justify-content:space-between;gap:4px}
.eeff-kpi-row .lbl{color:#94a3b8}
.eeff-kpi-row .val.pos{color:#276749;font-weight:700}.eeff-kpi-row .val.neg{color:#943737;font-weight:700}

/* ── CHAT ── */
.chat-wrap{display:grid;grid-template-columns:1fr 290px;gap:16px;height:calc(100vh - 160px)}
@media(max-width:1000px){.chat-wrap{grid-template-columns:1fr}}
.chat-box{background:#fff;border-radius:14px;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.chat-header{padding:12px 16px;border-bottom:1px solid #f1f5f9;background:#f8fafc;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg-bot,.msg-user{display:flex}.msg-user{justify-content:flex-end}
.bubble{max-width:82%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.55;white-space:pre-wrap}
.bubble.bot{background:#f1f5f9;border-bottom-left-radius:3px;color:#1e293b}
.bubble.user{background:linear-gradient(135deg,#1a5276,#2c7a7b);color:#fff;border-bottom-right-radius:3px}
.bubble.err{background:#fde8e8;color:#943737}
.thinking{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:12px}
.dots span{display:inline-block;width:5px;height:5px;background:#94a3b8;border-radius:50%;animation:blink 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.chat-input-row{padding:10px;border-top:1px solid #f1f5f9;display:flex;gap:8px}
.chat-input-row input{flex:1;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;outline:none}
.chat-input-row input:focus{border-color:#2c7a7b;box-shadow:0 0 0 3px rgba(44,122,123,.1)}
.chat-input-row button{padding:9px 16px;background:linear-gradient(135deg,#1a5276,#2c7a7b);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.sug-btn{width:100%;text-align:left;padding:8px 11px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;font-size:12px;cursor:pointer;margin-bottom:5px;color:#475569;font-family:inherit}
.sug-btn:hover{background:#f0fdf8;border-color:#2c7a7b;color:#1a5276}

/* ── ADMIN UPLOAD CARDS ── */
.upload-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.upload-card h3{font-size:13px;font-weight:700;color:#1e293b;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.upload-card p{font-size:11px;color:#94a3b8;margin-bottom:14px;line-height:1.6}
.upload-card p b{color:#475569}
.upload-zone-card{border:2px dashed #e2e8f0;border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:.2s;margin-bottom:10px}
.upload-zone-card:hover{border-color:#2c7a7b;background:#f0fdf8}
.file-item{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:7px 10px;font-size:12px}
.file-item-name{font-weight:600;color:#1e293b}
.file-item-size{font-size:10px;color:#94a3b8}

/* ── DATOS DISPONIBLES (admin summary) ── */
#datos-disponibles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}

/* ── MODALS ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:16px;padding:28px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,.15);max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:700;margin-bottom:18px;color:#1e293b}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px}
.fg input,.fg select{padding:8px 11px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;outline:none;color:#1e293b}
.fg input:focus,.fg select:focus{border-color:#2c7a7b;box-shadow:0 0 0 3px rgba(44,122,123,.1)}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #f1f5f9}
.btn-cancel{padding:8px 16px;background:#f8fafc;color:#64748b;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.btn-cancel:hover{background:#f1f5f9}
.btn-save{padding:8px 18px;background:linear-gradient(135deg,#1a5276,#2c7a7b);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-save:hover{opacity:.9}
.msg-err{color:#943737;font-size:12px;margin-top:6px;display:none}
.msg-ok{color:#276749;font-size:12px;margin-top:6px;display:none}

/* ── OVERLAY (loading) ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.overlay-box{background:#fff;border-radius:16px;padding:32px 44px;text-align:center;min-width:240px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.overlay-box p{font-size:13px;color:#64748b;margin-top:12px}
.spin{width:36px;height:36px;border:4px solid #e2e8f0;border-top-color:#2c7a7b;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FOOTER ── */
.ft{padding:12px 28px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;font-size:12px;color:#94a3b8;flex-shrink:0;background:#fff}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:56px 20px;color:#94a3b8}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty h3{font-size:15px;font-weight:700;color:#475569;margin-bottom:6px}

/* ── MISC ── */
code{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-size:11px;color:#1a5276;font-family:monospace}
.tooltip-custom{position:absolute;pointer-events:none;opacity:0;background:rgba(255,255,255,.92);border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;font-size:13px;color:#1e293b;box-shadow:0 4px 14px rgba(0,0,0,.1);z-index:10;transform:translate(-50%,-110%);transition:opacity .15s;white-space:nowrap;backdrop-filter:blur(4px)}

/* CSS vars compatibility */
:root{--teal:#2c7a7b;--blue:#1a5276;--red:#943737;--green:#276749;--amber:#9c6a18;--gray:#94a3b8;--border:#e2e8f0;--dark:#1e293b}