/*
  Sistema de diseño de "Chacra".
  Idea: un cuaderno de agrimensor + libro de cuentas de una chacra sobre una laguna.
  Fondo noche-de-laguna, tinta cálida tipo papel viejo, ámbar de campo al atardecer
  como acento principal, teal de laguna como acento secundario/información,
  ladrillo apagado para riesgo. El motivo de curvas de nivel (plano de mensura)
  es la firma visual: aparece en el login, en el dashboard y en los sellos de hito.
*/

:root {
  /* Paleta (6 tonos con nombre) */
  --bg: #0b1210;
  --tinta: #ede7da;
  --ambar: #c98a3b;
  --laguna: #3fa6a0;
  --riesgo: #c24444;
  --linea: #24332d;

  /* Derivados */
  --bg-elevada: #121b18;
  --bg-elevada-2: #17231f;
  --bg-elevada-3: #1c2a25;
  --linea-fuerte: #33453d;
  --tinta-tenue: #9fafa6;
  --tinta-tenue-2: #6c7d74;
  --ambar-suave: #e4c77a;
  --laguna-suave: #7fd1cb;
  --riesgo-suave: #e58a8a;
  --exito: #5fa872;

  --fuente-display: 'Fraunces', ui-serif, Georgia, serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-datos: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fuente-display); font-weight: 600; margin: 0 0 .4em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; color: var(--tinta-tenue); }
a { color: var(--laguna-suave); }
button, input, select, textarea { font-family: inherit; color: inherit; }

.num, .cifra, table { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

::selection { background: var(--ambar); color: #1a1206; }

:focus-visible {
  outline: 2px solid var(--ambar-suave);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Scrollbars discretas */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 8px; }

/* ---------- Utilidades ---------- */
.tarjeta {
  background: var(--bg-elevada);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px;
}

.eyebrow {
  font-family: var(--fuente-datos);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue-2);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--linea-fuerte);
  background: var(--bg-elevada-2);
  color: var(--tinta);
  padding: 10px 16px;
  border-radius: var(--radio-chico);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.boton:hover { border-color: var(--tinta-tenue-2); background: var(--bg-elevada-3); }
.boton:active { transform: translateY(1px); }
.boton-primario {
  background: linear-gradient(180deg, var(--ambar-suave), var(--ambar));
  border-color: transparent;
  color: #1a1206;
}
.boton-primario:hover { filter: brightness(1.06); }
.boton-fantasma { background: transparent; border-color: transparent; color: var(--tinta-tenue); }
.boton-fantasma:hover { color: var(--tinta); background: var(--bg-elevada-2); }
.boton-peligro { border-color: var(--riesgo); color: var(--riesgo-suave); background: transparent; }
.boton-peligro:hover { background: rgba(194, 68, 68, 0.12); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta-pagada { color: var(--exito); border-color: color-mix(in srgb, var(--exito) 40%, transparent); }
.etiqueta-adelantada { color: var(--laguna-suave); border-color: color-mix(in srgb, var(--laguna) 40%, transparent); }
.etiqueta-pendiente { color: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.etiqueta-vencida { color: var(--riesgo-suave); border-color: color-mix(in srgb, var(--riesgo) 40%, transparent); }
.etiqueta-futura { color: var(--tinta-tenue-2); }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; color: var(--tinta-tenue); }
.campo input, .campo select, .campo textarea {
  background: var(--bg-elevada-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
  font-size: 14px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ambar); }

.barra-progreso { position: relative; height: 10px; border-radius: 999px; background: var(--bg-elevada-2); border: 1px solid var(--linea); overflow: hidden; }
.barra-progreso > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-suave));
  transition: width 900ms cubic-bezier(.16,1,.3,1);
}
.barra-progreso.laguna > i { background: linear-gradient(90deg, var(--laguna), var(--laguna-suave)); }

.curvas-fondo {
  position: absolute; inset: 0;
  background-image: url('../img/curvas.svg');
  background-repeat: no-repeat;
  opacity: 0.25;
  pointer-events: none;
}