/* PACH Construcciones — grafito y amarillo maquinaria.

   Decisión de diseño: la barra y el pie van oscuros, el área de trabajo va
   clara. La landing de PACH se ve treinta segundos; este formulario se llena
   en veinte minutos, y para lectura sostenida el fondo claro produce menos
   errores y menos fatiga. Lo que hace reconocible a PACH no es la oscuridad
   sino el amarillo, la tipografía angular, la franja de precaución y la
   placa metálica del logo: todo eso se conserva.

   Si prefieres el portal completamente oscuro, usa estilos-oscuro.css. */

@import url("../comun/estilos.81a884afd478.css");
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  --concreto:     #e8eaec;
  --superficie:   #ffffff;
  --tinta:        #191c1f;
  --tinta-suave:  #5c646b;
  --borde:        #ccd1d5;

  --acento:       #e89c09;   /* amarillo maquinaria, del logotipo */
  --acento-hover: #cf8a06;
  --acento-claro: #fdf3df;
  --acento-texto: #8a5c02;   /* el amarillo no contrasta como texto */

  --grafito:      #1d2126;   /* barra y pie */
  --radio: 2px;
}

body { font-family: 'Chakra Petch', system-ui, sans-serif; }
h1, h2 { font-weight: 700; letter-spacing: .01em; }
a { color: var(--acento-texto); }

/* ------------------------------------------------- barra y pie oscuros */

.barra { background: var(--grafito); border-bottom: 3px solid var(--acento); }
.barra__marca { color: #f2f4f5; }
.barra__rotulo { color: #97a0a8; border-left-color: #3a4149; }
.barra__sesion { color: #97a0a8; }
.barra__sesion a { color: var(--acento); }
.barra__quien { color: #c6ccd1; }
.barra .boton--secundario { background: transparent; color: #e6e9eb;
                            border-color: #454d55; }
.barra .boton--secundario:hover { background: #2a3037; }

.pie { background: var(--grafito); border-top: none; }
.pie__interior { color: #8d959c; }
.pie a { color: var(--acento); }

/* --------------------------------------------------------- formulario */

.boton { color: #191c1f; font-weight: 600; }   /* amarillo con texto oscuro */
.boton--secundario { color: var(--tinta); }

.indice__paso--actual .indice__num { color: #191c1f; }

/* La franja de precaución del logotipo, arriba de cada tarjeta.
   Va en un pseudoelemento y no en border-image, porque border-image se
   aplica a los cuatro lados aunque solo declares el borde superior. */
.tarjeta { position: relative; overflow: hidden; padding-top: 2rem; }
.tarjeta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: repeating-linear-gradient(
    -45deg, #e89c09 0 9px, #191c1f 9px 18px);
}