/* Base común a los tres prototipos. Cada prototipo pone encima su propio estilo. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; -webkit-tap-highlight-color: transparent; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mensaje flotante (compartir.js → aviso) */
.aviso {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 999px; z-index: 1000;
  background: #111; color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.2);
  max-width: calc(100vw - 32px); text-align: center;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Sacudida del formulario cuando la respuesta no vale */
@keyframes sacudida {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.sacudida { animation: sacudida .42s cubic-bezier(.36, .07, .19, .97) both; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}