/* ============ DESIGN TOKENS ============ */
:root{
  --bg:#F7F1E1;
  --surface:#FDFAF0;
  --surface-2:#F1E9D3;
  --surface-3:#E9DFC2;
  --text:#2B2417;
  --text-muted:#6B6048;
  --border:#E3D9BE;
  --honey:#B9822A;
  --honey-strong:#96661C;
  --honey-soft:#EFD9A8;
  --sage:#5C6B3F;
  --sage-soft:#DCE3C8;
  --alert:#A83A28;
  --alert-soft:#F1D6CD;
  --ok:#4F7A4A;
  --ok-soft:#DCE9D5;
  --shadow: 0 1px 2px rgba(43,36,23,.06), 0 6px 20px -8px rgba(43,36,23,.18);
  --radius: 3px;
  --font-display:'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17140F; --surface:#211C14; --surface-2:#2A2318; --surface-3:#342C1C;
    --text:#F3ECD9; --text-muted:#A69C87; --border:#3A3222;
    --honey:#D9A441; --honey-strong:#E8B85B; --honey-soft:#4A3B1E;
    --sage:#93A46C; --sage-soft:#333B28;
    --alert:#E07856; --alert-soft:#452720;
    --ok:#8FBF7F; --ok-soft:#243422;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#17140F; --surface:#211C14; --surface-2:#2A2318; --surface-3:#342C1C;
  --text:#F3ECD9; --text-muted:#A69C87; --border:#3A3222;
  --honey:#D9A441; --honey-strong:#E8B85B; --honey-soft:#4A3B1E;
  --sage:#93A46C; --sage-soft:#333B28;
  --alert:#E07856; --alert-soft:#452720;
  --ok:#8FBF7F; --ok-soft:#243422;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; color:var(--text);}
a{color:inherit;}
button{font-family:var(--font-body);}
::selection{background:var(--honey-soft);}

.app{display:flex; min-height:100vh;}

/* ============ SIDEBAR ============ */
.sidebar{
  width:230px; flex:0 0 230px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 22px 8px;}
.hex{
  width:30px; height:30px; background:var(--honey);
  clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  flex:0 0 auto;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text b{font-family:var(--font-display); font-size:17px; font-weight:700;}
.brand-text span{font-size:11px; color:var(--text-muted); letter-spacing:.02em;}

nav.navlist{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
.navitem{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius);
  cursor:pointer; color:var(--text-muted); font-size:13.5px; font-weight:500; border:1px solid transparent;
  user-select:none;
}
.navitem:hover{background:var(--surface-2); color:var(--text);}
.navitem.active{background:var(--honey-soft); color:var(--honey-strong); font-weight:600;}
.navitem .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; flex:0 0 auto;}

.sidebar-foot{margin-top:auto; padding:12px 8px 2px; border-top:1px solid var(--border); margin-top:18px;}
.season-chip{font-size:11.5px; color:var(--text-muted);}
.season-chip b{color:var(--sage); font-weight:600;}

/* ============ MAIN ============ */
.main{flex:1; min-width:0; padding:26px 34px 60px;}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.topbar h1{font-size:24px;}
.topbar p.sub{color:var(--text-muted); margin:4px 0 0; font-size:13.5px; max-width:60ch;}
.btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--honey); color:#fff; border:none;
  padding:9px 15px; border-radius:var(--radius); font-size:13.5px; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow);
}
.btn:hover{background:var(--honey-strong);}
.btn.secondary{background:var(--surface-2); color:var(--text); box-shadow:none; border:1px solid var(--border);}
.btn.secondary:hover{background:var(--surface-3);}
.btn.danger{background:var(--alert); color:#fff;}
.btn.ghost{background:transparent; color:var(--text-muted); box-shadow:none; padding:6px 8px;}
.btn.ghost:hover{color:var(--text);}
.btn.small{padding:5px 10px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* KPI hex row */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:26px;}
.kpi{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--honey);
  border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);
}
.kpi.alertcard{border-left-color:var(--alert);}
.kpi.sagecard{border-left-color:var(--sage);}
.kpi .num{font-family:var(--font-display); font-size:28px; font-weight:700; line-height:1;}
.kpi .lbl{color:var(--text-muted); font-size:12px; margin-top:6px;}

.section-title{font-size:15px; margin:26px 0 12px; display:flex; align-items:center; gap:8px;}
.section-title .rule{flex:1; height:1px; background:var(--border);}

/* Panel / card */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.panel-pad{padding:16px 18px;}

/* list rows for dashboard alerts/tasks */
.rowlist{display:flex; flex-direction:column;}
.rowlist .row{
  display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border);
}
.rowlist .row:last-child{border-bottom:none;}
.badge{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; padding:2px 8px;
  border-radius:20px; white-space:nowrap; letter-spacing:.01em;
}
.badge.alert{background:var(--alert-soft); color:var(--alert);}
.badge.ok{background:var(--ok-soft); color:var(--ok);}
.badge.honey{background:var(--honey-soft); color:var(--honey-strong);}
.badge.sage{background:var(--sage-soft); color:var(--sage);}
.badge.muted{background:var(--surface-3); color:var(--text-muted);}

.empty{padding:34px 20px; text-align:center; color:var(--text-muted); font-size:13px;}
.empty b{display:block; color:var(--text); font-family:var(--font-display); font-size:16px; margin-bottom:4px; font-weight:600;}

/* Colmenas grid */
.filterbar{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
select, input[type=text], input[type=number], input[type=date], textarea{
  font-family:var(--font-body); background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius); padding:8px 10px; font-size:13.5px;
}
select:focus, input:focus, textarea:focus{outline:2px solid var(--honey); outline-offset:1px;}

.hive-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.hive-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;
  cursor:pointer; box-shadow:var(--shadow); position:relative; transition:transform .1s ease;
}
.hive-card:hover{border-color:var(--honey);}
.hive-card .hc-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;}
.hive-card .hc-code{font-family:var(--font-display); font-weight:700; font-size:17px;}
.hive-card .hc-apiario{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.strength-bar{display:flex; gap:3px; margin:10px 0 8px;}
.strength-bar i{flex:1; height:6px; border-radius:2px; background:var(--surface-3);}
.strength-bar i.on{background:var(--sage);}
.hc-meta{font-size:11.5px; color:var(--text-muted); display:flex; justify-content:space-between; margin-top:6px;}
.queen-dot{width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.2); margin-right:5px; vertical-align:middle;}

/* Table */
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; font-size:11px; color:var(--text-muted); font-weight:600; padding:10px 14px;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
tbody td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.actions{white-space:nowrap; text-align:right;}

/* Calendar */
.cal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px;}
.cal-month{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.cal-month.current{border-color:var(--honey); box-shadow:0 0 0 1px var(--honey), var(--shadow);}
.cal-month h3{font-size:14px; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); display:flex; justify-content:space-between; align-items:center;}
.cal-month h3 .tag{font-size:10px; font-weight:600; color:var(--honey-strong); background:var(--honey-soft); padding:1px 7px; border-radius:20px; font-family:var(--font-body);}
.cal-tasks{padding:6px 0;}
.cal-task{display:flex; gap:9px; align-items:flex-start; padding:8px 14px; font-size:12.5px;}
.cal-task .cb{margin-top:2px; flex:0 0 auto; width:14px; height:14px; border-radius:3px; border:1.5px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.cal-task.done{opacity:.45;}
.cal-task.done .titulo{text-decoration:line-through;}
.cal-task .titulo{font-weight:600;}
.cal-task .catg{color:var(--text-muted); font-size:11px; display:block; margin-top:1px;}
.cal-task .rm{margin-left:auto; opacity:0; cursor:pointer; color:var(--text-muted); font-size:11px;}
.cal-task:hover .rm{opacity:1;}

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,16,8,.5); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 16px; overflow-y:auto; z-index:100;
}
.modal{
  background:var(--surface); border-radius:6px; width:100%; max-width:560px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  border:1px solid var(--border);
}
.modal.wide{max-width:760px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);}
.modal-head h2{font-size:18px;}
.modal-body{padding:18px 20px; max-height:70vh; overflow-y:auto;}
.modal-foot{padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px;}
.close-x{background:none; border:none; font-size:18px; color:var(--text-muted); cursor:pointer; line-height:1;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px;}
.field input, .field select, .field textarea{width:100%;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
textarea{resize:vertical; min-height:56px; font-family:var(--font-body);}
.swatches{display:flex; gap:8px;}
.swatch{width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent;}
.swatch.sel{border-color:var(--text);}

.tabs-inline{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.tab-inline{padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab-inline.active{color:var(--honey-strong); border-bottom-color:var(--honey);}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-size:13px;}
.detail-grid .k{color:var(--text-muted); font-size:11.5px;}
.detail-grid .v{font-weight:600;}

.mini-hint{font-size:11.5px; color:var(--text-muted); margin-top:-8px; margin-bottom:14px;}
.toast{
  position:fixed; bottom:18px; right:18px; background:var(--alert); color:#fff; padding:10px 16px;
  border-radius:var(--radius); font-size:13px; box-shadow:var(--shadow); z-index:200;
}

@media (max-width:800px){
  .app{flex-direction:column;}
  .sidebar{width:100%; flex:none; height:auto; position:relative; flex-direction:row; overflow-x:auto; padding:12px;}
  .sidebar-foot{display:none;}
  nav.navlist{flex-direction:row;}
  .main{padding:18px;}
  .field-row, .field-row3{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
}

/* ============ MAPA ============ */
.hive-map{height:560px;width:100%;border-radius:3px;overflow:hidden;}
.map-panel{padding:8px;}
.form-map{height:230px;width:100%;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.map-popup-btn{margin-top:6px;border:0;background:var(--honey);color:#fff;padding:5px 9px;border-radius:3px;cursor:pointer;font-size:12px;}
@media (max-width:800px){.hive-map{height:420px}.form-map{height:210px}}

/* Flora melífera */
.flora-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.flora-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px}.flora-head h2{margin:0 0 4px;font-size:20px}.flora-filters{display:flex;gap:8px;flex-wrap:wrap}.flora-filters select,.flora-filters input{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:0 10px;color:var(--text)}
.flora-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--text-muted);font-size:12px;margin-bottom:10px}.flora-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}.flora-dot.pn{background:#d89a24}.flora-dot.p{background:#7188a5}.flora-dot.n{background:#a77b53}
.flora-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.flora-table{border-collapse:collapse;width:100%;min-width:1120px;font-size:12px}.flora-table th,.flora-table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:center;white-space:nowrap}.flora-table th{background:var(--bg);position:sticky;top:0;z-index:1;color:var(--text-muted);font-weight:600}.flora-table th:first-child,.flora-table td:first-child{text-align:left;min-width:190px;position:sticky;left:0;background:var(--card);z-index:2}.flora-table td:last-child{text-align:left;white-space:normal;min-width:210px}.flora-table small,.flora-table em{display:block;color:var(--text-muted);font-size:10px;font-weight:400}.flora-table em{margin-top:3px;font-style:normal;line-height:1.25}.flora-cell{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;border-radius:7px;font-size:9px;font-weight:700}.flora-cell.pn{background:#f4dfb1;color:#80590c}.flora-cell.p{background:#dce4ee;color:#40556d}.flora-cell.n{background:#e7d8ca;color:#674a37}.flora-empty{text-align:center!important;padding:25px!important;color:var(--text-muted)}.flora-note{padding:13px 15px;background:var(--bg);border:1px dashed var(--line);border-radius:12px;color:var(--text-muted);font-size:12px;margin-bottom:18px}
@media(max-width:800px){.flora-head{align-items:stretch;flex-direction:column}.flora-filters{width:100%}.flora-filters input{flex:1;min-width:180px}}

/* Análisis de alimentación en el mapa */
.map-controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:12px 14px;margin-bottom:10px}
.field-inline{display:flex;align-items:center;gap:7px}.field-inline label{font-size:11px;font-weight:600;color:var(--text-muted)}.field-inline select{min-width:130px}
.map-legend{display:flex;gap:14px;margin-left:auto;font-size:11.5px;color:var(--text-muted);align-items:center}.map-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}.map-dot.hive{background:var(--honey)}.map-dot.flora{background:#7188a5}
.flora-analysis{margin-top:18px}.flora-analysis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.analysis-kpi{font-family:var(--font-display);font-size:25px;font-weight:700}.analysis-label{font-size:12px;font-weight:600}.analysis-meta{font-size:11px;color:var(--text-muted);margin-top:3px}.flora-near-list{overflow:hidden}.flora-near-row{display:flex;justify-content:space-between;gap:15px;padding:12px 16px;border-top:1px solid var(--border);font-size:12.5px}.flora-near-row span{display:block;color:var(--text-muted);font-size:11.5px;margin-top:2px}.flora-near-row>div:last-child{text-align:right}.flora-near-row small{display:block;color:var(--text-muted);margin-top:3px;font-size:10.5px}
@media(max-width:800px){.map-controls{align-items:stretch;flex-direction:column}.map-legend{margin-left:0}.flora-analysis-grid{grid-template-columns:1fr}.flora-near-row{flex-direction:column}.flora-near-row>div:last-child{text-align:left}}