/* Compuasociados · Artemisa, la Dama de la Justicia (login). Solo transform/opacity en las animaciones.
   Perfiles de movimiento (los fija artemisa.js): art--m-full | art--m-soft (prefers-reduced-motion: reacciones SI, sin bucles de reposo, --m = .65) | art--m-off (sin animacion). */
.art-j { position: relative; pointer-events: none; user-select: none; width: 200px; height: 183px; margin: -98px auto 0; contain: layout style; z-index: 2; --m: 1;
  --a-edge: rgba(48, 80, 138, .55); --a-ink: #14264d; --a-lip: #d65a76; --a-mouth-in: #6e2440; --a-mouth-s: #9a5a68; --a-blush: #ff8fa9;
  --a-skin-1: #ffffff; --a-skin-2: #eef2fb; --a-skin-3: #cdd9ee;
  --a-robe-1: #ffffff; --a-robe-2: #eef2fa; --a-robe-3: #cbd8ee;
  --a-cloak-1: #3a62b8; --a-cloak-2: #22458f; --a-cloak-3: #142a63;
  --a-hair-1: #8a5a2b; --a-hair-2: #5a3718; --a-hair-3: #2d190b; --a-hair-hi: #f1cf8a;
  --a-gold-1: #fbe9a8; --a-gold-2: #d7ad4f; --a-gold-3: #8c6516; --a-spark: #e2a93c;
  --a-disc-1: #fff8de; --a-disc-2: #f6dd91; --a-disc-3: #d8ab45; --a-glow: #f6d98a;
  --a-steel-1: #ffffff; --a-steel-2: #b7c6e6; }
html.dark .art-j {
  --a-edge: rgba(214, 228, 255, .55); --a-ink: #101e40; --a-lip: #e58aa0; --a-mouth-s: #b9808e;
  --a-skin-1: #f2f6ff; --a-skin-2: #c9d9f4; --a-skin-3: #8ea8d9;
  --a-robe-1: #dce8ff; --a-robe-2: #a4bde9; --a-robe-3: #6a8ccc;
  --a-cloak-1: #5a86e6; --a-cloak-2: #365cc0; --a-cloak-3: #1f3c8e;
  --a-hair-1: #a8743a; --a-hair-2: #6c4220; --a-hair-3: #3a2210; --a-hair-hi: #ffdca0;
  --a-spark: #ffe9a0;
  --a-disc-1: #ffeeb8; --a-disc-2: #e7c262; --a-disc-3: #b78a2c; --a-glow: #e3b95a;
  --a-steel-2: #c9d6f2; }
.art-j.art--m-soft { --m: .65; }
.art-j svg.a2 { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- reposo (perfil full): respiracion, cabello, halo, balanza, venda, espada ---- */
.a2-float { transform-origin: 120px 216px; animation: a2-breathe 5.6s ease-in-out infinite; }
.a2-turn, .a2-nod, .a2-follow { transform-origin: 120px 134px; }
.a2-tailw { transform-origin: 89px 93px; }
.a2-sway { animation: a2-sway 6.4s ease-in-out infinite; }
.a2-sway--l { transform-origin: 104px 52px; }
.a2-sway--r { transform-origin: 136px 52px; }
.a2-sway--fl { transform-origin: 94px 84px; }
.a2-sway--fr { transform-origin: 146px 84px; }
.a2-ring { transform-origin: 120px 84px; animation: a2-spin 120s linear infinite; }
.a2-glow { transform-box: fill-box; transform-origin: center; animation: a2-throb 4.4s ease-in-out infinite; }
.a2-tw { transform-box: fill-box; transform-origin: center; animation: a2-tw 3.6s ease-in-out infinite; }
.a2-tw2 { animation-delay: -1.2s; } .a2-tw3 { animation-delay: -2.3s; }
.a2-rock { transform-origin: 194px 62px; animation: a2-rock 5.2s ease-in-out infinite; }
.a2-beam { transform-origin: 194px 62px; }
.a2-bob--l { animation: a2-bobl 5.2s ease-in-out infinite; }
.a2-bob--r { animation: a2-bobr 5.2s ease-in-out infinite; }
.a2-swing { transform-origin: 0 0; animation: a2-swing 3.3s ease-in-out infinite; }
.a2-swing--r { animation-duration: 3.9s; animation-delay: -1.4s; }
.a2-tail { transform-origin: 89px 93px; animation: a2-tail 3.2s ease-in-out infinite; }
.a2-tail--2 { animation-duration: 3.8s; animation-delay: -1.3s; }
.a2-swordpose { transform-origin: 48px 152px; }
.a2-swordsway { transform-origin: 48px 152px; animation: a2-sword 6s ease-in-out infinite; }
.a2-glint { animation: a2-glint 5.6s ease-in-out infinite; }
@keyframes a2-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.8px) scale(1.007); } }
@keyframes a2-sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.8deg); } }
@keyframes a2-spin { to { transform: rotate(360deg); } }
@keyframes a2-throb { 0%, 100% { opacity: .78; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes a2-tw { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes a2-rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes a2-bobl { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-1.5px); } }
@keyframes a2-bobr { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }
@keyframes a2-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes a2-tail { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
@keyframes a2-sword { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes a2-glint { 0%, 56% { opacity: 0; transform: translateY(0); } 60% { opacity: 1; } 82% { opacity: 1; transform: translateY(116px); } 88%, 100% { opacity: 0; transform: translateY(116px); } }

.a2-spark, .a2-pulse, .a2-hpulse { opacity: 0; }
.a2-mouth { opacity: 0; transition: opacity .18s ease; }
.a2-mouth--n { opacity: 1; }

/* ---- perfil soft (el sistema pide reducir movimiento): sin bucles de reposo; las reacciones y el seguimiento SI se animan ---- */
.art--m-soft .a2-float, .art--m-soft .a2-sway, .art--m-soft .a2-ring, .art--m-soft .a2-glow, .art--m-soft .a2-tw,
.art--m-soft .a2-rock, .art--m-soft .a2-bob--l, .art--m-soft .a2-bob--r, .art--m-soft .a2-swing, .art--m-soft .a2-tail,
.art--m-soft .a2-swordsway, .art--m-soft .a2-glint { animation: none; }

/* ---- reacciones (cover / error / exito): las mueve artemisa.js con resortes por rAF y Web Animations (no dependen de reglas CSS de animacion);
        aqui solo quedan la expresion de la boca y el apagado de los bucles de reposo ---- */
.art--cover .a2-rock, .art--cover .a2-bob, .art--cover .a2-swing, .art--cover .a2-swordsway { animation: none; }
.art--happy .a2-mouth--n { opacity: 0; }
.art--happy .a2-mouth--h { opacity: 1; }
.art--sad .a2-rock, .art--sad .a2-swordsway { animation: none; }
.art--happy .a2-rock, .art--happy .a2-bob, .art--happy .a2-swing, .art--happy .a2-swordsway { animation: none; }
.art--happy .a2-glow { animation-duration: 1s; }
.a2-pulse, .a2-spark { transform-box: fill-box; transform-origin: center; }

@media (max-width: 767px) { .art-j { width: 168px; height: 154px; margin: -80px auto 2px; } }

/* ---- perfil off (localStorage tahoe-motion=off, html.th-static): quieta ---- */
.art--m-off, .art--m-off * { animation: none !important; transition: none !important; }
.art--m-off .a2-spark, .art--m-off .a2-pulse, .art--m-off .a2-glint { display: none; }

/* ===== Mensaje de error del login, en el formulario (sin ventana emergente) · 2026-10-21 ===== */
.art-error { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 650; line-height: 1.3; color: #b4232a; background: rgba(220, 38, 38, .09); border: 1px solid rgba(220, 38, 38, .30); }
.art-error::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
html.dark .art-error { color: #ff8d92; background: rgba(255, 69, 58, .12); border-color: rgba(255, 69, 58, .40); }
input.art-invalid { border-color: rgba(220, 38, 38, .75) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important; }
html.dark input.art-invalid { border-color: rgba(255, 69, 58, .80) !important; box-shadow: 0 0 0 3px rgba(255, 69, 58, .18) !important; }