@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg:#eef5ee; --surface:#ffffff; --ink:#22281f; --ink-soft:#5b6355;
  --green-900:#1f3a24; --green-700:#2f5233; --green-500:#4c7a4f;
  --gold:#c98a2c; --clay:#a2513b; --line:#dde2d6; --danger:#b34036; --radius:12px;
  --card-green:#e0f5e6; --card-green-ink:#1f7a3d;
  --card-blue:#dbeeff; --card-blue-ink:#1d5fb0;
  --card-orange:#ffedd8; --card-orange-ink:#b5590f;
  --card-purple:#ece3fb; --card-purple-ink:#6a3fc7;
  --card-cyan:#d9f6f5; --card-cyan-ink:#0f8a86;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:-0.01em;color:var(--green-900)}

/* ===== BARRA SUPERIOR ===== */
.topbar{
  background:linear-gradient(90deg,var(--green-900),var(--green-700));
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px; position:sticky; top:0; z-index:50; flex-wrap:wrap; gap:10px;
}
.topbar .brand{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.15rem}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap}
.topbar .navlink{
  color:#d9e6d6;background:none;border:none;padding:9px 15px;border-radius:8px;
  font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
}
.topbar .navlink.active,.topbar .navlink:hover{background:rgba(255,255,255,.16);color:#fff}
.topbar .user-menu{display:flex;align-items:center;gap:10px}
.topbar .user-menu .who{font-size:.82rem;color:#d9e6d6;text-align:right;line-height:1.25}
.topbar .user-menu .who strong{color:#fff;display:block}
.topbar .navlink.admin-link{background:rgba(201,138,44,.25)}
.topbar .navlink.admin-link:hover{background:rgba(201,138,44,.4)}
.topbar button.logout{background:rgba(179,64,54,.35);color:#fff;border:none;padding:9px 14px;border-radius:8px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.topbar button.logout:hover{background:rgba(179,64,54,.55)}

.main{padding:28px 34px;max-width:1280px;margin:0 auto}
.page{display:none}
.page.active{display:block}
.page-header{margin-bottom:22px}
.page-header p{color:var(--ink-soft);margin-top:4px}

.grid{display:grid;gap:16px}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.grid-5{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.two-col{grid-template-columns:1fr!important}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}

/* tarjetas de estadística estilo imagen de referencia */
.stat-card{border-radius:var(--radius);padding:18px;border:1px solid transparent}
.stat-card .stat-top{display:flex;align-items:flex-start;justify-content:space-between}
.stat-card .stat-icon{font-size:1.2rem;opacity:.85}
.stat-card .stat-label{font-size:.85rem;font-weight:600}
.stat-card .stat-value{font-family:"Space Grotesk",sans-serif;font-size:2rem;font-weight:700;margin-top:6px}
.stat-card.green{background:var(--card-green);color:var(--card-green-ink)}
.stat-card.blue{background:var(--card-blue);color:var(--card-blue-ink)}
.stat-card.orange{background:var(--card-orange);color:var(--card-orange-ink)}
.stat-card.purple{background:var(--card-purple);color:var(--card-purple-ink)}
.stat-card.cyan{background:var(--card-cyan);color:var(--card-cyan-ink)}
.stat-card .stat-value{color:var(--ink)}

.stat-label-plain{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.stat-value-plain{font-family:"Space Grotesk",sans-serif;font-size:1.9rem;font-weight:700;color:var(--green-900);margin-top:4px}
.stat-value-plain.positive{color:var(--green-700)} .stat-value-plain.negative{color:var(--danger)}

table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding:8px 10px}
td{padding:9px 10px;border-bottom:1px solid var(--line)}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
.badge.activo{background:#e4efe1;color:var(--green-700)}
.badge.cosechado{background:#efe6d8;color:var(--gold)}
.badge.alerta{background:#f4e0dc;color:var(--danger)}
.badge.bajo{background:#e4efe1;color:var(--green-700)}
.badge.medio{background:#fdefd8;color:#b5590f}
.badge.alto{background:#f4e0dc;color:var(--danger)}
.badge.controlada{background:#e4efe1;color:var(--green-700)}
.badge.optimo{background:#e4efe1;color:var(--green-700)}
.badge.atencion{background:#fdefd8;color:#b5590f}
.badge.critico{background:#f4e0dc;color:var(--danger)}
.badge.superadmin{background:#ece3fb;color:var(--card-purple-ink)}
.badge.usuario{background:#dbeeff;color:var(--card-blue-ink)}
.badge.inactivo{background:#f4e0dc;color:var(--danger)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
label{font-size:.8rem;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.9rem;background:#fbfbf9}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-500);outline-offset:1px}

button.primary{background:var(--green-700);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit}
button.primary:hover{background:var(--green-900)}
button.primary:disabled{opacity:.6;cursor:not-allowed}
button.small{padding:5px 10px;font-size:.78rem}
button.ghost{background:none;border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--ink)}
button.danger{background:none;border:1px solid var(--danger);color:var(--danger);padding:5px 10px;border-radius:8px;font-weight:600;font-size:.78rem;cursor:pointer;font-family:inherit}
button.danger:hover{background:var(--danger);color:#fff}

#map{height:340px;border-radius:var(--radius);border:1px solid var(--line)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.section-title{font-size:.95rem;font-weight:700;margin-bottom:10px;color:var(--green-900);display:flex;align-items:center;gap:8px}
.empty{color:var(--ink-soft);font-size:.88rem;padding:14px;text-align:center}
.hint{font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.list-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:9px;background:#fafaf8;margin-bottom:8px}
.list-row .title{font-weight:700;font-size:.92rem}
.list-row .sub{font-size:.8rem;color:var(--ink-soft)}

.reco-box{background:#f2f7f0;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:.86rem;line-height:1.55;color:var(--ink)}
.reco-box strong{color:var(--green-900)}

.form-error{background:#f4e0dc;color:var(--danger);border-radius:8px;padding:9px 12px;font-size:.85rem;margin-bottom:12px;display:none}
.form-error.show{display:block}

/* ===== BÚSQUEDA / FILTRO DE TABLAS ===== */
.table-toolbar{margin-bottom:12px}
.table-toolbar input[type="search"]{max-width:340px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6355' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;background-size:15px;padding-left:32px}

/* ===== AUTENTICACIÓN (login / registro) ===== */
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px;max-width:420px;width:100%;box-shadow:0 10px 30px rgba(31,58,36,.08)}
.auth-card .brand{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.2rem;color:var(--green-900);margin-bottom:6px}
.auth-card p.sub{color:var(--ink-soft);margin:0 0 22px;font-size:.9rem}
.auth-card button.primary{width:100%;padding:11px;font-size:.95rem;margin-top:6px}
.auth-card .switch{text-align:center;margin-top:16px;font-size:.87rem;color:var(--ink-soft)}
.auth-card .switch a{color:var(--green-700);font-weight:600;text-decoration:none}
.auth-card .switch a:hover{text-decoration:underline}
.auth-demo-hint{background:#f2f7f0;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:.78rem;color:var(--ink-soft);margin-top:18px;line-height:1.5}

/* ===== PANEL SUPERADMIN ===== */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{background:none;border:1px solid var(--line);padding:9px 16px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--ink);font-family:inherit}
.tabs button.active{background:var(--green-700);border-color:var(--green-700);color:#fff}