/* PlayPalabras — Mazos Compartidos. Tarjetas de frase con traducción oculta (toca para ver). Minimalista, con la paleta del núcleo: morado #7c5cfc, azul #4eb1e0. Los colores viven en variables --ppmc-* (autocontenidas, sin depender del tema) y se redefinen bajo [data-theme="dark"], el atributo que usa el tema PlayPalabras para el modo oscuro. Así el widget nunca queda como una isla blanca en una página oscura. */ .ppmc, .ppmc-single{ /* Paleta local (modo claro). */ --ppmc-accent:#7c5cfc; --ppmc-ink:#2e2a3a; --ppmc-ink-strong:#1f1147; --ppmc-muted:#9a93b0; --ppmc-sub:#6b6580; --ppmc-card-bg:#ffffff; --ppmc-card-border:#eceaf6; --ppmc-card-shadow:0 4px 14px rgba(31,17,71,.05); --ppmc-card-shadow-hover:0 10px 24px rgba(31,17,71,.10); --ppmc-chip-bg:#f0ecfe; --ppmc-chip-bg-strong:#e3d9fb; --ppmc-es:#6b4ef0; --ppmc-reveal-border:#d8d1f0; --ppmc-reveal-bg:#faf9ff; --ppmc-reveal-border-hover:#bcaef0; --ppmc-reveal-bg-hover:#f4f0ff; --ppmc-open-border:#cdc2f4; --ppmc-open-bg:#f2ecff; --ppmc-badge-grad:linear-gradient(135deg,#efe9ff,#e4f3fb); } .ppmc{ max-width:720px;margin:24px auto;color:var(--ppmc-ink);text-align:center; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; } /* Modo oscuro (el tema pone data-theme="dark" en ). */ [data-theme="dark"] .ppmc, [data-theme="dark"] .ppmc-single{ --ppmc-accent:#a48dff; --ppmc-ink:#e6e3f0; --ppmc-ink-strong:#f3f1fa; --ppmc-muted:#9a94ad; --ppmc-sub:#aaa4bc; --ppmc-card-bg:#1b1e24; --ppmc-card-border:#2c2f3a; --ppmc-card-shadow:0 4px 14px rgba(0,0,0,.35); --ppmc-card-shadow-hover:0 10px 24px rgba(0,0,0,.5); --ppmc-chip-bg:rgba(124,92,252,.18); --ppmc-chip-bg-strong:rgba(124,92,252,.32); --ppmc-es:#c3b3ff; --ppmc-reveal-border:#3b3653; --ppmc-reveal-bg:#171a20; --ppmc-reveal-border-hover:#5b528f; --ppmc-reveal-bg-hover:#221f33; --ppmc-open-border:#5b528f; --ppmc-open-bg:rgba(124,92,252,.16); --ppmc-badge-grad:linear-gradient(135deg,#2a2440,#1d2b36); } /* ── Cabecera ── */ .ppmc__head{margin:0 0 18px} .ppmc-emoji-badge{ width:72px;height:72px;margin:0 auto 14px;border-radius:50%;line-height:1; display:flex;align-items:center;justify-content:center;font-size:38px; background:var(--ppmc-badge-grad); } .ppmc__title{font-size:24px;font-weight:800;margin:0 0 8px;color:var(--ppmc-ink-strong);line-height:1.2} .ppmc__promise{font-size:17px;font-weight:700;margin:0;color:var(--ppmc-ink)} /* Frase de IA: ahora va abajo, justo antes del botón. */ .ppmc__ai{font-size:14.5px;color:var(--ppmc-sub);margin:0 auto 18px;max-width:50ch;line-height:1.6} /* ── Grid de frases ── */ .ppmc-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;margin:20px 0 24px;text-align:left; } .ppmc-pcard{ background:var(--ppmc-card-bg);border:1px solid var(--ppmc-card-border);border-radius:16px; padding:14px 14px 13px;box-shadow:var(--ppmc-card-shadow); display:flex;flex-direction:column;gap:9px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .ppmc-pcard:hover{transform:translateY(-2px);box-shadow:var(--ppmc-card-shadow-hover);border-color:var(--ppmc-reveal-border-hover)} .ppmc-pcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px} .ppmc-pcard__num{ min-width:22px;height:22px;padding:0 7px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:var(--ppmc-chip-bg);color:var(--ppmc-accent);font-size:12px;font-weight:700; } .ppmc-pcard__audio{ appearance:none;border:0;background:var(--ppmc-chip-bg);color:var(--ppmc-accent);cursor:pointer;flex:0 0 auto; width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; transition:background .15s,transform .1s,color .15s; } .ppmc-pcard__audio:hover{background:var(--ppmc-chip-bg-strong)} .ppmc-pcard__audio:active{transform:scale(.92)} .ppmc-pcard__audio.is-playing{background:var(--ppmc-accent);color:#fff} .ppmc-pcard__audio.is-loading{cursor:default} .ppmc-pcard__audio.is-loading svg{animation:ppmcPulse 1s ease-in-out infinite} @keyframes ppmcPulse{0%,100%{opacity:.45}50%{opacity:1}} .ppmc-pcard__en{margin:0;font-size:15px;font-weight:600;color:var(--ppmc-ink);line-height:1.35} .ppmc-pcard__reveal{ appearance:none;width:100%;text-align:center;cursor:pointer;font-family:inherit; border:1.5px dashed var(--ppmc-reveal-border);background:var(--ppmc-reveal-bg);border-radius:11px;padding:11px 10px; transition:background .18s,border-color .18s; } .ppmc-pcard__reveal:hover{border-color:var(--ppmc-reveal-border-hover);background:var(--ppmc-reveal-bg-hover)} .ppmc-pcard__hint{ display:inline-flex;align-items:center;gap:6px; color:var(--ppmc-muted);font-size:12.5px;font-weight:600; } .ppmc-eye{flex:0 0 auto;opacity:.85} .ppmc-pcard__es{color:var(--ppmc-es);font-size:14.5px;font-weight:700;line-height:1.35} /* Foco visible para teclado (accesibilidad). */ .ppmc-pcard__reveal:focus-visible, .ppmc-pcard__audio:focus-visible, .ppmc-btn:focus-visible{ outline:none;box-shadow:0 0 0 3px rgba(124,92,252,.4); } /* Toca para revelar. Con JS (.ppmc-js) la traducción se oculta hasta tocar; sin JS se ve, así nunca queda inaccesible (mejora progresiva). */ .ppmc-js .ppmc-pcard__es{display:none} .ppmc-js .ppmc-pcard.is-open .ppmc-pcard__hint{display:none} .ppmc-js .ppmc-pcard.is-open .ppmc-pcard__es{display:inline-block;animation:ppmcReveal .26s ease} .ppmc-js .ppmc-pcard.is-open .ppmc-pcard__reveal{border-style:solid;border-color:var(--ppmc-open-border);background:var(--ppmc-open-bg)} @keyframes ppmcReveal{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} /* Aviso solo si el admin limitó cuántas frases se ven (mazos grandes). */ .ppmc-grid-note{font-size:12.5px;color:var(--ppmc-muted);margin:2px 0 16px} /* ── CTA ── */ .ppmc__cta{max-width:460px;margin:0 auto} .ppmc-btn{ display:block;width:100%;box-sizing:border-box;border:0;border-radius:14px; padding:16px 20px;font-size:17px;font-weight:800;color:#fff;letter-spacing:.2px; background:linear-gradient(135deg,#7c5cfc,#4eb1e0);cursor:pointer;text-decoration:none; text-align:center;font-family:inherit;transition:transform .12s,box-shadow .12s; box-shadow:0 10px 24px rgba(124,92,252,.32); } .ppmc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,92,252,.42);color:#fff} .ppmc-btn:active{transform:none} .ppmc-btn:disabled{opacity:.7;cursor:default;transform:none;box-shadow:none} .ppmc-trust{font-size:12.5px;color:var(--ppmc-muted);margin:12px 0 0;text-align:center} /* Toast post-importación */ .ppmc-toast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99999; max-width:92%;background:#1f1147;color:#fff;padding:13px 18px;border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.25);text-align:center; font:600 14px/1.45 Inter,system-ui,sans-serif; } /* Página propia del mazo (plantilla single-pp_mazo) */ .ppmc-single{padding-top:14px;padding-bottom:40px} .ppmc-single__head{text-align:center;margin:0 0 6px} .ppmc-single .ppmc-single__title{ font-size:32px;font-weight:800;color:var(--ppmc-ink-strong);line-height:1.15; letter-spacing:-.01em;margin:0;text-align:center; } @media(max-width:480px){ .ppmc{margin:14px 8px} .ppmc-grid{grid-template-columns:1fr} .ppmc__title{font-size:22px} .ppmc-single .ppmc-single__title{font-size:24px} }