@font-face {
    font-family: 'ArialBlackLocal';
    src: url('./fonts/ariblk.ttf') format('truetype');
    font-display: swap;
}

*{box-sizing:border-box}

body {
    margin: 0;
    min-height: 100dvh;
    background: #fff;
    color: #111;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* ── PANEL ── */
.panel {
    position: fixed;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    max-width: calc(100vw - 20px);
    padding: 6px 8px;
    background: rgba(255,255,255,.96);
    border: 1px solid #ddd;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    contain: layout style;
    transition: opacity .25s, transform .25s;
}

.panel.panel-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(calc(100% + 20px));
}

.panel input,
.panel textarea,
.panel button {
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.panel button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    min-width: 40px;
    cursor: pointer;
    touch-action: manipulation;
}

.panel button:not(.tab-btn){
    transition: background .15s;
}

.panel button.active {
    color: #fff;
    background: #111;
    border-color: #111;
}

.panel textarea {
    flex: 0 0 180px;
    width: 180px;
    min-height: 40px;
    max-height: 40px;
    padding: 8px 10px;
    resize: none;
    line-height: 1.2;
}

.panel input[type="range"] {
    flex: 0 0 auto;
    width: 120px;
    height: 40px;
    margin: 0 4px;
}

.panel input[type="color"] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 2px;
    cursor: pointer;
}

/* ── Pestañas ── */
.panel-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    align-items: center;
    padding-right: 2px;
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #999;
    cursor: pointer;
    opacity: .45;
    touch-action: manipulation;
    transition: opacity .18s, background .18s;
}

.tab-btn svg{width:20px;height:20px}
.tab-btn:hover{opacity:.75;color:#333}
.tab-btn.active{opacity:1;color:#111;background:#f0f0f0;border-color:#ddd}

/* ── Divisores ── */
.tab-divider,
.group-divider,
.hist-divider,
.zoom-divider {
    flex: 0 0 auto;
    background: #e0e0e0;
}
.tab-divider,.group-divider{width:1px;height:28px;margin:0 6px}
.hist-divider{width:1px;height:calc(100% - 16px);margin:auto 0;flex-shrink:0}
.zoom-divider{width:calc(100% - 16px);height:1px;margin:0 auto;flex-shrink:0}

/* ── Grupos ── */
.panel-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    animation: groupIn .2s ease;
    contain: layout style;
}
.panel-group[hidden]{display:none}

@keyframes groupIn {
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
}

/* ── Botones de acción ── */
.btn-action{background:#f1f3f5;height:40px}
.btn-action:hover{background:#e9ecef}
.btn-action svg{width:16px;height:16px}

.btn-export{background:#e8f5e9;border-color:#c8e6c9;font-weight:700;height:40px}
.btn-export:hover{background:#c8e6c9}

/* ── Pista de letra ── */
.letter-hint {
    font-size: .78rem;
    color: #aaa;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .2s;
}
.letter-hint.has-selection{color:#6c3fc5}

/* ── Mono ── */
.btn-mono{width:40px;padding:0;display:flex;align-items:center;justify-content:center}
.btn-mono svg{width:16px;height:16px;color:#888}
.btn-mono:hover svg{color:#e03}

/* ── Toggle adaptativa ── */
.adaptive-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 10px;
    background: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: .82rem;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}
.adaptive-toggle input{width:14px;height:14px;margin:0;cursor:pointer}

/* ── HISTORIAL FLOTANTE ── */
.history-float {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 10;
    display: flex;
    flex-direction: row;
    background: rgba(255,255,255,.94);
    border: 1px solid #ddd;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    overflow: hidden;
    contain: layout style;
}

.hist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s, opacity .15s;
}
.hist-btn svg{width:18px;height:18px}
.hist-btn:hover:not(:disabled){background:rgba(0,0,0,.06)}
.hist-btn:active:not(:disabled){background:rgba(0,0,0,.12)}
.hist-btn:disabled{opacity:.3;cursor:default}

/* ── TOGGLE PANEL ── */
.panel-toggle {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255,255,255,.94);
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s;
}
.panel-toggle svg{width:20px;height:20px;color:#555}
.panel-toggle:hover{background:#f1f3f5}
.panel-toggle:active{background:#e9ecef}

/* ── MODO POR LETRA ── */
.extrusion.letter-mode span{cursor:pointer;border-radius:3px}
.extrusion.letter-mode span:hover{outline:2px solid rgba(108,63,197,.35);outline-offset:1px}
.extrusion.letter-mode span.letter-selected{outline:2px solid #6c3fc5;outline-offset:1px}

/* ── ZOOM ── */
.zoom-control {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 52px;
    background: rgba(255,255,255,.94);
    border: 1px solid #ddd;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    overflow: hidden;
    contain: layout style;
}

.zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 0;
    border: none;
    background: transparent;
    color: #111;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s;
}
.zoom-btn:hover{background:rgba(0,0,0,.06)}
.zoom-btn:active{background:rgba(0,0,0,.12)}

/* ── ESCENARIO ── */
.stage {
    width: 100%;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 16px 88px;
    transform-origin: center center;
    will-change: transform;
    transition: padding .25s;
}
.stage.panel-hidden{padding-bottom:16px}

.extrusion {
    --front-color: #ff4d6d;
    --shadow-start: #ea405f;
    --shadow-end: #a51c29;
    max-width: min(92vw, 1400px);
    margin: 0;
    color: var(--front-color);
    font-family: 'ArialBlackLocal', Impact, sans-serif;
    font-size: clamp(4rem, 17vw, 10rem);
    font-weight: normal;
    letter-spacing: .02em;
    line-height: 1;
    text-align: center;
    text-rendering: geometricPrecision;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width:721px) and (pointer:fine) and (min-height:901px) {
    .extrusion{font-size:10rem}
    .panel textarea{flex:0 0 220px;width:220px}
}

/* ── MODAL DE FUENTES ── */
.font-modal::backdrop{display:none}
.font-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: backdropIn .2s ease;
}
.font-modal-backdrop[hidden]{display:none}

@keyframes backdropIn{from{opacity:0}to{opacity:1}}

.font-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 101;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 32px));
    max-height: min(600px, calc(100dvh - 80px));
    padding: 0;
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    overflow: hidden;
    animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
    contain: layout style;
}
.font-modal:not([open]){display:none}

@keyframes modalIn {
    from{opacity:0;transform:scale(.92) translateY(12px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}

.font-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.font-modal-title{font-size:1rem;font-weight:700;color:#111;letter-spacing:.01em}

.font-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f3f5;
    color: #555;
    cursor: pointer;
    transition: background .15s;
}
.font-modal-close svg{width:14px;height:14px}
.font-modal-close:hover{background:#e9ecef;color:#111}

.font-list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    overscroll-behavior: contain;
}

.font-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background .12s;
}
.font-list-item:hover{background:#f8f9fa}
.font-list-item.active{background:#f3eeff}

.font-list-item-preview {
    flex: 1;
    font-size: 1.45rem;
    line-height: 1.15;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.font-list-item-name{font-size:.72rem;color:#999;white-space:nowrap;flex-shrink:0}

.font-list-item.active .font-list-item-name{color:#6c3fc5;font-weight:600}
.font-list-item.active::after{content:'';width:7px;height:7px;border-radius:50%;background:#6c3fc5;flex-shrink:0}
.font-list-item[data-loading] .font-list-item-preview{color:#ccc;font-family:sans-serif}

.font-modal-footer{padding:12px 20px 16px;border-top:1px solid #f0f0f0;flex-shrink:0}

.font-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px dashed #ddd;
    border-radius: 10px;
    font-size: .85rem;
    color: #888;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.font-upload-label svg{width:16px;height:16px;flex-shrink:0}
.font-upload-label:hover{border-color:#6c3fc5;color:#6c3fc5;background:#f9f6ff}