/* window-placeholder.css - Estilos para placeholders de carga de ventanas */

/* ✅ FIX 2026-01-14: Variables CSS para compensación de zoom (valores por defecto) */
/* v1.0.4c: --desktop-zoom-inverse-uniform = factor proporcional (min) para evitar distorsión */
:root {
    --desktop-zoom: 1;
    --desktop-zoom-inverse-x: 1;
    --desktop-zoom-inverse-y: 1;
    --desktop-zoom-inverse-uniform: 1;
    --desktop-scale-x: 1;
    --desktop-scale-y: 1;
}

/* build19: tarjeta de precarga espejo del muro físico (avicloud-hud drawBox):
   fondo oscuro + borde de color por tipo (--ph-color) + esquinas RECTAS + spinner + ROL + nombre.
   container-type:size → fuentes/spinner escalan con el tamaño de la ventana (cqmin). */
.window-placeholder {
    position: absolute;
    background: rgba(38, 38, 40, 0.94);
    border: 2px solid var(--ph-color, var(--color-primary, #1a73e8));
    border-radius: 0;            /* esquinas rectas: la ventana de la app es rectangular */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v1.0.4c: z=50 — debajo del rango de ventanas reales (100+) para que cuando
       la ventana se crea aparezca POR ENCIMA del placeholder. Si el placeholder
       no se cierra rápido o muestra error, la ventana lo tapa correctamente. */
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: placeholder-appear 0.25s ease-out;
    overflow: hidden;
    container-type: size;
}

.window-placeholder.error {
    border-color: #d32f2f;
}

.window-placeholder.fade-out {
    animation: placeholder-fade-out 0.3s ease-out forwards;
}

.window-placeholder.shake {
    animation: placeholder-shake 0.4s ease-out;
}

/* Contenido del placeholder */
/* v1.0.4c: usar UN solo factor proporcional (min de inverse-x/y) para evitar
   distorsión del spinner SVG (círculo) y del texto cuando desktop-zoom no es uniforme. */
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 4cqmin, 60px);
    padding: clamp(6px, 6cqmin, 80px);
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    /* build20: era scale(var(--desktop-zoom-inverse-uniform)). DOBLE COMPENSACION:
       workspace-viewport.js calcula ese factor como min(1/scaleX,1/scaleY), que con el muro
       reducido a ~0.08 da ~12.5. El texto quedaba de tamano FIJO en pantalla sin importar lo
       chica que fuera la caja, y overflow:hidden lo cortaba. El clamp(...cqmin) de mas abajo
       -relativo al propio placeholder, agregado despues- ya hace ese trabajo, y bien.
       Dos mecanismos compensando lo mismo: se retira el viejo. */
    transform: none;
    transform-origin: center center;
}

.placeholder-content.error {
    display: none;
}

/* Layout HORIZONTAL para ventanas anchas-bajas (ph-horizontal): spinner a la izquierda
   + bloque de texto a la derecha, igual que el layout horizontal de drawBox. */
.window-placeholder.ph-horizontal .placeholder-content {
    flex-direction: row;
    gap: clamp(8px, 4cqmin, 60px);
    text-align: left;
}
.window-placeholder.ph-horizontal .placeholder-textblock {
    align-items: flex-start;
}

/* Spinner SVG animado — escala con el tamaño de la ventana */
.placeholder-spinner {
    width: clamp(20px, 22cqmin, 240px);
    height: clamp(20px, 22cqmin, 240px);
    flex: 0 0 auto;
    color: var(--ph-color, var(--color-primary, #1a73e8));
}

.placeholder-spinner-svg {
    width: 100%;
    height: 100%;
}

/* Icono de error/warning */
.placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.placeholder-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Bloque de texto: ROL (color) + nombre (blanco) */
.placeholder-textblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 1.5cqmin, 24px);
    min-width: 0;
    max-width: 100%;
}

.placeholder-role {
    color: var(--ph-color, var(--color-primary, #1a73e8));
    font-size: clamp(9px, 13cqmin, 160px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.placeholder-name {
    color: #ffffff;
    font-size: clamp(8px, 10cqmin, 120px);
    font-weight: 500;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window-placeholder.error .placeholder-role {
    color: #ff8a80;
}
.window-placeholder.error .placeholder-name,
.window-placeholder.error .placeholder-text {
    color: #ffcdd2;
}

/* Animaciones */
@keyframes placeholder-appear {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes placeholder-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.92);
    }
}

@keyframes placeholder-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
}

/* ✅ FIX 2026-01-14: Removida regla que sobrescribía zoom compensation */
/* La regla anterior "transform: scale(1)" anulaba la compensación de zoom */
/* Ahora .placeholder-content usa scale(var(--desktop-zoom-inverse)) siempre */
/* build19: el escalado responsivo lo hace clamp(...cqmin) sobre cada elemento
   (container-type:size en .window-placeholder), reemplaza al @container manual. */