:root {
  --valgo-verde: #1c5f50;
  --valgo-verde-oscuro: #003f32;
  --valgo-verde-suave: #e8f2ee;
  --valgo-gris: #7f7f7f;
  --valgo-borde: #dce4df;
  --valgo-fondo: #f5f7f6;
  --valgo-naranja: #ff7f2a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background: var(--valgo-fondo); color:#14231f; }
.app { display:flex; min-height:100vh; }
.sidebar { width:118px; background:linear-gradient(180deg,#004436,#002f27); color:white; padding:24px 14px; display:flex; flex-direction:column; align-items:center; gap:26px; box-shadow:4px 0 18px rgba(0,0,0,.12); position:sticky; top:0; height:100vh; }
.sidebar .leaf { width:54px; height:54px; border:2px solid rgba(255,255,255,.75); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.navitem { width:86px; height:68px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; opacity:.94; font-size:12px; }
.navitem.activo { background:rgba(255,255,255,.18); }
.navitem .ico { font-size:24px; line-height:1; }
.sidebar-bottom { margin-top:auto; width:70px; height:70px; border-radius:50%; border:2px solid rgba(180,210,90,.9); display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px; }
.main { flex:1; padding:0 26px 0 26px; }
.header { height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #e6ece9; background:white; margin:0 -26px; padding:0 38px; }
.brand { display:flex; align-items:center; gap:28px; min-width:0; }
.brand img { height:66px; max-width:210px; object-fit:contain; }
.separator { width:1px; height:62px; background:#cad4cf; }
h1 { margin:0; color:var(--valgo-verde); font-size:27px; line-height:1.18; font-weight:800; max-width:860px; }
.date-box { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--valgo-borde); border-radius:16px; background:white; white-space:nowrap; color:#20352f; }
.date-box .ico { font-size:25px; color:var(--valgo-verde); }
.controls { margin:18px 0 18px; display:flex; align-items:center; gap:18px; background:#fff; border:1px solid #e3ebe7; border-radius:16px; padding:14px 18px; box-shadow:0 4px 18px rgba(0,0,0,.045); }
.controls label { font-weight:700; color:var(--valgo-verde); font-size:13px; }
.controls select { border:1px solid #cfdad5; border-radius:10px; padding:9px 12px; min-width:170px; background:#fff; color:#18352d; }
.section-title { display:flex; align-items:center; gap:10px; color:var(--valgo-verde); font-weight:800; font-size:18px; margin:16px 0 14px; }
.summary-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.site-card { background:white; border:1px solid #e0e8e4; border-radius:18px; padding:24px 26px; box-shadow:0 8px 22px rgba(0,0,0,.07); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.10); border-color:#b7cfc5; }
.site-name { text-align:center; color:var(--valgo-verde); font-size:24px; font-weight:800; margin-bottom:12px; }
.progress-wrap { width:178px; height:178px; margin:0 auto 18px; position:relative; }
.progress-wrap svg { width:178px; height:178px; transform:rotate(-90deg); }
.progress-bg { fill:none; stroke:#dfe9e3; stroke-width:16; }
.progress-bar { fill:none; stroke:var(--valgo-verde); stroke-width:16; stroke-linecap:round; }
.progress-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.progress-text .pct { font-size:46px; color:var(--valgo-verde); font-weight:900; line-height:.95; }
.progress-text .lbl { font-size:14px; color:#3a4d47; margin-top:8px; }
.metric-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e6ece9; padding:12px 0; gap:14px; }
.metric-left { display:flex; align-items:center; gap:10px; color:#3a4d47; font-size:13px; }
.metric-ico { width:33px; height:33px; border-radius:50%; background:var(--valgo-verde-suave); display:flex; align-items:center; justify-content:center; color:var(--valgo-verde); font-size:18px; }
.metric-value { font-weight:800; font-size:16px; white-space:nowrap; }
.btn-analysis { width:100%; margin-top:10px; height:46px; border:0; border-radius:10px; background:linear-gradient(180deg,#1f735f,#005541); color:white; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(0,85,65,.18); display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-analysis:hover { filter:brightness(1.05); }
.detail-head { margin:26px 0 12px; border-radius:16px; background:#eef5f2; border:1px solid #d7e3dd; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; color:var(--valgo-verde); font-weight:800; }
.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px; }
.analysis-card { background:#fff; border:1px solid #e0e8e4; border-radius:18px; padding:18px 18px 14px; box-shadow:0 8px 22px rgba(0,0,0,.065); }
.analysis-card h2 { margin:0 0 12px; color:var(--valgo-verde); font-size:18px; }
.graph-table { display:grid; grid-template-columns:1.25fr .85fr; gap:12px; align-items:start; }
.graph-table.single { grid-template-columns:1fr; }
.analysis-card img { width:100%; height:auto; border-radius:10px; }
.table-note { font-size:12px; color:#4f635c; margin-top:8px; }
.tabla-scroll { overflow-x:auto; }
.tabla-resumen { width:100%; border-collapse:collapse; font-size:12px; background:#fff; }
.tabla-resumen th { background:linear-gradient(180deg,#006149,#004838); color:white; padding:8px 6px; text-align:center; font-weight:800; }
.tabla-resumen td { border:1px solid #dfe7e3; padding:7px 6px; text-align:center; }
.tabla-resumen tr:nth-child(even) { background:#f5f8f6; }
.sin-datos { color:#73817d; font-style:italic; padding:12px; border:1px dashed #cfd8d3; border-radius:10px; }
.footer { margin:22px -26px 0; background:linear-gradient(90deg,#004838,#006149,#004838); color:#fff; height:74px; display:flex; align-items:center; justify-content:space-around; font-size:14px; }
.footer strong { font-size:18px; }
.hidden { display:none !important; }
@media(max-width:1300px) { .summary-grid { grid-template-columns:repeat(2,1fr); } .analysis-grid { grid-template-columns:1fr; } }
@media(max-width:850px) { .app { display:block; } .sidebar { display:none; } .main { padding:0 14px; } .header { height:auto; padding:20px; flex-direction:column; align-items:flex-start; margin:0 -14px; } .summary-grid { grid-template-columns:1fr; } .graph-table { grid-template-columns:1fr; } }