/* =========================
   CUSTOM.CSS (PEGA TODO)
   ========================= */

/* -------------------------
   1) CURSOR CUSTOM
   Elige UNA opción:
   - Opción A (recomendada): cursor desde Assets (PNG/WEBP/GIF)
   - Opción B: cursor externo RW-Designer (puede fallar por bloqueos/CORS)
   ------------------------- */

/* === OPCIÓN A (RECOMENDADA): desde Assets ===
   1) Sube tu cursor como PNG/WebP/GIF a Assets
   2) Cambia la ruta /assets/tu-cursor.png
   3) Ajusta el hotspot:
      - Si imagen 32x32 -> 16 16
      - Si imagen 64x64 -> 32 32
*/
:root {
  --cursor-url: url("/assets/cusrsor.png");
  --cursor-hot-x: 16;
  --cursor-hot-y: 16;
}

html, body {
  cursor: var(--cursor-url) var(--cursor-hot-x) var(--cursor-hot-y), auto;
}

a, button, [role="button"], input, label, select, textarea, summary {
  cursor: var(--cursor-url) var(--cursor-hot-x) var(--cursor-hot-y), pointer;
}

/* Deshabilitados */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* === OPCIÓN B: RW-Designer externo (DESACTIVA A si activas B)
html, body {
  cursor: url("https://www.rw-designer.com/cursor-extern.php?id=24907"), auto;
}
a, button, [role="button"], input, label, select, textarea, summary {
  cursor: url("https://www.rw-designer.com/cursor-extern.php?id=24907"), pointer;
}
button:disabled, input:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}
=== FIN OPCIÓN B === */


/* -------------------------
   2) CALIDAD VISUAL GLOBAL
   ------------------------- */
html { scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto */
::selection { background: rgba(0,0,0,0.18); }

/* Móvil: quita el highlight azul al tocar */
* { -webkit-tap-highlight-color: transparent; }

/* Imágenes más “limpias” */
img, video {
  max-width: 100%;
  height: auto;
}


/* -------------------------
   3) FOCUS BONITO (accesibilidad)
   ------------------------- */
:focus-visible {
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
}

/* Si tu web es dark, cambia el color del outline aquí */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: rgba(255,255,255,0.35);
  }
}


/* -------------------------
   4) BOTONES / LINKS: micro-interacciones
   ------------------------- */
a, button, [role="button"] {
  transition: transform 0.08s ease, opacity 0.12s ease, filter 0.12s ease;
}

button:active,
[role="button"]:active,
a:active {
  transform: scale(0.98);
}

a:hover { filter: brightness(1.05); }


/* -------------------------
   5) FORMULARIOS: look consistente
   ------------------------- */
input, select, textarea {
  font: inherit;
}

/* Evita zoom en iOS al enfocar input (si tu tema usa 14px o menos) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
}


/* -------------------------
   6) SCROLLBAR (suave y discreta)
   ------------------------- */
/* Chrome/Safari/Edge */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}
::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.25) rgba(0,0,0,0.06); }

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
  ::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
  * { scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06); }
}


/* -------------------------
   7) (Opcional) Container general
   Si tu tema usa main o .container, esto centra y limita ancho.
   Si notas que “rompe” el layout, bórralo.
   ------------------------- */
main, .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}