/* ============================================================
   PROPH S.A.S — modal-datos.css
   Diálogo "Autorización para el tratamiento de datos personales"
   y casilla de aceptación de los formularios.
   Usa <dialog> nativo (capa superior): queda por encima de los demás modales.
   ============================================================ */

/* ---------- Casilla en formularios oscuros (contacto y propuesta) ---------- */
.contacto__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(245, 246, 242, 0.75);
}
.contacto__consent input {
  width: 16px; height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent-light);
}
.contacto__consent input.is-error { outline: 2px solid #e2857f; outline-offset: 2px; }

/* ---------- Enlace que abre la autorización ---------- */
.datos-link {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.datos-link:hover { color: #fff; }
.datos-link:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 2px; border-radius: 2px; }
/* En el formulario claro de "Trabaja con nosotros" */
.trabaja-form .datos-link { color: var(--color-accent-mid); }
.trabaja-form .datos-link:hover { color: var(--color-text-dark); }
.trabaja-form .datos-link:focus-visible { outline-color: var(--color-accent-mid); }

/* ---------- Diálogo ---------- */
.modal-datos {
  /* El reset global (* { margin: 0 }) anula el centrado nativo del <dialog>:
     se restituye aquí de forma explícita. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, calc(100vw - 2rem));
  height: fit-content;
  max-height: 88vh;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--color-text-dark);
}
.modal-datos::backdrop {
  background: rgba(9, 17, 26, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-datos__panel {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--color-text-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.modal-datos__head {
  position: relative;
  padding: 1.5rem 3.5rem 1rem 1.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.modal-datos__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.2;
}
.modal-datos__version { margin-top: 0.35rem; font-size: 0.75rem; color: var(--color-text-muted); }
.modal-datos__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-text-dark);
  background: rgba(22, 40, 59, 0.08);
  transition: background-color 0.25s var(--ease);
}
.modal-datos__close:hover { background: rgba(22, 40, 59, 0.16); }
.modal-datos__close svg { width: 18px; height: 18px; }

.modal-datos__body {
  padding: 1.25rem 1.75rem;
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.6;
}
.modal-datos__body h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.modal-datos__body h3:first-child { margin-top: 0; }
.modal-datos__body h4 { margin: 0.9rem 0 0.2rem; font-size: 0.86rem; font-weight: 600; color: var(--color-accent-mid); }
.modal-datos__body p { margin-bottom: 0.6rem; }
.modal-datos__body ul { margin: 0 0 0.6rem 1.1rem; list-style: disc; }
.modal-datos__body li { margin-bottom: 0.3rem; }
.modal-datos__body a { color: var(--color-accent-mid); text-decoration: underline; }

.modal-datos__foot {
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .modal-datos__close { transition: none; }
}