/* fonts.css */
@font-face {
    font-family: 'Public Sans';
    src: url("/_assets/lib/PublicSans-VariableFont_wght.c44384e4a4eed1cac69eff62d23d156ee2f1986e42df1034119f9dc24e90e789.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Anton';
    src: url("/_assets/lib/Anton-Regular.28beb8f6542f642ba4143bd4a1d1cfc7be7b1dedc951096efd8e0942502ea1bf.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Manuka';
    src: url("/_assets/lib/Manuka-Black.c03abf3676472f125317628ebaf1c353df70891b20b324955048e8ca95d3aba6.woff2") format('woff2'), url("/_assets/lib/Manuka-Black.a31eaa4e6bdff852a071264847120bcb15eb76a503ecd9da515a16cfd7aaa904.woff") format('woff'),url("/_assets/lib/Manuka-Black.3b7a0ecdc9588c375898f36debfa05dbbb4d241f0d474d248153627d4da25361.otf") format('opentype');
    font-weight: normal !important;
    font-style: normal;
}

/* Pantalla de arranque (WASM) — animación suave, solo transform (GPU) */
.app-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 1.5rem;
    background: #1F1F1F;
}

.app-boot__logo {
    width: 5.5rem;
    max-width: 40vw;
    height: auto;
    display: block;
    opacity: 0.92;
    user-select: none;
    -webkit-user-drag: none;
}

/* El DOM vuelve siempre al estado de Blazor mientras la API confirma el orden. */
.bloque-container[data-sortable-id],
.sesion-drag-handle {
    touch-action: manipulation;
}

.bloques-contenedor > .bloque-container[data-sortable-id] {
    cursor: grab;
}

.bloques-contenedor > .bloque-container[data-sortable-id]:active {
    cursor: grabbing;
}

.sortable-chosen {
    cursor: grabbing !important;
}

.sortable-ghost {
    opacity: .35;
    border-radius: 8px;
}

.sortable-drag {
    opacity: .96;
    transform: translateZ(0);
    will-change: transform;
}

/* El origen sigue siendo la referencia visual hasta que se elige la intención. */
.layout-drag-source--active {
    box-sizing: border-box;
    opacity: 1 !important;
    border: 2px solid var(--text-color-highlight) !important;
    transition: none !important;
    outline: 2px solid color-mix(in srgb, var(--text-color-highlight) 72%, transparent);
    outline-offset: 3px;
    border-radius: 8px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--text-color-highlight) 14%, transparent);
}

.layout-drag-source--copy {
    opacity: 1 !important;
}

.layout-drag-source--move {
    box-sizing: border-box;
    opacity: 1 !important;
    pointer-events: none;
    border: 2px solid var(--text-color-highlight) !important;
    outline-color: var(--text-color-highlight) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.layout-drag-source--move > *,
.layout-drag-source--move::before,
.layout-drag-source--move::after {
    visibility: hidden !important;
}

.layout-drop-preview {
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    pointer-events: none;
    border-radius: 8px;
}

.layout-drop-preview--copy { cursor: copy !important; }
.layout-drop-preview--move { cursor: move !important; }
.layout-drop-preview--cancel { visibility: hidden !important; }

/* Los destinos vacíos conservan una superficie cómoda durante el gesto sin
   empujar "+ Nuevo" al iniciarlo. La reserva entra en el flujo solo cuando el
   bloque alcanza ese destino, anticipando entonces la disposición final. */
.layout-drag-active .bloques-contenedor.bloques-dia-vacio {
    min-height: 108px;
    margin-bottom: -108px;
    position: relative;
    z-index: 1;
}

.layout-drag-active .bloques-contenedor.bloques-dia-vacio.layout-drop-target--active {
    margin-bottom: 0;
}

.layout-drop-actions {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 72px;
    pointer-events: none;
    overflow: hidden;
    border: 2px solid var(--text-color-highlight);
    border-radius: inherit;
    background: color-mix(in srgb, var(--bg-container, #202020) 88%, transparent);
    backdrop-filter: blur(2px);
}

.layout-drop-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: .75rem;
    color: inherit;
    font-weight: 700;
    transition: background-color 100ms ease, color 100ms ease, transform 100ms ease;
}

.layout-drop-action + .layout-drop-action {
    border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.layout-drop-action--active {
    color: var(--text-color-highlight-t, #000);
    background: var(--text-color-highlight);
    transform: scale(1.015);
}

@media (pointer: coarse) {
    .bloque-container[data-sortable-id],
    .sesion-drag-handle {
        touch-action: pan-y;
    }

    .layout-drop-action {
        min-height: 56px;
        padding: .65rem .4rem;
    }
}
/* Hueco visual efímero para mover/copiar bloques; no forma parte del modelo ni del sortable. */
.bloque-layout-skeleton {
    min-height: 108px;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--bg-border, rgba(127, 127, 127, .25));
    border-radius: 8px;
    background: var(--bg-container, rgba(127, 127, 127, .08));
    overflow: hidden;
}

.bloque-layout-skeleton__line {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(127,127,127,.12) 25%, rgba(127,127,127,.28) 50%, rgba(127,127,127,.12) 75%);
    background-size: 200% 100%;
    animation: bloque-layout-loading 1.15s ease-in-out infinite;
}

.bloque-layout-skeleton__line--title { width: 55%; height: 14px; margin-top: 0; }
.bloque-layout-skeleton__line--short { width: 72%; }

@keyframes bloque-layout-loading {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bloque-layout-skeleton__line { animation: none; }
}