/* ═══════════════════════════════════════════════════════════════════════════
   Mascotas (13-10-2026): búho guía + gallito de las rocas. Lo pinta js/mascotas.js.
   Diseño y animaciones copiados de la ruta de aprendizaje (00 AWS-Licencias/web/ruta.html),
   con los globos en los colores de FaciWeb (claro y oscuro).

   Ubicación del búho: abajo a la DERECHA, pero por ENCIMA de lo que ya flota ahí:
   · ≤1100 px en Emitir / Punto de venta: la cinta pegajosa .fw-actionbar (total + botón);
   · ≤640 px: la barra de pestañas .fw-tabbar.
   z-index 45: sobre la cinta (30) y las pestañas (40), DEBAJO de ventanas (1040) y paleta (1050).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --mc-borde: rgba(5, 150, 105, .35);
    --mc-tinta: #047857;
    --mc-oro: #c2410c;
    --mc-oro-bd: rgba(234, 88, 12, .38);
    --mc-sombra: 0 12px 30px rgba(15, 23, 42, .18);
    --mc-abajo: 16px;               /* distancia al borde inferior (sube si hay cinta o pestañas) */
}
html[data-theme="dark"] {
    --mc-borde: rgba(110, 231, 183, .35);
    --mc-tinta: #6ee7b7;
    --mc-oro: #fdba74;
    --mc-oro-bd: rgba(253, 186, 116, .38);
    --mc-sombra: 0 12px 30px rgba(0, 0, 0, .5);
}

/* Alas: giran desde el hombro */
.mc-buho .ala { transform-box: fill-box; }
.mc-buho .ala-i { transform-origin: 100% 0; }
.mc-buho .ala-d { transform-origin: 0 0; }
.mc-buho.aletea .ala-i { animation: mc-aleteoI .32s ease-in-out infinite alternate; }
.mc-buho.aletea .ala-d { animation: mc-aleteoD .32s ease-in-out infinite alternate; }
.mc-buho.posado .ala-i { animation: mc-aleteoI 2.6s ease-in-out infinite alternate; }
.mc-buho.posado .ala-d { animation: mc-aleteoD 2.6s ease-in-out infinite alternate; }
@keyframes mc-aleteoI { from { transform: rotate(8deg); } to { transform: rotate(-38deg); } }
@keyframes mc-aleteoD { from { transform: rotate(-8deg); } to { transform: rotate(38deg); } }

/* ── Búho flotante ── */
.mc-flot {
    position: fixed; z-index: 45;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mc-abajo) + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: flex-end; gap: 8px;
    pointer-events: none;           /* solo el búho y el globo reciben clics */
    max-width: calc(100vw - 24px);
}
.mc-flot > * { pointer-events: auto; }
.mc-buho {
    flex: none; width: 76px; height: 82px; border: 0; background: none; padding: 0; cursor: pointer;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
    transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.mc-buho svg { width: 100%; height: 100%; display: block; }
.mc-buho:focus-visible { outline: 3px solid var(--mc-borde); outline-offset: 2px; border-radius: 14px; }
.mc-buho.chico { width: 48px; height: 52px; opacity: .85; }
.mc-buho.chico:hover { opacity: 1; }
.mc-buho.llega { animation: mc-llega .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mc-llega { 0% { transform: translate(60px, -120px) rotate(12deg); } 60% { transform: translate(-6px, 6px) rotate(-4deg); } 100% { transform: translate(0, 0); } }

.mc-globo {
    max-width: 280px; min-width: 0;
    background: var(--card, #fff); color: var(--txt, #1c2433);
    border: 1px solid var(--mc-borde); border-radius: 16px 16px 4px 16px;
    padding: 12px 14px; box-shadow: var(--mc-sombra);
    font-size: 14px; line-height: 1.45; margin-bottom: 40px;
    overflow-wrap: anywhere;
    animation: mc-aparece .3s ease;
}
.mc-globo[hidden] { display: none; }
@keyframes mc-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mc-globo .mc-de {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    color: var(--mc-tinta); margin-bottom: 4px;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.mc-globo p { margin: 0; }
.mc-globo .mc-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-globo .mc-acc button,
.mc-globo .mc-acc a {
    font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 5px 10px;
    border: 1px solid var(--line, #e8ebf2); background: var(--bg, #f5f7fb); color: var(--txt, #1c2433);
    text-decoration: none; line-height: 1.3; cursor: pointer;
}
.mc-globo .mc-acc button:hover,
.mc-globo .mc-acc a:hover { border-color: var(--brand, #059669); color: var(--mc-tinta); }
.mc-globo .mc-cerrar {
    border: 0; background: none; padding: 0 4px; font-size: 18px; line-height: 1;
    color: var(--mut, #667085); cursor: pointer; text-transform: none;
}
.mc-globo .mc-cerrar:hover { color: var(--txt, #1c2433); }
/* Tuku explicando un problema: más ancho, franja ámbar (aviso) o roja (error). */
.mc-globo.mc-prob { max-width: 320px; border-left: 4px solid #d97706; }
.mc-globo.mc-prob.mc-error { border-left-color: #dc2626; }
.mc-globo.mc-prob .mc-de { color: #b45309; }
.mc-globo.mc-prob.mc-error .mc-de { color: #b91c1c; }
.mc-globo .mc-paso { margin-top: 6px; font-size: 13px; color: var(--mut, #475467); }
html[data-theme="dark"] .mc-globo.mc-prob .mc-de { color: #fbbf24; }
html[data-theme="dark"] .mc-globo.mc-prob.mc-error .mc-de { color: #fca5a5; }
html[data-theme="dark"] .mc-globo .mc-paso { color: #cbd5e1; }

/* ── Gallito de las rocas (abajo a la izquierda) ── */
.mc-gallito {
    position: fixed; z-index: 46;
    left: calc(16px + env(safe-area-inset-left, 0px));
    bottom: calc(var(--mc-abajo) - 4px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: flex-end; gap: 8px;
    max-width: calc(100vw - 32px);
    transform: translateY(160%); visibility: hidden;
    transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), visibility 0s linear .5s;
    pointer-events: none;
}
.mc-gallito.si { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), visibility 0s; }
.mc-gallito svg { width: 92px; height: auto; flex: none; }
.mc-gallito.si svg { animation: mc-salta .6s ease-in-out 2; }
@keyframes mc-salta { 50% { transform: translateY(-14px); } }
.mc-gallito .mc-globo-a {
    background: var(--card, #fff); color: var(--txt, #1c2433);
    border: 1px solid var(--mc-oro-bd); border-radius: 16px 16px 16px 4px;
    padding: 10px 14px; font-size: 14px; line-height: 1.45; max-width: 240px; min-width: 0;
    margin-bottom: 58px; box-shadow: var(--mc-sombra); overflow-wrap: anywhere;
}
.mc-gallito .mc-globo-a b { color: var(--mc-oro); }
.mc-gallito .mc-quien { font-weight: 700; color: var(--mc-tinta); }
.mc-gallito .mc-hito { display: block; margin-top: 4px; font-weight: 600; color: var(--mc-tinta); }

/* ── Confeti (cada 10 aceptados) ── */
.mc-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 1100; overflow: hidden; }
.mc-confeti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: mc-cae 2.6s linear forwards; }
@keyframes mc-cae { to { transform: translateY(110vh) rotate(720deg); } }

/* ── Que no tapen lo que ya flota abajo ── */
@media (max-width: 1100px) {
    /* Emitir / Punto de venta: la cinta del total (≈ 64 px) queda debajo del búho. */
    body:has(.fw-actionbar) { --mc-abajo: 88px; }
}
@media (max-width: 640px) {
    /* Teléfono: por encima de la barra de pestañas (y de la cinta si la hay). */
    :root { --mc-abajo: calc(5.4rem); }
    body:has(.fw-actionbar) { --mc-abajo: calc(9.6rem); }
}
@media (max-width: 560px) {
    .mc-flot { right: calc(10px + env(safe-area-inset-right, 0px)); }
    .mc-buho { width: 56px; height: 60px; }
    .mc-buho.chico { width: 40px; height: 44px; }
    .mc-globo, .mc-globo.mc-prob { max-width: calc(100vw - 96px); font-size: 13.5px; margin-bottom: 34px; padding: 10px 12px; }
    .mc-gallito { left: calc(10px + env(safe-area-inset-left, 0px)); }
    .mc-gallito svg { width: 68px; }
    /* Ancho topado para no montarse sobre el búho de la derecha (10 + 68 + 8 + globo + 66 del búho). */
    .mc-gallito .mc-globo-a { margin-bottom: 42px; font-size: 13px; max-width: max(150px, calc(100vw - 170px)); }
}

/* Sin animaciones si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
    .mc-buho, .mc-buho *, .mc-globo, .mc-gallito, .mc-gallito *, .mc-confeti i {
        animation: none !important; transition: none !important;
    }
}
@media print { .mc-flot, .mc-gallito, .mc-confeti { display: none !important; } }

/* ═════ Gracias de Tuku y Tunki (13/10/2026, igual que en icontable.app/ruta) ═════ */
.parpado,.parpado-g{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 0}
.parpado{animation:mcParpadea 5.6s infinite}
.parpado.pd{animation-delay:.03s}
.parpado-g{animation:mcParpadea 7.3s 1.2s infinite}
@keyframes mcParpadea{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.cabeza-b{transform-box:view-box;transform-origin:70px 75px}
.cabeza-g{transform-box:view-box;transform-origin:44px 70px}
.cresta{transform-box:fill-box;transform-origin:80% 100%}
.cola{transform-box:fill-box;transform-origin:0 0;animation:mcColea 4.5s ease-in-out infinite}
@keyframes mcColea{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-7deg)}92%{transform:rotate(4deg)}}
.g-guino .parpado.pi{animation:mcGuino 1s ease}
@keyframes mcGuino{0%,100%{transform:scaleY(0)}25%,70%{transform:scaleY(1)}}
.g-giro .cabeza-b{animation:mcGiro 1.3s ease-in-out}
@keyframes mcGiro{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}60%{transform:rotate(13deg)}}
.g-salto{animation:mcSalto .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes mcSalto{0%,100%{transform:translateY(0)}35%{transform:translateY(-22px) rotate(-8deg)}65%{transform:translateY(0) rotate(4deg)}82%{transform:translateY(-6px)}}
.g-mira .pupilas{animation:mcMira 1.6s ease-in-out}
@keyframes mcMira{0%,100%{transform:translateX(0)}25%,45%{transform:translateX(-4px)}60%,80%{transform:translateX(4px)}}
.g-cresta .cresta{animation:mcCresta .9s ease-in-out}
@keyframes mcCresta{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-8deg) scale(1.08)}40%{transform:rotate(6deg) scale(1.1)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.g-baile{animation:mcBaile 1.1s ease-in-out}
@keyframes mcBaile{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-10px) rotate(-10deg)}40%{transform:translateY(0) rotate(8deg)}60%{transform:translateY(-8px) rotate(-6deg)}80%{transform:translateY(0) rotate(4deg)}}
.g-canta .cabeza-g{animation:mcCanta .9s ease-in-out 2}
@keyframes mcCanta{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
.mc-nota{position:absolute;font:700 18px system-ui,sans-serif;color:#ff7a2e;pointer-events:none;z-index:2;animation:mcNota 1.8s ease-out forwards;text-shadow:0 2px 6px rgba(0,0,0,.25)}
@keyframes mcNota{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-46px) scale(1.15) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.parpado,.parpado-g,.cola{animation:none!important}}