/* =============================================================
   Escombros.cl — identidad de marca (PROMPT 14.2)
   Tokens del logo oficial + acentos de acción/energía.
   Verde bosque estructural permanece en styles.css.
   ============================================================= */

:root{
  /* Medidos desde logo-escombros.png (cluster verde dominante) */
  --brand-logo-green:        #81BC4A;
  --brand-logo-green-dark:   #476B25; /* AA con texto blanco (~6.2:1) */
  --brand-logo-green-soft:   #F0F7E9;
  --brand-logo-green-border: #C6E1AE;
}

/* ---------- Logo oficial ---------- */
.logo{
  display:inline-flex;
  align-items:center;
  gap:0;
  line-height:0;
}
.logo__img{
  display:block;
  height:40px;
  width:auto;
  max-width:170px;
}
@media (max-width:1023px){
  .logo__img{ height:32px; max-width:140px; }
}

/* ---------- CTA primario = verde exacto del logo (14.2B) ---------- */
/* Blanco sobre #81BC4A ≈ 2.28:1 → texto oscuro para AA */
.boton--primario{
  background:var(--brand-logo-green); /* #81BC4A */
  color:#141F12;
  border-color:transparent;
}
.boton--primario:hover{
  background:#6FA83E;
  color:#141F12;
  box-shadow:0 0 0 1px var(--brand-logo-green-dark);
}
.boton--primario:active{
  background:#689E38;
  color:#141F12;
  transform:translateY(1px);
}
.boton--primario:focus-visible{
  outline:2px solid var(--brand-logo-green-dark);
  outline-offset:3px;
}
.boton--primario:disabled,
.boton--primario[aria-disabled="true"]{
  background:var(--brand-logo-green);
  color:#141F12;
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.boton--contorno:hover{
  border-color:var(--brand-logo-green);
  color:var(--brand-logo-green-dark);
}

/* Focus / estados activos de formulario */
:focus-visible{
  outline-color:var(--brand-logo-green);
}
.control:focus{
  border-color:var(--brand-logo-green);
  box-shadow:0 0 0 3px rgba(129,188,74,.18);
}
.pasos__hito--activo{ color:var(--brand-logo-green-dark); }
.pasos__hito--activo::before{ background:var(--brand-logo-green); }
.pasos__hito--activo .pasos__punto{ background:var(--brand-logo-green); }

/* Checkbox marcado (cuando el UA lo permite) */
input[type="checkbox"]{
  accent-color:var(--brand-logo-green-dark);
}

/* ---------- Eyebrows / chips / etiquetas ---------- */
.etiqueta{
  background:var(--brand-logo-green-soft);
  color:var(--brand-logo-green-dark);
}
.paso__numero{
  background:var(--brand-logo-green-dark);
}
.resultado__etiqueta{
  background:var(--brand-logo-green-soft);
  color:var(--brand-logo-green-dark);
}

/* ---------- Cards — 1 acento de marca ---------- */
.resultado,
.home-caso,
.panel--claro,
.situacion,
.factor,
.tarjeta-cotizador{
  border-top:3px solid var(--brand-logo-green);
}
.panel--oscuro{
  /* highlight de identidad sobre bosque estructural */
  box-shadow:inset 3px 0 0 var(--brand-logo-green);
}

/* ---------- Links de acción ---------- */
.enlace-accion{
  color:var(--brand-logo-green-dark);
}
.enlace-accion:hover{
  color:var(--brand-logo-green);
}

/* ---------- Iconografía de marca (no estados error) ---------- */
.respaldo .icon,
.estado--ok .icon,
.identidad__datos .icon,
.zona-carga__icono{
  color:var(--brand-logo-green-dark);
}
.pregunta[open] summary .icon{
  color:var(--brand-logo-green);
}

/* ---------- Secciones oscuras: detalle de marca ---------- */
.banda__hoja,
.panel--oscuro .etiqueta{
  color:var(--brand-logo-green);
}
.panel--oscuro .etiqueta{
  background:rgba(129,188,74,.16);
}

/* ---------- Skip / medallones suaves ---------- */
.respaldo__medallon,
.nota-formulario{
  /* keep soft; nudge border toward brand */
  border-color:var(--brand-logo-green-border);
}