/*
 * smart-buttons.css — Mi.Plan v4
 * Grid 4 columnas + dense; si el último tile ancho queda solo a la izquierda, SmartTiles.adjustSizesForOrphanRow lo pasa a banner (span 4).
 * Tamaños por frecuencia (SmartTiles.js).
 */

/* Gaps horizontales: (n−1)×10px para n columnas */
.sb-grid,
.sb-loading {
    --sb-cols: 4;
    --sb-gap: 10px;
    --sb-gaps-x: calc((var(--sb-cols) - 1) * var(--sb-gap));
}

/* ── GRID ─────────────────────────────────────────────── */
.sb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: var(--sb-gap);
    width: 100%;
    container-type: inline-size;
}

/* ── TILE BASE ────────────────────────────────────────── */
.sb-tile {
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 10px 10px 12px;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.sb-tile:active {
    transform: scale(0.91);
    filter: brightness(0.78);
}

@keyframes sb-flip {
    0%   { transform: perspective(600px) rotateY(0deg);    filter: brightness(1); }
    40%  { transform: perspective(600px) rotateY(-14deg);  filter: brightness(1.1); }
    100% { transform: perspective(600px) rotateY(0deg);    filter: brightness(1); }
}
.sb-tile.sb-flipping {
    animation: sb-flip 0.18s ease-out;
    pointer-events: none;
}

.sb-tile i {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}

.sb-tile span {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    line-height: 1.2;
}

/* ── TAMAÑOS (en grid de 4 columnas) ───────────────────── */

/* 1×1 — < umbral de clics en SmartTiles */
.sb-1x1 {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1;
}

/* 2×1 — ancho mitad del grid; dos por fila sin hueco */
.sb-2x1 {
    grid-column: span 2;
    grid-row: span 1;
    flex-direction: column;
    aspect-ratio: 2 / 1;
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols));
    min-width: 0;
    padding: 10px 10px 10px 12px;
    box-sizing: border-box;
}
.sb-2x1 i { font-size: 1.2rem; }
.sb-2x1 span { font-size: 0.62rem; text-align: left; }

/* 2×2 — cuadrado grande */
.sb-2x2 {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1;
}
.sb-2x2 i { font-size: 1.5rem; }
.sb-2x2 span { font-size: 0.72rem; letter-spacing: 0.4px; }

/* Banner — ancho completo de la rejilla (3 o 4 columnas) */
.sb-3x1 {
    grid-column: 1 / -1;
    grid-row: span 1;
    flex-direction: row;
    gap: 18px;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 18px;
    aspect-ratio: auto;
    min-height: 3.25rem;
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.sb-3x1 i {
    font-size: 1.4rem;
    margin-bottom: 0;
    min-width: 1.4rem;
    text-align: center;
}
.sb-3x1 span {
    font-size: 0.78rem;
    text-align: left;
    letter-spacing: 0.6px;
    font-weight: 700;
}

/* ── LOADING ──────────────────────────────────────────── */
.sb-loading {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: var(--sb-gap);
    width: 100%;
    container-type: inline-size;
}
.sb-loading-tile {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    aspect-ratio: 1;
    animation: sb-pulse 1.4s ease-in-out infinite;
}
.sb-loading-tile:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 1;
    aspect-ratio: 4 / 1;
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols));
    height: auto;
}
.sb-loading-tile:nth-child(2) { grid-column: span 2; grid-row: span 2; animation-delay: 0.15s; }
.sb-loading-tile:nth-child(3) { animation-delay: 0.3s; }
.sb-loading-tile:nth-child(4) { animation-delay: 0.35s; }
.sb-loading-tile:nth-child(5) { grid-column: span 2; aspect-ratio: 2 / 1; min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols)); animation-delay: 0.1s; }
.sb-loading-tile:nth-child(6) { animation-delay: 0.25s; }
.sb-loading-tile:nth-child(7) { animation-delay: 0.2s; }

@keyframes sb-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.12; }
}

/* ── 3 columnas (inicio / launchpad) ─────────────────── */
.sb-grid--cols-3,
.sb-loading--cols-3 {
    --sb-cols: 3;
    --sb-gap: 4px;
    grid-template-columns: repeat(3, 1fr);
}

.sb-loading--cols-3 .sb-loading-tile:nth-child(1) {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols));
}

/* Tiles más grandes — estilo Windows Phone / Lumia */
.sb-grid--launchpad {
    --sb-gap: 4px;
}

.sb-grid--launchpad .sb-tile {
    padding: 12px 10px 12px 12px;
    border-radius: 2px;
}

.sb-grid--launchpad .sb-tile i {
    font-size: 1.45rem;
}

.sb-grid--launchpad .sb-tile span {
    font-size: 0.68rem;
    letter-spacing: 0.45px;
}

.sb-grid--launchpad.sb-grid--cols-3 .sb-1x1 {
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols));
}

.sb-grid--launchpad .sb-1x1 i { font-size: 1.35rem; }
.sb-grid--launchpad .sb-1x1 span { font-size: 0.62rem; }

.sb-grid--launchpad .sb-2x1 i { font-size: 1.55rem; }
.sb-grid--launchpad .sb-2x1 span { font-size: 0.72rem; }

.sb-grid--launchpad .sb-2x2 i { font-size: 2rem; }
.sb-grid--launchpad .sb-2x2 span { font-size: 0.82rem; }

.sb-grid--launchpad .sb-3x1 {
    padding: 16px 20px;
    min-height: calc((100cqw - var(--sb-gaps-x)) / var(--sb-cols) * 0.85);
}
.sb-grid--launchpad .sb-3x1 i { font-size: 1.75rem; }
.sb-grid--launchpad .sb-3x1 span { font-size: 0.88rem; }