/* RUF id — formulario de activación y ficha pública.
   Usa la paleta del sitio con variables propias, para que el plugin no dependa de
   los presets del tema pero se vea igual. Contrastes verificados contra AA:
   chocolate sobre crudo 11,9:1 · beige sobre chocolate 7,6:1 · blanco sobre
   caramelo oscurecido 5,0:1 · blanco sobre verde WhatsApp 4,6:1 */

/* ---------------------------------------------------------------------------
   La barra flotante de la marca (ESCRIBINOS / INSTAGRAM) NO va en estas pantallas.
   Esta hoja se carga solo en /activar/ y /id/, asi que la regla no afecta al resto.

   En /id/ la razon es de prioridad, no de espacio: quien encuentra un perro perdido
   tiene que ver LLAMAR y WHATSAPP del dueño, no los botones de contacto de la marca.
   Dos pares de botones compitiendo en el momento en que alguien esta apurado es un
   error de diseño, no una molestia estetica.
   En /activar/ la accion es el formulario, y la barra le tapaba el boton de enviar.
   --------------------------------------------------------------------------- */
.ruf-float { display: none !important; }

.ruf-form, .ruf-perfil {
  --ruf-crudo:#FBF7F0; --ruf-arena:#EFE6D6; --ruf-beige:#D8C7A7;
  --ruf-caramelo:#B66F38; --ruf-caramelo-txt:#A05F2C;
  --ruf-choco:#4A2B20; --ruf-marino:#1E2B3A; --ruf-wa:#1F7A4D;
  max-width: 640px;
  margin: 0 auto;
  color: var(--ruf-choco);
}
/* width:100% + padding sin border-box daba 7px de scroll horizontal en 375px */
.ruf-form *, .ruf-form *::before, .ruf-form *::after,
.ruf-perfil *, .ruf-perfil *::before, .ruf-perfil *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ botones */
.ruf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .9em 1.9em; border: 2px solid transparent;
  border-radius: 4px; cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif; font-weight: 700;
  font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important; text-align: center;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ruf-btn--primario,
.ruf-btn--primario:link,
.ruf-btn--primario:visited { background: var(--ruf-choco); color: var(--ruf-crudo); }
.ruf-btn--primario:hover,
.ruf-btn--primario:focus,
.ruf-btn--primario:active { background: var(--ruf-caramelo-txt); color: #fff; transform: translateY(-2px); }

.ruf-btn--linea,
.ruf-btn--linea:link,
.ruf-btn--linea:visited { background: transparent; color: var(--ruf-choco); border-color: var(--ruf-choco); }
.ruf-btn--linea:hover,
.ruf-btn--linea:focus,
.ruf-btn--linea:active { background: var(--ruf-choco); color: var(--ruf-crudo); }

.ruf-btn--wa,
.ruf-btn--wa:link,
.ruf-btn--wa:visited { background: var(--ruf-wa); color: #fff; }
.ruf-btn--wa:hover,
.ruf-btn--wa:focus,
.ruf-btn--wa:active { background: #17603b; color: #fff; transform: translateY(-2px); }

.ruf-btn--copiar,
.ruf-btn--copiar:link,
.ruf-btn--copiar:visited {
  background: var(--ruf-beige); color: var(--ruf-choco);
  min-height: 44px; padding: .6em 1.2em; font-size: .78rem;
}
.ruf-btn--copiar:hover, .ruf-btn--copiar:focus { background: var(--ruf-caramelo-txt); color: #fff; }

.ruf-btn:focus-visible { outline: 3px solid var(--ruf-caramelo); outline-offset: 3px; }

/* ---------------------------------------------------------------- formulario */
.ruf-form__volanta { margin-bottom: .5rem; }
.ruf-form__titulo { margin: 0 0 .6rem; }
.ruf-form__intro { margin: 0 0 1.8rem; }
.ruf-form__estado {
  background: var(--ruf-arena); border-left: 3px solid var(--ruf-caramelo);
  padding: .7rem 1rem; font-size: .92rem; margin: 0 0 1.6rem; border-radius: 0 4px 4px 0;
}
.ruf-form__grupo { border: 0; padding: 0; margin: 0 0 2rem; }
.ruf-form__legend {
  font-family: "DM Sans", system-ui, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; font-size: .76rem;
  color: var(--ruf-caramelo-txt); padding: 0; margin-bottom: 1rem;
}
.ruf-form__campo { margin-bottom: 1.15rem; }
.ruf-form__label {
  display: block; font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600; font-size: .92rem; margin-bottom: .35rem;
}
.ruf-form__req { color: var(--ruf-caramelo-txt); }

.ruf-form input[type=text], .ruf-form input[type=tel], .ruf-form input[type=email],
.ruf-form input[type=date], .ruf-form input[type=number], .ruf-form textarea, .ruf-form select {
  width: 100%; padding: .8rem .9rem; border: 1px solid rgba(74,43,32,.28);
  border-radius: 4px; background: #fff; color: var(--ruf-choco);
  font-family: inherit; font-size: 1rem; line-height: 1.4;
}
.ruf-form input:focus, .ruf-form textarea:focus, .ruf-form select:focus {
  outline: 2px solid var(--ruf-caramelo); outline-offset: 1px; border-color: var(--ruf-caramelo);
}
.ruf-form input[type=file] { width: 100%; font-size: .92rem; }

.ruf-form__codigo {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 1.5rem !important; letter-spacing: .12em; text-align: center;
  text-transform: uppercase; padding: .9rem !important;
}
.ruf-form__ayuda { font-size: .85rem; color: rgba(74,43,32,.75); margin: .35rem 0 0; }
.ruf-form__pie { margin-top: 1.8rem; font-size: .9rem; }

.ruf-form__campo--check label { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.ruf-form__campo--check input { margin-top: .25rem; flex: 0 0 auto; }

.ruf-form__foto-actual { display: flex; gap: 1rem; align-items: center; margin-bottom: .7rem; }
.ruf-form__foto-actual img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; }
.ruf-form__foto-actual span { font-size: .85rem; color: rgba(74,43,32,.75); }

.ruf-form__privacidad {
  background: var(--ruf-arena); border-radius: 6px; padding: 1.1rem 1.2rem;
  margin: 0 0 1.6rem; font-size: .9rem;
}
.ruf-form__privacidad strong {
  display: block; font-family: "DM Sans", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
  color: var(--ruf-caramelo-txt); margin-bottom: .4rem;
}
.ruf-form__privacidad p { margin: 0; }

/* Trampa para bots. No usa display:none (algunos bots lo detectan) ni left:-9999px
   (el desplazamiento negativo ensancha el documento y genera scroll horizontal):
   es el patron "visually hidden" de toda la vida. */
.ruf-hp {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------- cajas */
.ruf-caja { border-radius: 6px; padding: .95rem 1.1rem; margin: 0 0 1.4rem; font-size: .94rem; }
.ruf-caja ul { margin: 0; padding-left: 1.1rem; }
.ruf-caja--error { background: #fbeae6; border-left: 3px solid #a8321a; color: #7a2413; }
.ruf-caja--aviso { background: var(--ruf-arena); border-left: 3px solid var(--ruf-caramelo); }

/* ---------------------------------------------------------------- pantalla ok */
.ruf-listo { text-align: center; }
.ruf-listo__tilde {
  width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: var(--ruf-choco); color: var(--ruf-crudo);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.ruf-listo__titulo { margin: 0 0 .5rem; }
.ruf-listo__sub { margin: 0 0 1.8rem; }
.ruf-listo__codigo { background: var(--ruf-arena); border-radius: 8px; padding: 1.3rem; margin-bottom: 1.8rem; }
.ruf-listo__etq {
  display: block; font-family: "DM Sans", system-ui, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  color: var(--ruf-caramelo-txt); margin-bottom: .6rem;
}
.ruf-listo__fila { display: flex; gap: .7rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.ruf-listo__fila code {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.6rem;
  letter-spacing: .1em; background: #fff; border: 1px dashed var(--ruf-caramelo);
  border-radius: 4px; padding: .5rem 1rem;
}
.ruf-listo__acciones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- ficha /id/ */
.ruf-perfil { text-align: center; }
.ruf-perfil__foto { margin: 0 auto 1.2rem; width: 220px; height: 220px; }
.ruf-perfil__foto img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 4px solid var(--ruf-beige); display: block;
}
.ruf-perfil__titulo { margin: 0 0 .3rem; }
.ruf-perfil__sub {
  font-family: "DM Sans", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .16em; font-size: .8rem; color: var(--ruf-caramelo-txt); margin: 0 0 1.8rem;
}
.ruf-perfil__codigo {
  font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em;
  font-size: .9rem; color: rgba(74,43,32,.7); margin: 0 0 .6rem;
}
.ruf-perfil__aviso {
  background: var(--ruf-marino); color: var(--ruf-beige);
  border-radius: 8px; padding: 1.6rem 1.3rem; text-align: left;
}
.ruf-perfil__aviso-tit {
  font-family: "DM Sans", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .12em; font-size: .95rem; color: var(--ruf-beige); margin: 0 0 .6rem;
}
.ruf-perfil__aviso p { margin: 0 0 1.2rem; }
.ruf-perfil__aviso strong { color: #fff; }
.ruf-perfil__botones { display: flex; gap: .7rem; flex-wrap: wrap; }
.ruf-perfil__botones .ruf-btn { flex: 1 1 auto; }

.ruf-perfil__salud { text-align: left; margin-top: 1.6rem; border-top: 2px solid var(--ruf-caramelo); padding-top: 1.2rem; }
.ruf-perfil__salud-tit {
  font-family: "DM Sans", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; color: var(--ruf-caramelo-txt); margin: 0 0 .8rem;
}
.ruf-perfil__salud dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
.ruf-perfil__salud dt { font-weight: 700; font-size: .9rem; }
.ruf-perfil__salud dd { margin: 0; font-size: .95rem; }

.ruf-perfil__nota { font-size: .88rem; color: rgba(74,43,32,.75); }
.ruf-perfil__pie { margin-top: 2.2rem; font-size: .82rem; color: rgba(74,43,32,.7); }
.ruf-perfil--vacio { padding: 1rem 0 2rem; }

@media (max-width: 560px) {
  .ruf-perfil__foto { width: 170px; height: 170px; }
  .ruf-perfil__botones .ruf-btn { flex: 1 1 100%; }
  .ruf-form__codigo { font-size: 1.3rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ruf-btn, .ruf-btn:hover { transition: none !important; transform: none !important; }
}