/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: distribucion responsive de ventanas y guia de Clippy en celular.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 14: Ajustes para celular y tablet 1) Celular y tablet (< 1024px): las ventanas se abren una ARRIBA de la o...
 *   linea 24: 1) celular / tablet: ventanas superpuestas
 *   linea 33: 2) escritorio chico: igual que el monitor grande [menciona #w-cockpit, #w-dump, #w-earth, #w-exp y otras]
 *   linea 40: 3) guía de Clippy
 *   linea 65: la entrada (pop-in) va en el .clipr interno. Si se aplicaba sobre .clipt__c pisaba su translate y Clip...
 *   linea 69: saludo de bienvenida. Clippy queda apoyado en su base y el extremo superior del clip se mueve de lado...
 *   linea 71: el saludo ahora mueve solo la punta del gancho (W98ClippyWave en clippy-art.js); el cuerpo queda quieto.
 * ========================================================================= */
/* ==========================================================================
   Ajustes para celular y tablet
   1) Celular y tablet (< 1024px): las ventanas se abren una ARRIBA de la otra
      (todas comparten el mismo lugar; la activa queda adelante) en vez de
      apilarse hacia abajo.
   2) Escritorio con monitor chico (1024-1279px): mismo acomodo que en el
      monitor grande (2 columnas, MS-DOS / Skills / SAP a lo ancho).
   3) Guía de Clippy en celular/tablet (íconos que parpadean).
   ========================================================================== */

/* ---- 1) celular / tablet: ventanas superpuestas ---- */
@media (max-width: 1023px) {
  .workspace > .window:not([hidden]) {
    grid-area: 1 / 1;
    /* leve cascada para que se note que hay ventanas una arriba de otra (la ponen en JS) */
    margin: var(--cy, 0px) 0 0 var(--cx, 0px);
  }
}

/* ---- 2) escritorio chico: igual que el monitor grande ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #w-exp, #w-skills, #w-cockpit, #w-folder, #w-sap, #w-pa30, #w-se38, #w-dump { grid-column: 1 / -1; }
  #w-earth { grid-column: 1 / -1; }
}

/* ---- 3) guía de Clippy ---- */
.icon.is-blink { position: relative; }
.icon.is-blink img { animation: blink-img .9s steps(1, end) infinite; }
.icon.is-blink span { animation: blink-txt .9s steps(1, end) infinite; }
@keyframes blink-img { 50% { filter: brightness(.55) sepia(1) hue-rotate(190deg) saturate(4); } }
@keyframes blink-txt { 50% { color: #fff; background: #000080; outline: 1px dotted #ff0; } }
@media (prefers-reduced-motion: reduce) {
  .icon.is-blink img, .icon.is-blink span { animation: none; }
  .icon.is-blink span { color: #fff; background: #000080; outline: 1px dotted #ff0; }
}

.clipt { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.clipt__c, .clipt__b { position: fixed; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.clipt__c { transition: transform .9s cubic-bezier(.45, .05, .25, 1); z-index: 2; pointer-events: none; }
.clipt__c .clipr__img { display: block; width: 44px; height: 64px; }
@media (min-width: 601px) { .clipt__c .clipr__img { width: 64px; height: 93px; } }
.clipt__b { z-index: 3; transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .25s; width: max-content; max-width: min(260px, calc(100vw - 16px)); }
.clipt.is-jump .clipt__c, .clipt.is-jump .clipt__b, .clipt.is-scroll .clipt__c, .clipt.is-scroll .clipt__b { transition: none; }
.clipt__b.is-off { opacity: 0; pointer-events: none; }
.clipt__b p { margin: 0 0 4px; }
.clipt__b ul { margin: 6px 0 0; padding: 0; list-style: none; }
.clipt__b li { margin: 0 0 3px; }
.clipt__b li button, .clipt__up { font: inherit; }
.clipt__up { display: none; margin-top: 4px; }
.clipt.is-away .clipt__up { display: inline-block; }
/* la entrada (pop-in) va en el .clipr interno. Si se aplicaba sobre .clipt__c pisaba su translate y Clippy se veia "teletransportarse". */
.clipt.is-in .clipt__c .clipr { animation: clriIn .5s cubic-bezier(.2, 1.3, .4, 1); }
.clipt.is-out .clipt__c, .clipt.is-out .clipt__b { animation: clrOut .28s ease-in forwards; }

/* saludo de bienvenida. Clippy queda apoyado en su base y el extremo superior del clip se mueve de lado a lado como una mano
   que saluda (el cuerpo se dobla un poco, no solo gira). Para saludar mas o menos fuerte, cambiar los grados de los keyframes. */
/* el saludo ahora mueve solo la punta del gancho (W98ClippyWave en clippy-art.js); el cuerpo queda quieto. */
.clipr[data-mood=wave] .clipr__img { animation: none; }
@keyframes clrWave {
  0%   { transform: rotate(0) skewX(0); }
  10%  { transform: rotate(-5deg) skewX(4deg); }
  26%  { transform: rotate(16deg) skewX(-10deg); }
  42%  { transform: rotate(-14deg) skewX(9deg); }
  58%  { transform: rotate(15deg) skewX(-9deg); }
  74%  { transform: rotate(-10deg) skewX(6deg); }
  88%  { transform: rotate(4deg) skewX(-2deg); }
  100% { transform: rotate(0) skewX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .clipt__c, .clipt__b { transition: none; }
}