/* ============================================================
   ZAFRA NICA - Identidad visual "Campo y Tierra"
   Paleta: verde primario, acento oliva, textos oscuro-bosque,
   alertas tierra, fondo lienzo claro. Consistente con AserMan/EVAUCEM.
   ============================================================ */

:root{
  --primario:      #3A6B28;   /* Verde primario */
  --primario-hover:#2E551F;
  --acento:        #7A9A35;   /* Secundario / acento */
  --oscuro:        #1B331A;   /* Textos / oscuro */
  --tierra:        #7D5233;   /* Alerta suave / tierra */
  --lienzo:        #F2F5F1;   /* Fondo */
  --blanco:        #FFFFFF;
  --borde:         #DDE3D9;
  --sombra:        0 2px 6px rgba(27,51,26,.08), 0 8px 24px rgba(27,51,26,.06);
  --sombra-hover:  0 4px 10px rgba(27,51,26,.12), 0 14px 32px rgba(27,51,26,.10);
  --radio:         12px;
}

*{box-sizing:border-box;}

body{
  font-family:'Segoe UI', Arial, sans-serif;
  margin:0;
  background:var(--lienzo);
  color:var(--oscuro);
  line-height:1.5;
}

/* ---------- Barra superior ---------- */
.topbar{
  background:linear-gradient(135deg, var(--primario) 0%, var(--primario-hover) 100%);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 1.75rem;
  flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(27,51,26,.18);
}
.topbar .marca{
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.02em;
}
.topbar .marca::before{
  content:"🌱";
  margin-right:.4rem;
}
.topbar nav{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;}
.topbar nav a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  margin-left:.25rem;
  padding:.45rem .8rem;
  border-radius:8px;
  font-size:.92rem;
  transition:background .15s ease;
}
.topbar nav a:hover{background:rgba(255,255,255,.15);color:#fff;}
.usuario-actual{
  margin-left:.75rem;
  padding:.35rem .7rem;
  background:rgba(255,255,255,.12);
  border-radius:20px;
  font-size:.8rem;
  opacity:.95;
}

/* ---------- Contenedor principal ---------- */
.contenedor{max-width:1100px;margin:2rem auto;padding:0 1.25rem;}
h1{color:var(--primario);font-size:1.7rem;margin-bottom:.3rem;}
h2{color:var(--oscuro);font-size:1.2rem;margin-top:2rem;border-left:4px solid var(--acento);padding-left:.6rem;}
p{color:#3d4a3a;}
a{color:var(--primario);}

/* ---------- Login / Setup ---------- */
.pantalla-login{
  display:flex;align-items:center;justify-content:center;height:100vh;
  background:radial-gradient(circle at 20% 20%, #dfe9d8 0%, var(--lienzo) 55%);
}
.caja-login{
  background:var(--blanco);
  padding:2.75rem;
  border-radius:var(--radio);
  box-shadow:var(--sombra-hover);
  width:100%;max-width:400px;
  border-top:5px solid var(--primario);
}
.caja-login h1{color:var(--primario);margin-top:0;font-size:1.9rem;}
.caja-login p{color:#5c6b58;margin-bottom:1.5rem;}

/* ---------- Formularios ---------- */
form label{display:block;margin-bottom:1.1rem;font-size:.9rem;font-weight:600;color:var(--oscuro);}
form input,form select,form textarea{
  width:100%;padding:.65rem .8rem;margin-top:.35rem;
  border:1px solid var(--borde);border-radius:8px;
  font-size:1rem;background:var(--blanco);color:var(--oscuro);
  transition:border-color .15s ease, box-shadow .15s ease;
}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(122,154,53,.18);
}
button, input[type=submit]{
  background:var(--primario);color:#fff;border:none;
  padding:.7rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:600;
  cursor:pointer;box-shadow:var(--sombra);transition:background .15s ease, transform .1s ease;
}
button:hover{background:var(--primario-hover);transform:translateY(-1px);}
button:active{transform:translateY(0);}

/* ---------- Zona de carga (drag & drop) ---------- */
.zona-carga{
  border:2px dashed var(--acento);
  border-radius:var(--radio);
  padding:2.75rem;text-align:center;
  background:var(--blanco);
  box-shadow:var(--sombra);
  cursor:pointer;margin-bottom:1.75rem;
  transition:background .15s ease, box-shadow .15s ease;
}
.zona-carga:hover{box-shadow:var(--sombra-hover);}
.zona-carga.arrastrando{background:#eef4e7;border-color:var(--primario);}
.zona-carga p{margin:.3rem 0;color:#5c6b58;}

.campo-incierto{
  background:#faf1e8 !important;
  border-color:var(--tierra) !important;
  box-shadow:0 0 0 3px rgba(125,82,51,.12) !important;
}

.error{
  color:#7d2a2a;background:#fbe9e9;border-left:4px solid #b02a37;
  padding:.7rem 1rem;border-radius:8px;font-weight:600;
}
.ok{
  color:var(--primario-hover);background:#eaf2e4;border-left:4px solid var(--primario);
  padding:.7rem 1rem;border-radius:8px;font-weight:600;
}

/* ---------- Tablas ---------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--blanco);margin-top:1rem;
  border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);
}
th,td{padding:.75rem .9rem;border-bottom:1px solid var(--borde);text-align:left;font-size:.9rem;}
th{background:var(--primario);color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:.75rem;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f7faf5;}
tr.campo-incierto td{background:#faf1e8;}
tr.campo-incierto:hover td{background:#f5e8db;}

/* ---------- Pie de pagina ---------- */
.piefoot{text-align:center;padding:2rem;color:#7a8a76;font-size:.85rem;}

/* ---------- Dashboard: tarjetas KPI ---------- */
.tarjetas-kpi{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.75rem;}
.tarjeta-kpi{
  background:var(--blanco);border-radius:var(--radio);
  padding:1.25rem 1.6rem;box-shadow:var(--sombra);
  flex:1;min-width:170px;border-bottom:3px solid var(--acento);
  transition:box-shadow .15s ease, transform .1s ease;
}
.tarjeta-kpi:hover{box-shadow:var(--sombra-hover);transform:translateY(-2px);}
.tarjeta-kpi .valor{font-size:1.8rem;font-weight:700;color:var(--primario);margin-top:.25rem;}

.grafico-caja{
  background:var(--blanco);border-radius:var(--radio);
  padding:1.25rem;box-shadow:var(--sombra);margin-bottom:1.75rem;
}