/* ============================================================
   TarotAI · SISTEMA DE ICONOS 3D (estilo Pixar)
   ------------------------------------------------------------
   Sustituye los emojis planos del sistema operativo por un
   sprite sheet de renders 3D propios con alfa real.

   Hoja: images/icons-sprite.png (1024x1024)

   IMPORTANTE: la rejilla NO es a sangre. Las coordenadas de
   abajo se MIDIERON pixel a pixel sobre el PNG (analizando el
   canal alfa para hallar la caja real de cada icono), no se
   supusieron. Resultado de la medicion:
     - celda uniforme de 165 x 165 px
     - origen de la primera celda en (181, 16.5)
     - 4 columnas x 6 filas, la ultima celda vacia (23 iconos)

   Todo se deriva de --u (pixeles de pantalla por pixel del
   sprite), asi que cambiar --size reescala icono y hoja a la
   vez sin tocar ninguna coordenada.
   ============================================================ */

.qa-ico {
    --size: 34px;
    --u: calc(var(--size) / 165);   /* 1 unidad del sprite en pantalla */

    display: block;
    flex: 0 0 auto;
    width: var(--size);
    height: var(--size);
    font-size: 0;                   /* anula el 24px heredado del emoji */
    line-height: 0;

    background-image: url('../images/icons-sprite.png');
    background-repeat: no-repeat;
    background-size: calc(var(--u) * 1024) calc(var(--u) * 1024);

    /* Sombra suave: el render 3D "apoya" sobre la tarjeta */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
                filter .22s ease;
    will-change: transform;
}

/* Micro-interaccion: el icono cobra vida al recorrer la tarjeta */
.quick-action:hover .qa-ico,
.quick-action:focus-visible .qa-ico {
    transform: translateY(-2px) scale(1.09) rotate(-3deg);
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .55))
            drop-shadow(0 0 7px rgba(212, 175, 55, .38));
}

.quick-action:active .qa-ico {
    transform: translateY(0) scale(.95);
    transition-duration: .08s;
}

/* ---------- Coordenadas medidas (orden del DOM) ----------
   x = 181 + columna * 165      y = 16.5 + fila * 165        */

/* Fila 0 */
.qa-ico-0  { background-position: calc(var(--u) * -181) calc(var(--u) * -16.5); }  /* Oraculo       */
.qa-ico-1  { background-position: calc(var(--u) * -346) calc(var(--u) * -16.5); }  /* Carta natal   */
.qa-ico-2  { background-position: calc(var(--u) * -511) calc(var(--u) * -16.5); }  /* Zodiaco       */
.qa-ico-3  { background-position: calc(var(--u) * -676) calc(var(--u) * -16.5); }  /* Insights      */
/* Fila 1 */
.qa-ico-4  { background-position: calc(var(--u) * -181) calc(var(--u) * -181.5); } /* Logros        */
.qa-ico-5  { background-position: calc(var(--u) * -346) calc(var(--u) * -181.5); } /* Respiracion   */
.qa-ico-6  { background-position: calc(var(--u) * -511) calc(var(--u) * -181.5); } /* Compatibilidad*/
.qa-ico-7  { background-position: calc(var(--u) * -676) calc(var(--u) * -181.5); } /* Biblioteca    */
/* Fila 2 */
.qa-ico-8  { background-position: calc(var(--u) * -181) calc(var(--u) * -346.5); } /* Carta del ano */
.qa-ico-9  { background-position: calc(var(--u) * -346) calc(var(--u) * -346.5); } /* Chat          */
.qa-ico-10 { background-position: calc(var(--u) * -511) calc(var(--u) * -346.5); } /* Afirmaciones  */
.qa-ico-11 { background-position: calc(var(--u) * -676) calc(var(--u) * -346.5); } /* Mapa de calor */
/* Fila 3 */
.qa-ico-12 { background-position: calc(var(--u) * -181) calc(var(--u) * -511.5); } /* Spreadcraft   */
.qa-ico-13 { background-position: calc(var(--u) * -346) calc(var(--u) * -511.5); } /* Diario        */
.qa-ico-14 { background-position: calc(var(--u) * -511) calc(var(--u) * -511.5); } /* Tarotdle      */
.qa-ico-15 { background-position: calc(var(--u) * -676) calc(var(--u) * -511.5); } /* Wrapped       */
/* Fila 4 */
.qa-ico-16 { background-position: calc(var(--u) * -181) calc(var(--u) * -676.5); } /* Mazo          */
.qa-ico-17 { background-position: calc(var(--u) * -346) calc(var(--u) * -676.5); } /* Atlas         */
.qa-ico-18 { background-position: calc(var(--u) * -511) calc(var(--u) * -676.5); } /* Memoria       */
.qa-ico-19 { background-position: calc(var(--u) * -676) calc(var(--u) * -676.5); } /* Deck Lab      */
/* Fila 5 (3 iconos, cuarta celda vacia) */
.qa-ico-20 { background-position: calc(var(--u) * -181) calc(var(--u) * -841.5); } /* Arbor         */
.qa-ico-21 { background-position: calc(var(--u) * -346) calc(var(--u) * -841.5); } /* Astrarium     */
.qa-ico-22 { background-position: calc(var(--u) * -511) calc(var(--u) * -841.5); } /* Sigillum      */

/* ============================================================
   SPRITE 2 · Iconos de tirada y de enfoque de lectura
   ------------------------------------------------------------
   Hoja: images/icons-reading.png (1024x1024), alfa real.
   11 iconos en 4 columnas x 3 filas (la última celda, vacía).

   Igual que arriba, las coordenadas se MIDIERON pixel a pixel
   sobre el PNG (caja real de cada icono vía canal alfa). Aquí
   la rejilla NO es uniforme: cada icono tiene su propio tamaño,
   así que en vez de una celda teórica se recorta una ventana
   cuadrada de 274 px CENTRADA en el centro real de cada icono.
   Así ninguno se corta ni asoma el vecino.

   Centros medidos (x, y):
     fila 0: (130,175) (384,179) (640,174) (893,174)
     fila 1: (131,509) (383,505) (639,509) (892,506)
     fila 2: (134,835) (380,839) (638,835)
   Desplazamiento = -(centro - 137)   [137 = 274/2]
   ============================================================ */

.rd-ico {
    --size: 30px;
    --u: calc(var(--size) / 274);   /* 1 unidad del sprite en pantalla */

    display: block;
    flex: 0 0 auto;
    width: var(--size);
    height: var(--size);
    font-size: 0;                   /* anula el tamaño del emoji anterior */
    line-height: 0;

    background-image: url('../images/icons-reading.png');
    background-repeat: no-repeat;
    background-size: calc(var(--u) * 1024) calc(var(--u) * 1024);

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), filter .22s ease;
}

/* --- Tiradas (Paso 1) --- */
.rd-ico-1card  { background-position: calc(var(--u) *    7) calc(var(--u) *  -38); }
.rd-ico-3cards { background-position: calc(var(--u) * -247) calc(var(--u) *  -42); }
.rd-ico-5cards { background-position: calc(var(--u) * -503) calc(var(--u) *  -37); }
.rd-ico-7cards { background-position: calc(var(--u) * -756) calc(var(--u) *  -37); }
.rd-ico-celtic { background-position: calc(var(--u) *    6) calc(var(--u) * -372); }

/* --- Enfoques de lectura (Paso 2) --- */
.rd-ico-general   { background-position: calc(var(--u) * -246) calc(var(--u) * -368); }
.rd-ico-love      { background-position: calc(var(--u) * -502) calc(var(--u) * -372); }
.rd-ico-career    { background-position: calc(var(--u) * -755) calc(var(--u) * -369); }
.rd-ico-money     { background-position: calc(var(--u) *    3) calc(var(--u) * -698); }
.rd-ico-health    { background-position: calc(var(--u) * -243) calc(var(--u) * -702); }
.rd-ico-spiritual { background-position: calc(var(--u) * -501) calc(var(--u) * -698); }

/* Tamaños por contexto */
.so-icon.rd-ico   { --size: 40px; }   /* fila de tirada: hay sitio  */
.si-icon.rd-ico   { --size: 46px; margin: 0 auto 8px; }
.rtype-opt .rd-ico { --size: 32px; margin: 0 auto 2px; }

/* Vida al seleccionar o pasar por encima */
.spread-opt:hover .rd-ico,
.rtype-opt:hover .rd-ico {
    transform: translateY(-2px) scale(1.07);
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .5));
}

.spread-opt.selected .rd-ico,
.rtype-opt.selected .rd-ico {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .45))
            drop-shadow(0 0 8px rgba(167, 139, 250, .55));
}

/* ---------- Adaptaciones ---------- */

@media (max-width: 420px) {
    .qa-ico { --size: 30px; }
    .so-icon.rd-ico { --size: 36px; }
    .si-icon.rd-ico { --size: 42px; }
    .rtype-opt .rd-ico { --size: 29px; }
}

@media (min-width: 768px) {
    .qa-ico { --size: 38px; }
    .so-icon.rd-ico { --size: 44px; }
    .rtype-opt .rd-ico { --size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .qa-ico,
    .quick-action:hover .qa-ico,
    .quick-action:focus-visible .qa-ico,
    .quick-action:active .qa-ico,
    .rd-ico,
    .spread-opt:hover .rd-ico,
    .rtype-opt:hover .rd-ico,
    .spread-opt.selected .rd-ico,
    .rtype-opt.selected .rd-ico {
        transition: none;
        transform: none;
    }
}

@media (prefers-contrast: more) {
    .qa-ico,
    .rd-ico { filter: none; }
}