/* AS-Cotiza · forms.css — firma visual de las pantallas de entrada
   Huincha de medir (borde superior de fichas) + plano milimetrado (login) */

/* Franja "huincha de medir": base arena con graduación en tinta */
.regla {
  position: relative;
  border-top: 6px solid #d8cfc4;
}
.regla::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 9px,
      rgba(34, 34, 34, 0.35) 9px 10px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0 49px,
      rgba(34, 34, 34, 0.55) 49px 50px
    );
  pointer-events: none;
}

/* Fondo "plano milimetrado" para el login (opacidad mínima) */
.plano-grid {
  background-color: #fafaf9;
  background-image:
    linear-gradient(rgba(34, 34, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 34, 34, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(34, 34, 34, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 34, 34, 0.06) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

/* Focus visible consistente en controles de formulario */
.campo:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 1px;
}

/* Transición suave de borde/sombra en campos (micro-interacción sobria) */
input, select, textarea {
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}

/* Fila de ítem recién agregada: entrada con fade+slide (respeta reduced motion) */
@keyframes fila-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fila-nueva { animation: fila-entra 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .fila-nueva { animation: none; }
  input, select, textarea { transition: none; }
}