/* 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;
}

/* ============================================================
   Foco visible — Semana 7
   Antes solo lo tenían los campos de formulario: los enlaces y botones
   quedaban sin indicador al navegar con teclado (WCAG 2.4.7).
   Ahora alcanza a TODO elemento enfocable, con grosor 3px para que se
   distinga también a distancia o con visión reducida.
   ============================================================ */
.campo:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 2px;
  border-radius: 4px;
}
/* main recibe el foco al usar "Saltar al contenido", pero sin dibujar contorno */
main:focus,
main:focus-visible {
  outline: none;
}

/* 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; }
}

/* ============================================================
   SEMANA 7 · Accesibilidad, inclusión y reglas de diseño
   ============================================================ */

/* ---------- Saltar al contenido (WCAG 2.4.1 · Nielsen 9: atajos) ----------
   Invisible hasta recibir el foco. Es el primer elemento tabulable: permite
   a quien navega con teclado saltarse el encabezado, que se repite en las
   16 pantallas. */
.salto-contenido {
  position: absolute;
  left: 50%;
  top: -100px;                /* fuera de la vista, pero enfocable */
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #222222;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  transition: top 140ms ease-out;
}
.salto-contenido:focus {
  top: 0;                     /* aparece al tabular */
}

/* ---------- Preferencias de lectura: botón + desplegable ----------
   Un panel de accesibilidad no debe ocupar espacio permanente: se despliega
   solo cuando el usuario lo pide. En las pantallas con encabezado el botón
   vive dentro de él; en el acceso y en las vistas del cliente, flota discreto. */
.a11y-wrap { position: relative; display: inline-flex; }
.a11y-wrap-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
}

.a11y-disparador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;               /* objetivo táctil WCAG 2.5.8 */
  width: 44px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  background: #ffffff;
  color: #44403c;             /* 9.4:1 sobre blanco */
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms;
}
.a11y-wrap-flotante .a11y-disparador {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.a11y-disparador:hover { background: #f4f2f0; }   /* icono #44403c sobre #f4f2f0 → 8,6:1 */
/* Los estados oscuros DEBEN declarar también su :hover. Sin esto, al pasar el mouse
   la regla :hover (más específica que la clase) devuelve el fondo claro pero conserva
   el color blanco heredado: el icono se vuelve invisible sobre el fondo. */
.a11y-disparador[aria-expanded='true'],
.a11y-disparador[aria-expanded='true']:hover,
.a11y-disparador-activo,
.a11y-disparador-activo:hover {     /* avisa que hay una preferencia activa */
  background: #222222;
  border-color: #222222;
  color: #ffffff;                   /* icono blanco sobre #222 → 15,9:1 */
}
.a11y-icono { height: 20px; width: 20px; }

.a11y-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 16.5rem;
  border: 1px solid #e8e4e0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.875rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
.a11y-wrap-flotante .a11y-panel {   /* flotante: se abre hacia arriba */
  top: auto;
  bottom: calc(100% + 8px);
}
.a11y-panel-titulo {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1917;
}
.a11y-grupo-titulo {
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #57534e;             /* 7.63:1 */
}
.a11y-grupo { display: flex; gap: 0.25rem; }

.btn-a11y {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  color: #44403c;
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms;
}
.btn-a11y:hover { background: #eeece9; }
.btn-a11y-activo,
.btn-a11y-activo:hover {   /* :hover tiene más especificidad que la clase: si no se
                              declara aquí, al pasar el mouse el botón activo vuelve a
                              fondo claro conservando el texto blanco → 1,1:1, ilegible. */
  background: #222222;
  border-color: #222222;
  color: #ffffff;
}

/* Filas del panel: alto contraste (interruptor) y enlace a la ayuda */
.a11y-fila {
  margin-top: 0.5rem;
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.625rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #44403c;
  cursor: pointer;
}
.a11y-fila:hover { background: #f4f2f0; }
.a11y-fila-txt { display: inline-flex; align-items: center; gap: 0.5rem; }
.a11y-fila-enlace { text-decoration: none; }

/* Interruptor del alto contraste: el estado NO depende solo del color,
   también se mueve el mando (WCAG 1.4.1) y se anuncia con aria-pressed. */
.a11y-switch {
  position: relative;
  height: 22px;
  width: 38px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #d6d3d1;
  transition: background-color 160ms;
}
.a11y-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  height: 16px;
  width: 16px;
  border-radius: 9999px;
  background: #ffffff;
  transition: transform 160ms;
}
.a11y-fila-activa { border-color: #222222; }
.a11y-fila-activa .a11y-switch { background: #222222; }
.a11y-fila-activa .a11y-switch::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .a11y-switch, .a11y-switch::after { transition: none; }
}

/* ---------- Modo ALTO CONTRASTE ----------
   Sube todos los textos secundarios a negro puro (21:1) y refuerza bordes.
   Pensado para uso en obra (luz solar directa) y para baja visión. */
.alto-contraste body { background: #ffffff !important; }
.alto-contraste .text-muted-foreground,
.alto-contraste .text-stone-500,
.alto-contraste .text-stone-600,
.alto-contraste .text-stone-700 {
  color: #000000 !important;   /* 21:1 */
}
.alto-contraste .border-border,
.alto-contraste .border-input,
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea {
  border-color: #000000 !important;
  border-width: 2px !important;
}
.alto-contraste .bg-stone-50,
.alto-contraste .bg-muted,
.alto-contraste .plano-grid { background: #ffffff !important; background-image: none !important; }
.alto-contraste a { text-decoration: underline; } /* el color no puede ser el único indicador (WCAG 1.4.1) */
.alto-contraste .shadow-sm, .alto-contraste .shadow-lg { box-shadow: none !important; }
.alto-contraste .a11y-panel,
.alto-contraste .a11y-disparador { border-color: #000000 !important; border-width: 2px !important; box-shadow: none !important; }
.alto-contraste .a11y-grupo-titulo, .alto-contraste .a11y-fila { color: #000000 !important; }
.alto-contraste :focus-visible { outline: 4px solid #000000 !important; outline-offset: 2px; }

/* ---------- Navegación móvil (antes inexistente bajo 768 px) ---------- */
.btn-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
@media (min-width: 768px) { .btn-menu { display: none; } }
.menu-movil {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e8e4e0;
  background: #ffffff;
  padding: 0.5rem;
}
@media (min-width: 768px) { .menu-movil { display: none; } }
.menu-movil-link {
  display: flex;
  align-items: center;
  min-height: 48px;           /* objetivo táctil holgado: se usa con guantes */
  padding: 0 0.75rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #44403c;
}
.menu-movil-link:hover { background: #f4f2f0; }
.menu-movil-link[aria-current='page'] { background: #222222; color: #ffffff; }

/* Página actual en el nav de escritorio: además del color, un subrayado grueso */
.nav-actual { position: relative; }

/* ---------- Menú de usuario y cerrar sesión ---------- */
.menu-usuario-wrap { position: relative; }
.btn-usuario {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #57534e;
}
.avatar-rs {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #1c1917;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
}
.menu-usuario {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 15rem;
  overflow: hidden;
  border: 1px solid #e8e4e0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.menu-usuario-cab {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e8e4e0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.menu-usuario-cab span { font-size: 0.75rem; font-weight: 400; color: #57534e; }
.menu-usuario-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  background: none;
  border: 0;
  text-align: left;
  font-size: 0.875rem;
  color: #292524;
  cursor: pointer;
}
.menu-usuario-item:hover { background: #f4f2f0; }
.menu-usuario-salir { color: #b91c1c; font-weight: 500; border-top: 1px solid #e8e4e0; }

/* ---------- Diálogo de confirmación (reemplaza window.confirm) ---------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(28, 25, 23, 0.55);
  animation: modal-fade 140ms ease-out;
}
.modal-caja {
  width: 100%;
  max-width: 26rem;
  border-radius: 12px;
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  animation: modal-sube 160ms ease-out;
}
.modal-titulo { font-size: 1.0625rem; font-weight: 600; color: #1c1917; }
.modal-mensaje { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.55; color: #44403c; }
.modal-acciones { margin-top: 1.5rem; display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 480px) { .modal-acciones { flex-direction: row; justify-content: flex-end; } }
.modal-btn {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.modal-btn-cancelar { border: 1px solid #d6d3d1; background: #ffffff; color: #292524; }
.modal-btn-cancelar:hover { background: #f4f2f0; }
.modal-btn-peligro { border: 1px solid #b91c1c; background: #b91c1c; color: #ffffff; } /* 5.9:1 */
.modal-btn-peligro:hover { background: #991b1b; }
.modal-btn-primario { border: 1px solid #222222; background: #222222; color: #ffffff; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .modal-fondo, .modal-caja { animation: none; }
  .salto-contenido { transition: none; }
}

/* ---------- Botón de cerrar de los avisos (toast) ---------- */
.toast-cerrar {
  display: flex;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 0;
  background: none;
  color: #78716c;
  cursor: pointer;
}
.toast-cerrar:hover { background: #f4f2f0; color: #1c1917; }

/* ---------- Objetivos táctiles mínimos (WCAG 2.5.8) ----------
   Los botones y campos del sistema alcanzan 44px de alto: se usan en obra,
   con el teléfono en la mano y a veces con guantes. */
input:not([type='checkbox']):not([type='radio']),
select,
button[type='submit'] {
  min-height: 44px;
}