/* Ecotecnium — CRM público de prospección. Misma paleta de marca que
   ecotecnium.mx/assets/css/style.css (oliva/crema), tomada del logo y del
   CV corporativo 2026. Hoja aparte porque este portal es una app, no un
   sitio de mercadeo — pero comparte los mismos tokens de color. */

:root{
  --olive:#3F4611;
  --olive-2:#4B531A;
  --olive-3:#5A6321;
  --cream:#F4F1DD;
  --cream-2:#FBFAF1;
  --white:#FFFFFF;
  --ink:#33390F;
  --muted:#6E7256;
  --muted-light:#9A9C82;
  --gold:#F2C40D;
  --moss:#A7AA22;
  --border-cream:#E3DFC4;
  --danger:#B3401E;
  --shadow:0 12px 32px rgba(51,57,15,0.12);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{
  font-family:"Poppins","Inter",Arial,sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}
.oculto{display:none !important;}

/* ── Pantalla de login ─────────────────────────────────────────────── */
#pantalla-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(180deg,var(--olive) 0%,var(--olive-2) 100%);
}
.tarjeta-login{
  background:var(--cream-2);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:36px 32px;
  width:100%;
  max-width:380px;
}
.tarjeta-login h1{
  font-size:1.4rem;
  margin-bottom:4px;
}
.tarjeta-login p.subtitulo{
  color:var(--muted);
  font-size:0.92rem;
  margin-bottom:24px;
}
.campo{margin-bottom:16px;}
.campo label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  color:var(--olive-2);
  margin-bottom:6px;
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border-cream);
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--moss);
  box-shadow:0 0 0 3px rgba(167,170,34,0.18);
}
.campo textarea{resize:vertical;min-height:70px;}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:none;
  border-radius:8px;
  font-weight:700;
  font-size:0.95rem;
  transition:transform .1s ease, box-shadow .15s ease;
}
.boton:active{transform:translateY(1px);}
.boton-primario{background:var(--gold);color:var(--olive);width:100%;}
.boton-primario:hover{box-shadow:0 6px 18px rgba(242,196,13,0.35);}
.boton-secundario{background:transparent;color:var(--olive-2);border:1px solid var(--border-cream);}
.boton-peligro{background:transparent;color:var(--danger);border:1px solid var(--danger);}

.mensaje-error{
  background:#FBEAE3;
  color:var(--danger);
  border:1px solid rgba(179,64,30,0.3);
  border-radius:8px;
  padding:10px 12px;
  font-size:0.88rem;
  margin-bottom:16px;
}
.mensaje-exito{
  background:#EEF3DE;
  color:var(--olive-2);
  border:1px solid var(--border-cream);
  border-radius:8px;
  padding:10px 12px;
  font-size:0.88rem;
  margin-bottom:16px;
}

/* ── App ────────────────────────────────────────────────────────────── */
#pantalla-app{min-height:100vh;}
.barra-superior{
  background:var(--olive);
  color:var(--cream-2);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.barra-superior .marca{font-weight:700;font-size:1.05rem;}
.barra-superior .marca span{color:var(--moss);}
.barra-superior .usuario-actual{font-size:0.85rem;color:var(--cream);opacity:0.85;}
.barra-superior .boton-peligro{color:var(--cream-2);border-color:rgba(244,241,221,0.4);padding:8px 14px;font-size:0.85rem;}

.contenedor{
  max-width:1000px;
  margin:0 auto;
  padding:24px 20px 60px;
}

.pestanas{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  border-bottom:1px solid var(--border-cream);
}
.pestana{
  background:none;
  border:none;
  padding:10px 16px;
  font-weight:600;
  color:var(--muted);
  border-bottom:3px solid transparent;
}
.pestana.activa{color:var(--olive);border-bottom-color:var(--gold);}

.panel{display:none;}
.panel.activo{display:block;}

/* Resumen / KPIs */
.grid-kpi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-bottom:24px;
}
.tarjeta-kpi{
  background:var(--white);
  border:1px solid var(--border-cream);
  border-radius:12px;
  padding:16px;
  text-align:center;
}
.tarjeta-kpi .numero{font-size:1.9rem;font-weight:700;color:var(--olive);}
.tarjeta-kpi .etiqueta{font-size:0.8rem;color:var(--muted);margin-top:2px;}

.grid-graficos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.tarjeta-grafico{
  background:var(--white);
  border:1px solid var(--border-cream);
  border-radius:12px;
  padding:16px;
}
.tarjeta-grafico h3{font-size:0.95rem;margin-bottom:10px;color:var(--olive-2);}
.tarjeta-grafico canvas{max-height:220px;}

/* Tabla de prospectos */
.tabla-prospectos{width:100%;border-collapse:collapse;background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--border-cream);}
.tabla-prospectos th,.tabla-prospectos td{padding:10px 12px;text-align:left;font-size:0.88rem;border-bottom:1px solid var(--border-cream);}
.tabla-prospectos th{background:var(--cream);color:var(--olive-2);font-weight:700;}
.tabla-prospectos tr:last-child td{border-bottom:none;}
.tabla-prospectos tr:hover{background:var(--cream-2);cursor:pointer;}
.etiqueta-etapa{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  background:var(--cream);
  color:var(--olive-2);
  font-size:0.75rem;
  font-weight:600;
}
.sin-datos{color:var(--muted);font-size:0.9rem;padding:20px;text-align:center;}

/* Formulario de captura */
.formulario-prospecto{
  background:var(--white);
  border:1px solid var(--border-cream);
  border-radius:12px;
  padding:20px;
  max-width:560px;
}
.formulario-prospecto .fila{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.formulario-prospecto .fila{grid-template-columns:1fr;}}
.acciones-formulario{display:flex;gap:10px;margin-top:6px;}

.pie-app{text-align:center;color:var(--muted-light);font-size:0.78rem;padding:20px;}