/* 1) Fuente */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* 2) Variables (tuyas) */
:root{
  --tj-base:#024905;
  --tj-accent:#fc7700;
  --tj-secondary:#e1dabc;
  --tj-dark:#003502;

  --tj-bg:#ffffff;
  --tj-text:#111827;       /* texto en fondos claros */
  --tj-muted:#6b7280;      /* texto secundario */
  --tj-border:rgba(0,0,0,.12);
  --tj-soft:rgba(252,119,0,.14);
}

/* 3) Base */
html, body{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  background: var(--tj-bg);
  color: var(--tj-text);
}

h1,h2,h3,h4{
  color: var(--tj-dark);
  letter-spacing: -0.01em;
}

p, li, small{
  color: var(--tj-text);
}

a{
  color: var(--tj-accent);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* 4) Contenedor “card” (por si la página envuelve contenido en un bloque) */
.container, .content, main, section{
  max-width: 720px;
}

/* Si hay cajas/blocks genéricos */
.box, .card, .panel, .wrap, .wrapper{
  background: #fff;
  border: 1px solid var(--tj-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* 5) Inputs */
input, select, textarea{
  font-family: inherit !important;
  border: 1px solid var(--tj-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  color: var(--tj-text) !important;
}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(252,119,0,.55) !important;
  box-shadow: 0 0 0 4px var(--tj-soft) !important;
}

/* 6) Botones */
button,
input[type="submit"],
.button,
.btn{
  font-family: inherit !important;
  background: var(--tj-base) !important;
  color: var(--tj-secondary) !important;
  border: 1px solid var(--tj-dark) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover{
  filter: brightness(1.05);
}

button:active,
input[type="submit"]:active,
.button:active,
.btn:active{
  transform: translateY(1px);
}

/* 7) Avisos / mensajes (success / error) */
.success, .is-success, .alert-success{
  border: 1px solid rgba(2,73,5,.25) !important;
  background: rgba(2,73,5,.06) !important;
  color: var(--tj-dark) !important;
  border-radius: 12px;
  padding: 12px 14px;
}

.error, .is-danger, .alert-danger{
  border: 1px solid rgba(220,38,38,.25) !important;
  background: rgba(220,38,38,.06) !important;
  color: #7f1d1d !important;
  border-radius: 12px;
  padding: 12px 14px;
}

/* 8) Footer / textos pequeños */
footer, .footer, .muted, small{
  color: var(--tj-muted) !important;
}