/* Bran · ajustes al manual de marca v1 sobre el maquetado.
   Se carga después de app.css. Estas reglas no están en una capa (@layer), así que
   pisan a las utilidades de app.css sin necesidad de !important. */

:root {
  --resuelto: #0C7A4D;
  --resuelto-fondo: #E7F3EC;
  --error: #B42318;
  --error-fondo: #FCEBE9;
  --lima-claro: #F8FDE8;
}

/* Estados: Resuelto y Error del manual (el lima no comunica estados) */
.text-resuelto { color: var(--resuelto); }
.bg-resuelto { background-color: var(--resuelto); }
.bg-resuelto-fondo { background-color: var(--resuelto-fondo); }
.text-error { color: var(--error); }
.bg-error { background-color: var(--error); }
.bg-error-fondo { background-color: var(--error-fondo); }
.fill-error { fill: var(--error); }
.fill-resuelto-fondo { fill: var(--resuelto-fondo); }
.stroke-resuelto { stroke: var(--resuelto); }

/* Tarjetas del «Antes» (reemplaza el ámbar, que no está en la paleta) */
.estado-antes {
  border-style: dashed;
  border-color: #EFB9B2;
  background-color: var(--error-fondo);
  box-shadow: 0 12px 24px -16px rgb(180 35 24 / 0.45);
}

/* Lima claro: el destacado suave que prevé el manual */
.bg-lima-claro { background-color: var(--lima-claro); }
.border-oliva-suave { border-color: rgb(74 107 14 / 0.35); }

/* Subrayado fino en grafito (reemplaza los resaltadores lima) */
.subrayado-fino {
  bottom: -0.04em;
  height: 0.08em;
  border-radius: 1px;
  background-color: var(--night);
}

/* Foco de puntos del hero en gris en vez de oliva */
.hero-spotlight {
  background-image: radial-gradient(circle at center, rgb(22 26 24 / 0.45) 1.3px, transparent 1.9px);
}

/* Paso activo de «Cómo trabajamos»: aro grafito suave */
.aro-paso { box-shadow: 0 0 0 6px rgb(22 26 24 / 0.08); }

/* Barrido al pasar a «Con Bran», en verde Resuelto */
.barrido-resuelto { background-image: linear-gradient(to bottom, transparent, rgb(12 122 77 / 0.14)); }
.linea-resuelto { background-color: rgb(12 122 77 / 0.5); }

/* Centro del diagrama de automatización */
.fill-suave { fill: rgb(22 26 24 / 0.07); }

/* Formulario: borde fijo y neutro, foco grafito */
.borde-form { background-color: rgb(255 255 255 / 0.14); }
.foco-campo:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(22 26 24 / 0.15); }

/* Link del mail sobre grafito */
.link-oscuro:hover { color: rgb(255 255 255 / 0.7); }