/* ==========================================================================
   CardMania - Generador de Cartas Pokémon Pro
   Estilos de la Interfaz y Renderizado de Cartas TCG
   ========================================================================== */

:root {
    --cg-bg: #09090e;
    --cg-panel-bg: rgba(18, 18, 26, 0.9);
    --cg-card-bg: #141420;
    --cg-border: rgba(255, 255, 255, 0.08);
    --cg-border-focus: var(--neon-cyan, #06b6d4);
    --cg-accent-violet: var(--neon-violet, #8b5cf6);
    --cg-accent-cyan: var(--neon-cyan, #06b6d4);
    --cg-text: #f1f5f9;
    --cg-text-muted: #94a3b8;
    --cg-input-bg: #1a1a28;
    --cg-radius: 12px;
}

/* Evitar que overflow-x corte el scroll sticky en navegadores modernos */
html, body {
    overflow-x: clip !important;
}

/* Contenedor principal de la aplicación (Más compacto para visualización inmediata) */
.cm-card-generator-app {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 15px 20px 60px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cg-text);
    box-sizing: border-box;
}

/* Header del Generador Compacto y Elegante */
.cg-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.cg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 8px;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.cg-title {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 900;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #ffffff 30%, var(--cg-accent-cyan) 70%, var(--cg-accent-violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.cg-subtitle {
    color: var(--cg-text-muted);
    font-size: 0.88rem;
    max-width: 680px;
    margin: 0 auto 12px;
    line-height: 1.5;
}

.cg-quick-actions-bar {
    display: none;
}

.cg-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid var(--cg-border);
    background: var(--cg-panel-bg);
    color: var(--cg-text);
}

.cg-btn-action:hover {
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    transform: translateY(-2px);
}

.cg-btn-primary {
    background: linear-gradient(135deg, var(--cg-accent-violet), var(--cg-accent-cyan));
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.cg-btn-primary:hover {
    color: #fff;
    box-shadow: 0 6px 25px rgba(6, 182, 212, 0.6);
    transform: translateY(-2px);
}

/* Layout en Tres Columnas Studio (Sidebar + Editor Central + Preview Sticky) */
.cg-workspace {
    display: grid;
    grid-template-columns: 220px minmax(360px, 1fr) 420px;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

/* ==========================================================================
   Columna 1: Sidebar de Navegación Vertical Studio
   ========================================================================== */
.cg-nav-sidebar {
    background: rgba(14, 14, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cg-radius);
    padding: 18px 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: -webkit-sticky;
    position: sticky;
    top: 85px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 50;
}

.cg-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cg-sidebar-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cg-sidebar-brand-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 6px var(--cg-accent-cyan));
}

.cg-sidebar-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #fff;
    text-transform: uppercase;
}

.cg-sidebar-pill {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: var(--cg-accent-cyan);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    letter-spacing: 1px;
}

.cg-tabs-nav-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
}

.cg-tabs-nav-vertical .cg-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 10px;
    color: var(--cg-text-muted);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.2, 0.85, 0.4, 1.2);
    box-sizing: border-box;
}

.cg-tabs-nav-vertical .cg-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(3px);
}

.cg-tabs-nav-vertical .cg-tab-btn.active {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.25);
    border-left: 3px solid var(--cg-accent-cyan);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.2), inset 0 0 12px rgba(6, 182, 212, 0.06);
    transform: translateX(3px);
}

.cg-tabs-nav-vertical .cg-tab-btn.active .cg-tab-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--cg-accent-cyan));
}

.cg-tab-icon {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cg-tab-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cg-sidebar-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cg-btn-sidebar-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cg-border);
    border-radius: 8px;
    color: var(--cg-text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-btn-sidebar-save:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2);
}

.cg-btn-sidebar-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: linear-gradient(135deg, var(--cg-accent-violet), var(--cg-accent-cyan));
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}

.cg-btn-sidebar-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(6, 182, 212, 0.5);
    filter: brightness(1.08);
}

.cg-sidebar-cart-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
}

.cg-sidebar-price-tag {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 900;
    color: #ffffff;
}

/* ==========================================================================
   Columna 2: Panel de Edición Central (Cards / Acordeones Studio)
   ========================================================================== */
.cg-editor-pane {
    min-width: 0;
    position: relative !important;
    z-index: 25 !important;
}

.cg-accordion-card {
    background: var(--cg-panel-bg);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cg-accordion-card:hover {
    border-color: rgba(6, 182, 212, 0.2);
}

.cg-accordion-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.cg-accordion-header:hover {
    background: rgba(255, 255, 255, 0.045);
}

.cg-accordion-icon {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.28);
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.15);
}

.cg-accordion-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.cg-accordion-chevron {
    color: var(--cg-text-muted);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cg-accordion-header:hover .cg-accordion-chevron {
    color: var(--cg-accent-cyan);
    background: rgba(6, 182, 212, 0.1);
}

.cg-accordion-card.collapsed .cg-accordion-chevron {
    transform: rotate(180deg);
}

.cg-accordion-card.collapsed .cg-accordion-body {
    display: none;
}

.cg-accordion-card.collapsed {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.cg-accordion-title {
    font-size: 1.12rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.cg-accordion-subtitle {
    font-size: 0.8rem;
    color: var(--cg-text-muted);
    margin: 0;
    line-height: 1.4;
}

.cg-accordion-body {
    padding: 22px;
}

/* Secciones del formulario continuas con navegación ScrollSpy */
.cg-tab-pane {
    display: block;
    margin-bottom: 28px;
    scroll-margin-top: 95px;
    position: relative;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cg-tab-pane:last-child {
    margin-bottom: 50px;
}

/* Resaltado sutil en la tarjeta activa en viewport */
.cg-tab-pane.is-in-view .cg-accordion-card {
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 10px 35px rgba(6, 182, 212, 0.12), 0 0 1px rgba(6, 182, 212, 0.5);
}

/* Barra de navegación al pie de cada sección para avanzar a la siguiente */
.cg-section-next-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 22px;
}

.cg-btn-next-section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: var(--cg-accent-cyan);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-btn-next-section:hover {
    background: rgba(6, 182, 212, 0.18);
    border-color: var(--cg-accent-cyan);
    transform: translateX(3px);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.cg-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cg-form-group {
    margin-bottom: 18px;
}

.cg-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.cg-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cg-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.cg-input, .cg-select, .cg-textarea {
    width: 100%;
    background: var(--cg-input-bg);
    border: 1px solid var(--cg-border);
    color: var(--cg-text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cg-input:focus, .cg-select:focus, .cg-textarea:focus {
    outline: none;
    border-color: var(--cg-accent-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.cg-select optgroup {
    background: #11111a;
    color: var(--cg-accent-cyan);
    font-weight: bold;
}

.cg-select option {
    background: #1a1a28;
    color: #f1f5f9;
}

.cg-textarea {
    resize: vertical;
    min-height: 70px;
}

/* Caja de Advertencia / Aviso sobre Foil Holográfico */
.cg-foil-warning-box {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.28);
    border-left: 3.5px solid var(--cg-accent-cyan);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cg-foil-warning-box.is-hidden {
    display: none;
}

.cg-foil-warning-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.cg-foil-warning-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px var(--cg-accent-cyan));
}

.cg-foil-warning-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--cg-accent-cyan);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.cg-foil-warning-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.cg-foil-warning-text em {
    color: #ffffff;
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Selector Visual de Tipos Elementales */
.cg-type-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.cg-type-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    background: var(--cg-input-bg);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cg-type-pill:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.cg-type-pill.active {
    border-color: var(--cg-accent-cyan);
    background: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.cg-type-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* Grupos por Generaciones */
.cg-generation-group {
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 12px 2px;
}

.cg-generation-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.cg-gen-badge {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
}

.cg-badge-current {
    background: rgba(6, 182, 212, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.cg-badge-modern {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.4);
}

.cg-badge-vintage {
    background: rgba(234, 179, 8, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.4);
}

.cg-badge-special {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid rgba(244, 114, 182, 0.4);
}

/* Selector de Plantilla de Carta */
.cg-template-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.cg-template-card-option {
    border: 1px solid var(--cg-border);
    background: var(--cg-input-bg);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.cg-template-card-option:hover {
    border-color: var(--cg-accent-cyan);
    transform: translateY(-3px);
}

.cg-template-card-option.active {
    border-color: var(--cg-accent-cyan);
    background: rgba(6, 182, 212, 0.15);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

.cg-template-icon-preview {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.cg-template-name {
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.cg-template-desc {
    font-size: 0.68rem;
    color: var(--cg-text-muted);
}

/* ==========================================================================
   SELECTOR DE FORMATO Y TAMAÑO DE IMPRESIÓN (ESTÁNDAR, A5, A4, A3)
   ========================================================================== */
.cg-size-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .cg-size-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.cg-size-card-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--cg-input-bg, #101020);
    border: 1px solid var(--cg-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 14px 10px 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    overflow: hidden;
}

.cg-size-card-option:hover {
    border-color: var(--cg-accent-cyan, #06b6d4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.cg-size-card-option.active {
    border-color: var(--cg-accent-cyan, #06b6d4);
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.12), rgba(168, 85, 247, 0.08));
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.4), 0 8px 24px rgba(6, 182, 212, 0.2);
}

.cg-size-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.2);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.4);
    text-transform: uppercase;
    line-height: 1.2;
}

.cg-size-icon-preview {
    font-size: 1.8rem;
    margin-top: 4px;
    margin-bottom: 6px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    transition: transform 0.25s ease;
}

.cg-size-card-option:hover .cg-size-icon-preview {
    transform: scale(1.1);
}

.cg-size-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cg-text, #ffffff);
    margin-bottom: 3px;
    line-height: 1.2;
}

.cg-size-dims {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cg-accent-cyan, #06b6d4);
    margin-bottom: 5px;
    line-height: 1.2;
}

.cg-size-desc {
    font-size: 0.65rem;
    color: var(--cg-text-muted, #94a3b8);
    line-height: 1.3;
    margin-bottom: 8px;
    flex-grow: 1;
}

.cg-size-price-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: #facc15;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.cg-size-card-option.active .cg-size-price-tag {
    background: rgba(250, 204, 21, 0.22);
    border-color: #facc15;
    color: #fef08a;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.25);
}

/* Badge de formato en el stage de previsualización 3D */
.cg-stage-size-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cg-stage-size-badge:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

/* Nota de precio de formato en el widget de compra */
.cg-price-size-note {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* Área de Carga de Imagen y Controles */
.cg-upload-box {
    border: 2px dashed rgba(6, 182, 212, 0.4);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: rgba(6, 182, 212, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    position: relative;
}

.cg-upload-box:hover, .cg-upload-box.dragover {
    border-color: var(--cg-accent-cyan);
    background: rgba(6, 182, 212, 0.08);
}

.cg-upload-icon {
    font-size: 2.2rem;
    color: var(--cg-accent-cyan);
    margin-bottom: 8px;
}

.cg-upload-text {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.cg-upload-hint {
    font-size: 0.75rem;
    color: var(--cg-text-muted);
}

.cg-image-adjustments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    background: rgba(0, 0, 0, 0.25);
    padding: 14px;
    border-radius: 8px;
    margin-top: 10px;
}

/* Informe de Tamaños y Formatos de Ilustración */
.cg-art-guide-box {
    margin: 14px 0;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cg-art-guide-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cg-art-guide-badge-pill {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 240, 255, 0.2);
    color: #00f0ff;
    letter-spacing: 0.5px;
}

.cg-art-guide-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.2px;
}

.cg-art-guide-subtitle {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0 0 12px;
}

.cg-art-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .cg-art-guide-grid {
        grid-template-columns: 1fr;
    }
}

.cg-art-guide-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.cg-art-guide-card.full-art-card {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.04);
}

.cg-art-guide-tag {
    font-size: 0.74rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.cg-art-guide-card.full-art-card .cg-art-guide-tag {
    color: #fca5a5;
}

.cg-art-guide-res {
    font-size: 1.05rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.cg-art-guide-card.full-art-card .cg-art-guide-res {
    color: #ff3b5c;
}

.cg-art-guide-res-hd {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

.cg-art-guide-ratio {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.cg-art-guide-points {
    margin: 0;
    padding-left: 16px;
    font-size: 0.68rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.cg-art-guide-points li {
    margin-bottom: 4px;
}

.cg-art-guide-footer-tip {
    font-size: 0.72rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border-left: 3px solid #38bdf8;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.4;
}

.cg-adjustments-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-adjustments-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cg-fit-mode-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 8px;
}

.cg-fit-buttons {
    display: flex;
    gap: 6px;
}

.cg-btn-fit {
    padding: 5px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cg-btn-fit:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: #00f0ff;
    color: #fff;
}

.cg-btn-fit.active {
    background: rgba(0, 240, 255, 0.2);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.cg-slider-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cg-slider-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cg-text-muted);
    display: flex;
    justify-content: space-between;
}

.cg-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #27273a;
    outline: none;
}

.cg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cg-accent-cyan);
    cursor: pointer;
    box-shadow: 0 0 8px var(--cg-accent-cyan);
}

/* Tarjeta de Ataque en el Editor */
.cg-attack-item-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cg-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
}

.cg-attack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cg-attack-number {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--cg-accent-cyan);
    text-transform: uppercase;
}

.cg-attack-cost-builder {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cg-cost-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--cg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    background: var(--cg-input-bg);
}

.cg-cost-bubble:hover {
    transform: scale(1.15);
}

.cg-cost-bubble-add {
    border-style: dashed;
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    font-weight: bold;
    font-size: 16px;
}

/* ==========================================================================
   Columna 3: Escenario 3D Sticky Perpetuo, Dock Flotante y Compra Pro
   ========================================================================== */
.cg-preview-pane {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 85px !important;
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 40 !important;
    box-sizing: border-box !important;
}

.cg-preview-actions-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    width: 100%;
    text-align: center;
}

.cg-preview-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: var(--cg-accent-cyan);
    text-transform: uppercase;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 3px 12px;
    border-radius: 20px;
}

.cg-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #06b6d4;
    box-shadow: 0 0 10px #06b6d4;
    animation: cgDotPulse 1.8s infinite;
}

@keyframes cgDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.cg-preview-hint {
    font-size: 0.74rem;
    color: var(--cg-text-muted);
}

/* Envoltura de Escenario 3D con Deslizador Vertical Integrado */
.cg-stage-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 10px 54px 10px 14px;
    box-sizing: border-box;
    transition: min-height 0.2s ease-out;
}

/* Widget de Control de Zoom Táctil de Alta Precisión */
.cg-vertical-zoom-widget {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(14, 14, 26, 0.95);
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 20px;
    padding: 8px 6px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(6, 182, 212, 0.15);
    z-index: 20;
    user-select: none;
}

/* Selector de modo Carta vs Foto */
.cg-zoom-mode-switch {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}

.cg-zoom-mode-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--cg-text-muted);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 0.2s ease;
}

.cg-zoom-mode-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.cg-zoom-mode-tab.active {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

/* Botones + y - */
.cg-zoom-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
    padding: 0;
}

.cg-zoom-btn:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    transform: scale(1.12);
}

.cg-zoom-btn:active {
    transform: scale(0.95);
}

/* Contenedor del track rotado */
.cg-zoom-track-container {
    position: relative;
    width: 32px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-vertical-range-input {
    position: absolute;
    width: 105px;
    height: 28px;
    transform: rotate(-90deg);
    transform-origin: center center;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

.cg-vertical-range-input:focus {
    outline: none;
}

.cg-vertical-range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

.cg-vertical-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--cg-accent-cyan);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    margin-top: -6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cg-vertical-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px var(--cg-accent-cyan);
}

.cg-vertical-range-input::-moz-range-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

.cg-vertical-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--cg-accent-cyan);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
    cursor: pointer;
}

/* Badge de porcentaje / multiplicador */
.cg-zoom-badge {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 10px;
    color: var(--cg-accent-cyan);
    font-size: 0.68rem;
    font-weight: 900;
    padding: 3px 6px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-zoom-badge:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: var(--cg-accent-cyan);
    transform: scale(1.08);
}

/* Dock Flotante de Herramientas Rápidas (Pill Toolbar) */
.cg-floating-dock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(14, 14, 24, 0.92);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 30px;
    padding: 7px 16px;
    margin: 16px auto 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 182, 212, 0.18);
}

.cg-dock-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.85, 0.4, 1.2);
    padding: 0;
}

.cg-dock-btn:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.4);
}

.cg-dock-btn:active {
    transform: translateY(0) scale(0.96);
}

.cg-dock-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.cg-dock-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #090912;
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    z-index: 100;
}

.cg-dock-btn:hover .cg-dock-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Escenario 3D de la carta (Tamaño optimizado para pantallas estándar y portátiles) */
.cg-card-3d-stage {
    perspective: 1200px;
    width: 295px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    user-select: none;
    transition: transform 0.15s ease-out;
}

.cg-card-flipper {
    position: relative;
    width: 100%;
    aspect-ratio: 63 / 88; /* Relación oficial de cartas TCG */
    transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.4, 1.2);
    transform-style: preserve-3d;
    cursor: grab;
}

.cg-card-flipper:active {
    cursor: grabbing;
}

.cg-card-flipper.flipped {
    transform: rotateY(180deg);
}

/* Cara Frontal y Cara Trasera */
.cg-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(6, 182, 212, 0.2);
    display: flex;
    flex-direction: column;
}

/* Cara Trasera - Fondo Negro Puro con Logo de CardMania Centrado (Forma exacta de carta) */
.cg-card-back {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
    transform: rotateY(180deg);
    background: #000000 !important;
    border: 11px solid #141724 !important;
    outline: 1px solid rgba(6, 182, 212, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: hidden !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 25px rgba(6, 182, 212, 0.25) !important;
}

.cg-card-back-center-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    background: #000000 !important;
}

.cg-card-back-center-wrap::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    pointer-events: none;
}

.cg-card-back-logo {
    width: 140px;
    height: auto;
    max-width: 75%;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.75)) drop-shadow(0 0 32px rgba(139, 92, 246, 0.55));
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

.cg-card-back:hover .cg-card-back-logo {
    transform: scale(1.06);
}

.cg-card-back-brand {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.cg-card-back-brand span {
    color: var(--cg-accent-cyan);
    text-shadow: 0 0 12px var(--cg-accent-cyan), 0 0 22px rgba(139, 92, 246, 0.8);
}

.cg-card-back-subtitle {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #94a3b8;
    text-transform: uppercase;
}

/* ==========================================================================
   RENDERIZADO DE LA CARTA FRONTAL
   ========================================================================== */
.cg-card-front {
    background: #e2e8f0;
    position: relative;
    color: #111;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 10px;
    box-sizing: border-box;
}

/* Capa de Efecto Brillo / Foil Holográfico */
.cg-card-foil-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease;
}

.cg-card-glare-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 26;
    opacity: 0;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 65%);
    mix-blend-mode: overlay;
    transition: opacity 0.2s ease;
}

/* Capa de Efectos Visuales TCG (Superposición de hasta 5 imágenes auténticas) */
.cg-card-effects-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    mix-blend-mode: normal;
    transition: opacity 0.2s ease;
}

/* Todas las capas de texto de la carta se muestran por encima de los efectos visuales */
.cg-card-header,
.cg-species-bar,
.cg-ability-box,
.cg-attacks-container,
.cg-attack-box,
.cg-stats-bar,
.cg-card-bottom,
.cg-card-content-overlay {
    position: relative;
    z-index: 5;
}

.cg-card-art-box {
    position: relative;
    z-index: 1;
}

.cg-card-effects-layer,
.cm-card-effects-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.cg-card-effects-layer .cg-effect-layer-item,
.cm-card-effects-layer .cg-effect-layer-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cg-card-effects-layer .cg-effect-layer-item img,
.cm-card-effects-layer .cg-effect-layer-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
}

/* ==========================================================================
   MODOS DE FOIL Y EFECTOS HOLOGRÁFICOS TCG
   ========================================================================== */

/* 1. Vintage Galaxy / Cosmos Holo (Estrellas de 4 puntas, remolinos y orbes cósmicos) */
.foil-galaxy {
    opacity: 0.72;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M40,22 Q40,35 27,35 Q40,35 40,48 Q40,35 53,35 Q40,35 40,22 Z' fill='rgba(255,255,255,0.9)'/%3E%3Ccircle cx='40' cy='35' r='2' fill='%23fff'/%3E%3Cpath d='M120,102 Q120,110 112,110 Q120,110 120,118 Q120,110 128,110 Q120,110 120,102 Z' fill='rgba(255,255,210,0.85)'/%3E%3Ccircle cx='120' cy='110' r='1.5' fill='%23fff'/%3E%3Cpath d='M135,24 Q135,30 129,30 Q135,30 135,36 Q135,30 141,30 Q135,30 135,24 Z' fill='rgba(190,235,255,0.8)'/%3E%3Cpath d='M15,128 Q15,135 8,135 Q15,135 15,142 Q15,135 22,135 Q15,135 15,128 Z' fill='rgba(255,200,240,0.8)'/%3E%3Cpath d='M85,35 A8,8 0 0,1 93,43 A12,12 0 0,1 81,55 A16,16 0 0,1 65,39 A20,20 0 0,1 85,19' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='85' r='4.5' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.2'/%3E%3Ccircle cx='25' cy='85' r='1.8' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='95' cy='130' r='3.5' fill='none' stroke='rgba(255,240,180,0.6)' stroke-width='1.2'/%3E%3Ccircle cx='95' cy='130' r='1.2' fill='%23fff'/%3E%3Ccircle cx='70' cy='80' r='2' fill='rgba(200,230,255,0.85)'/%3E%3Ccircle cx='145' cy='75' r='1.5' fill='rgba(255,255,255,0.65)'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E"),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 110, 0.65) 15%, rgba(244, 114, 182, 0.55) 32%, rgba(129, 140, 248, 0.5) 50%, rgba(52, 211, 153, 0.4) 68%, transparent 85%),
        linear-gradient(115deg, transparent 18%, rgba(255, 180, 220, 0.35) 32%, rgba(180, 240, 255, 0.45) 50%, rgba(255, 240, 180, 0.4) 66%, transparent 82%);
    background-size: 160px 160px, 220% 220%, 250% 250%;
    background-position: 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 2. Rainbow Rare (Iridiscencia Nácar Pastel con Micro-rejilla de Difracción) */
.foil-rainbow {
    opacity: 0.78;
    background-image: 
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 2px, transparent 2px, transparent 6px),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(
            calc(115deg + (var(--foil-pos-x, 50%) * 0.3deg)),
            rgba(255, 160, 175, 0.65) 0%,
            rgba(255, 205, 165, 0.65) 14%,
            rgba(255, 245, 170, 0.65) 28%,
            rgba(180, 245, 195, 0.65) 42%,
            rgba(175, 230, 255, 0.65) 56%,
            rgba(195, 190, 255, 0.65) 70%,
            rgba(245, 185, 250, 0.65) 85%,
            rgba(255, 160, 175, 0.65) 100%
        );
    background-size: 100% 100%, 200% 200%, 250% 250%;
    background-position: 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 3. Gold Secret Rare (Oro 24K Reluciente y Haz Especular Metálico) */
.foil-gold {
    opacity: 0.84;
    background-image: 
        radial-gradient(1.5px 1.5px at 20px 25px, #fff, transparent),
        radial-gradient(2px 2px at 70px 85px, #ffe066, transparent),
        radial-gradient(1.5px 1.5px at 125px 40px, #fff, transparent),
        repeating-linear-gradient(55deg, rgba(255, 240, 160, 0.15) 0px, rgba(255, 240, 160, 0.15) 2px, transparent 2px, transparent 6px),
        linear-gradient(130deg, 
            rgba(184, 134, 11, 0.25) 0%, 
            rgba(218, 165, 32, 0.6) 20%, 
            rgba(255, 250, 220, 0.95) 44%, 
            rgba(255, 215, 0, 0.9) 52%, 
            rgba(184, 134, 11, 0.6) 72%, 
            rgba(139, 101, 8, 0.3) 100%
        );
    background-size: 140px 140px, 140px 140px, 140px 140px, 100% 100%, 220% 220%;
    background-position: 0 0, 0 0, 0 0, 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 4. Brillo Teracristal (Prismas y Gemas Facetadas en Diamante) */
.foil-tera {
    opacity: 0.76;
    background-image: 
        repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px, transparent 18px),
        repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px, transparent 18px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 1px, transparent 1px, transparent 18px),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(103, 232, 249, 0.7) 22%, rgba(192, 132, 252, 0.65) 45%, rgba(244, 114, 182, 0.55) 68%, rgba(52, 211, 153, 0.4) 85%, transparent 100%),
        linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.75) 48%, rgba(167, 243, 208, 0.5) 52%, transparent 75%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 220% 220%, 250% 250%;
    background-position: 0 0, 0 0, 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 5. Radiante Cruzado (Crosshatch Diamante SwSh 45° y 135°) */
.foil-radiant {
    opacity: 0.75;
    background-image: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 2px, transparent 2px, transparent 12px),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 2px, transparent 2px, transparent 12px),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(110deg, transparent 15%, rgba(6, 182, 212, 0.65) 30%, rgba(255, 255, 255, 0.95) 48%, rgba(236, 72, 153, 0.7) 62%, rgba(234, 179, 8, 0.55) 76%, transparent 90%);
    background-size: 100% 100%, 100% 100%, 180% 180%, 250% 250%;
    background-position: 0 0, 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 6. Resplandor VMAX / VSTAR (Micro-Glitter y Polvo Cósmico de Alta Densidad) */
.foil-vmax {
    opacity: 0.8;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M20,10 L20,18 M16,14 L24,14' stroke='rgba(255,255,255,0.95)' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='14' r='1.2' fill='%23fff'/%3E%3Cpath d='M60,50 L60,58 M56,54 L64,54' stroke='rgba(244,114,182,0.9)' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='54' r='1.2' fill='%23fff'/%3E%3Ccircle cx='10' cy='45' r='1' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='45' cy='25' r='1.5' fill='rgba(103,232,249,0.85)'/%3E%3Ccircle cx='70' cy='15' r='0.8' fill='%23fff'/%3E%3Ccircle cx='35' cy='65' r='1.2' fill='rgba(250,204,21,0.8)'/%3E%3Ccircle cx='50' cy='75' r='0.9' fill='%23fff'/%3E%3C/svg%3E"),
        radial-gradient(1px 1px at 15px 35px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 55px 15px, #f472b6, transparent),
        radial-gradient(1px 1px at 75px 65px, #38bdf8, transparent),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(236, 72, 153, 0.7) 25%, rgba(139, 92, 246, 0.6) 50%, rgba(6, 182, 212, 0.45) 75%, transparent 95%),
        linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, 0.7) 48%, rgba(236, 72, 153, 0.55) 52%, transparent 80%);
    background-size: 80px 80px, 90px 90px, 90px 90px, 90px 90px, 220% 220%, 250% 250%;
    background-position: 0 0, 0 0, 0 0, 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 7. Poké Ball Holo (Patrón Oficial de Poké Balls Colección 151) */
.foil-pokeball {
    opacity: 0.76;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg transform='translate(35,35)'%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2.2'/%3E%3Cpath d='M-18,0 L-6,0 M6,0 L18,0' stroke='rgba(255,255,255,0.65)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='rgba(255,255,255,0.85)'/%3E%3C/g%3E%3Cg transform='translate(0,0)'%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.2'/%3E%3Cpath d='M0,-18 L0,-6 M0,6 L0,18' stroke='rgba(255,255,255,0.5)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3C/g%3E%3Cg transform='translate(70,0)'%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3C/g%3E%3Cg transform='translate(0,70)'%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3C/g%3E%3Cg transform='translate(70,70)'%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.3) 65%, transparent 85%),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.85) 0%, rgba(239, 68, 68, 0.45) 25%, rgba(59, 130, 246, 0.4) 55%, transparent 85%);
    background-size: 70px 70px, 220% 220%, 200% 200%;
    background-position: 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 8. Master Ball Holo (Ultra Rara Colección 151 con "M" y cápsula morada) */
.foil-masterball {
    opacity: 0.8;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 75 75'%3E%3Cg transform='translate(37.5,37.5)'%3E%3Ccircle cx='0' cy='0' r='20' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2.2'/%3E%3Cpath d='M-20,0 L-7,0 M7,0 L20,0' stroke='rgba(255,255,255,0.65)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='7' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.2'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(255,255,255,0.9)'/%3E%3Cellipse cx='-11' cy='-11' rx='4' ry='3' fill='rgba(244,114,182,0.7)' transform='rotate(-25 -11 -11)'/%3E%3Cellipse cx='11' cy='-11' rx='4' ry='3' fill='rgba(244,114,182,0.7)' transform='rotate(25 11 -11)'/%3E%3Ctext x='0' y='-7' text-anchor='middle' font-family='Arial Black, Impact, sans-serif' font-weight='900' font-size='9' fill='rgba(255,255,255,0.9)'%3EM%3C/text%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(192, 132, 252, 0.7) 25%, rgba(147, 51, 234, 0.6) 50%, rgba(236, 72, 153, 0.45) 75%, transparent 95%),
        linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.9) 50%, transparent 80%);
    background-size: 75px 75px, 220% 220%, 200% 200%;
    background-position: 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 9. Rayos de Energía / Lightning Slash (Haces Diagonales de Alto Voltaje EX / GX) */
.foil-beam {
    opacity: 0.78;
    background-image: 
        linear-gradient(115deg, 
            transparent 10%, 
            rgba(56, 189, 248, 0.7) 22%, 
            rgba(255, 255, 255, 0.98) 26%, 
            rgba(56, 189, 248, 0.7) 30%, 
            transparent 38%, 
            transparent 48%, 
            rgba(250, 204, 21, 0.75) 54%, 
            rgba(255, 255, 255, 1) 58%, 
            rgba(250, 204, 21, 0.75) 62%, 
            transparent 70%, 
            transparent 78%, 
            rgba(244, 63, 94, 0.7) 84%, 
            rgba(255, 255, 255, 0.95) 87%, 
            rgba(244, 63, 94, 0.7) 90%, 
            transparent 98%
        ),
        linear-gradient(65deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(56, 189, 248, 0.6) 30%, transparent 75%);
    background-size: 250% 250%, 200% 200%, 180% 180%;
    background-position: var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), calc(var(--foil-pos-x, 50%) * 0.8) calc(var(--foil-pos-y, 50%) * 0.8), var(--foil-pos-x, 50%) var(--foil-pos-y, 50%);
}

/* 10. Reverse Holo (Metalizado Espejo Tradicional con Estrías Cepilladas) */
.foil-reverse {
    opacity: 0.65;
    background-image: 
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 4px),
        radial-gradient(circle at var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), rgba(255, 255, 255, 0.75) 0%, transparent 60%),
        linear-gradient(105deg, 
            rgba(255, 255, 255, 0.05) 0%, 
            rgba(255, 255, 255, 0.25) 30%, 
            rgba(255, 255, 255, 0.95) 50%, 
            rgba(255, 255, 255, 0.25) 70%, 
            rgba(255, 255, 255, 0.05) 100%
        );
    background-size: 100% 100%, 180% 180%, 220% 100%;
    background-position: 0 0, var(--foil-pos-x, 50%) var(--foil-pos-y, 50%), var(--foil-pos-x, 50%) 0;
}

/* ==========================================================================
   PLANTILLAS DE CARTA
   ========================================================================== */

/* 1. ESCARLATA Y PÚRPURA (MODERNO - BORDE PLATEADO BRUSHED) */
.template-scarlet-violet {
    border: 11px solid #b8bfc9;
    border-radius: 16px;
    background: #d8dee8;
}

.template-scarlet-violet .cg-card-body-frame {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
    padding: 8px;
}

/* 2. POKÉMON TCG POCKET (MINIMALISTA MODERNO DE LA APP) */
.template-tcg-pocket {
    border: 8px solid #ffffff;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.template-tcg-pocket .cg-card-body-frame {
    background: transparent;
    border-radius: 16px;
    padding: 4px;
}

.template-tcg-pocket .cg-card-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 6px 10px;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.template-tcg-pocket .cg-card-art-box {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.template-tcg-pocket .cg-attack-box {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* 3. CLÁSICO VINTAGE GEN 1 (1999 BASE SET - BORDE AMARILLO) */
.template-gen1-classic {
    border: 12px solid #ffcb05;
    border-radius: 16px;
    background: #e6b800;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

.template-gen1-classic .cg-card-body-frame {
    background: #faf3dc;
    border-radius: 4px;
    padding: 6px;
}

.template-gen1-classic .cg-card-header {
    background: linear-gradient(180deg, #faf3dc 0%, #ecdba8 100%);
    border: 2px solid #8b7332;
    border-radius: 4px 4px 0 0;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.template-gen1-classic .cg-card-art-box {
    border: 4px solid #8b7332;
    border-radius: 4px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}

.template-gen1-classic .cg-card-hp {
    color: #cc0000;
    font-weight: 900;
}

/* 4. ESPADA Y ESCUDO (V / VMAX / VSTAR - OBSIDIANA) */
.template-sword-shield-v {
    border: 11px solid #181926;
    border-radius: 16px;
    background: #0f1015;
    color: #fff;
}

.template-sword-shield-v .cg-card-body-frame {
    background: #14151f;
    border-radius: 8px;
    padding: 6px;
}

.template-sword-shield-v .cg-card-header {
    background: linear-gradient(90deg, #181926 0%, #2a2c42 100%);
    border-left: 4px solid #38bdf8;
    color: #fff;
    border-radius: 6px;
    padding: 5px 8px;
}

.template-sword-shield-v .cg-card-name {
    color: #fff;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.template-sword-shield-v .cg-card-art-box {
    border: 2px solid #38bdf8;
    border-radius: 6px;
}

.template-sword-shield-v .cg-attack-name {
    color: #38bdf8;
}

.template-sword-shield-v .cg-card-bottom, 
.template-sword-shield-v .cg-species-bar,
.template-sword-shield-v .cg-attack-desc {
    color: #cbd5e1;
}

/* 5. SOL Y LUNA (GX - DETALLES AZUL FOIL) */
.template-sun-moon-gx {
    border: 11px solid #2563eb;
    border-radius: 16px;
    background: #1e3a8a;
    color: #fff;
}

.template-sun-moon-gx .cg-card-body-frame {
    background: #1e293b;
    border-radius: 8px;
    padding: 6px;
}

.template-sun-moon-gx .cg-card-name,
.template-sun-moon-gx .cg-attack-name {
    color: #fff;
}

.template-sun-moon-gx .cg-card-bottom,
.template-sun-moon-gx .cg-species-bar,
.template-sun-moon-gx .cg-attack-desc {
    color: #cbd5e1;
}

.template-sun-moon-gx .cg-gx-attack-bar {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6, #60a5fa);
    border: 1px solid #93c5fd;
    border-radius: 6px;
    color: #fff;
    padding: 4px 8px;
    font-weight: 900;
    margin-top: 4px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* 6. FULL ART / ILUSTRACIÓN ESPECIAL RARA (BORDELESS EDGE-TO-EDGE - SIN FONDOS) */
.template-full-art {
    border: 5px solid #b8bfc9 !important;
    border-radius: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(6, 182, 212, 0.25) !important;
    position: relative !important;
}

.template-full-art .cg-card-body-frame {
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Arte a sangre completa de fondo: 100% visible */
.template-full-art .cg-card-art-box {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: #000000 !important;
    overflow: hidden !important;
}

.template-full-art .cg-card-artwork {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--cg-art-fit, cover) !important;
}

/* Contenedor Overlay con viñeta ambiental continua (SIN CAJAS NI CORTES) */
.template-full-art .cg-card-content-overlay {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    padding: 10px 14px 8px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    /* Degradado sutil en los extremos que garantiza legibilidad sobre cualquier dibujo sin tapar el centro */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.22) 10%,
        transparent 22%,
        transparent 48%,
        rgba(0, 0, 0, 0.25) 68%,
        rgba(0, 0, 0, 0.65) 88%,
        rgba(0, 0, 0, 0.82) 100%
    ) !important;
}

.template-full-art .cg-card-content-overlay > * {
    pointer-events: auto !important;
}

/* ==========================================================================
   CABECERA SIN FONDO - Totalmente integrada en el arte original
   ========================================================================== */
.template-full-art .cg-card-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #ffffff !important;
    position: relative !important;
}

.template-full-art .cg-card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.template-full-art .cg-stage-group {
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.template-full-art .cg-stage-tag {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

.template-full-art .cg-evolves-from-badge {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 1px !important;
    font-size: 0.44rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px #000, 0 0 5px #000 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    font-style: italic !important;
}

.template-full-art .cg-card-name-wrap {
    overflow: visible !important;
}

.template-full-art .cg-card-name {
    color: #ffffff !important;
    font-size: var(--cg-name-size, 1.25rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.2px !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.85px #000000 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.7) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    line-height: 1.15 !important;
}

.template-full-art .cg-card-suffix {
    color: #ff2d55 !important;
    font-weight: 900 !important;
    font-size: var(--cg-suffix-size, 1.05rem) !important;
    margin-left: 3px !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.8px #000000 !important;
    text-shadow: 0 1px 3px #000000, 0 0 8px rgba(255, 45, 85, 0.8) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.template-full-art .cg-card-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.template-full-art .cg-hp-container {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}

.template-full-art .cg-hp-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--cg-hp-label-size, 0.68rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
}

.template-full-art .cg-card-hp {
    color: #ffffff !important;
    font-size: var(--cg-hp-size, 1.3rem) !important;
    font-weight: 900 !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.9px #000000 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.7) !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.template-full-art .cg-card-type-icon {
    width: var(--cg-type-icon-size, 25px) !important;
    height: var(--cg-type-icon-size, 25px) !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85)) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Espacio Central Completamente Libre y Abierto para la Ilustración */
.template-full-art .cg-full-art-spacer {
    flex: 1 !important;
    min-height: 120px !important;
    pointer-events: none !important;
}

/* Zona Inferior Flotante (SIN CAJAS) */
.template-full-art .cg-full-art-lower-zone {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: auto !important;
}

/* Subtítulo / Especie (Flotante discreto sin franja gris) */
.template-full-art .cg-species-bar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.55rem !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
    text-align: right !important;
    font-style: italic !important;
    text-shadow: 0 1px 2px #000, 0 0 5px #000 !important;
}

/* Habilidad Flotante sin caja */
.template-full-art .cg-ability-box {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 0 !important;
    padding: 2px 6px !important;
    margin-bottom: 3px !important;
    box-shadow: none !important;
}

.template-full-art .cg-ability-tag {
    background: #ef4444 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.template-full-art .cg-ability-name {
    color: #ffffff !important;
    font-weight: 800 !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.6px #000000 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.7) !important;
    overflow: visible !important;
}

.template-full-art .cg-ability-desc {
    color: #ffffff !important;
    text-shadow: 0 1px 2px #000000, 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.25 !important;
    overflow: visible !important;
}

/* Ataques Flotantes sin caja */
.template-full-art .cg-attacks-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.template-full-art .cg-attack-box {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 4px 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.template-full-art .cg-attack-box:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    padding-bottom: 5px !important;
}

.template-full-art .cg-attack-cost-icons {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) !important;
}

.template-full-art .cg-attack-name {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.8px #000000 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.7) !important;
    overflow: visible !important;
}

.template-full-art .cg-attack-damage {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1.35rem !important;
    paint-order: stroke fill !important;
    -webkit-text-stroke: 0.9px #000000 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.7) !important;
    overflow: visible !important;
}

.template-full-art .cg-attack-desc {
    color: #ffffff !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px #000000, 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    margin-top: 2px !important;
    overflow: visible !important;
}

/* Barra de Estadísticas Flotante sin caja (Con divisor sutil estilo oficial) */
.template-full-art .cg-stats-bar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0 !important;
    padding: 3px 0 2px 0 !important;
    margin-top: 2px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    color: #ffffff !important;
    box-shadow: none !important;
    gap: 4px !important;
}

.template-full-art .cg-stat-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    text-align: center !important;
}

.template-full-art .cg-stat-label {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.54rem !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
    letter-spacing: 0.5px !important;
}

.template-full-art .cg-stat-val {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
}

.template-full-art .cg-stat-custom-text {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
}

.template-full-art .cg-stat-primary-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
}

.template-full-art .cg-stat-none {
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 1px 2px #000 !important;
}

/* Pie de Carta Flotante */
.template-full-art .cg-card-bottom {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 0 0 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.template-full-art .cg-flavor-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-style: italic !important;
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 2px #000, 0 0 5px #000 !important;
    margin-bottom: 2px !important;
}

.template-full-art .cg-bottom-metadata {
    color: #ffffff !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px #000, 0 0 5px #000 !important;
}

/* 7. SERIE XY / MEGA EX (6ª GEN - BORDE AMARILLO MODERNO Y GRADIENTES DINÁMICOS) */
.template-xy-mega {
    border: 11px solid #ffd700;
    border-radius: 16px;
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
}
.template-xy-mega .cg-card-body-frame {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%);
    border-radius: 8px;
    padding: 7px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}
.template-xy-mega .cg-card-header {
    background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 2px solid #ca8a04;
    border-radius: 6px 6px 0 0;
    padding: 4px 8px;
}
.template-xy-mega .cg-card-name {
    color: #0f172a;
    font-weight: 900;
}
.template-xy-mega .cg-card-suffix {
    color: #e11d48;
    font-weight: 900;
    letter-spacing: 0.5px;
}
.template-xy-mega .cg-card-art-box {
    border: 2px solid #ca8a04;
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.template-xy-mega .cg-attack-box {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(202, 138, 4, 0.25);
    border-radius: 6px;
}

/* 8. NEGRO Y BLANCO (5ª GEN - BORDE SLATE TECNOLÓGICO) */
.template-black-white {
    border: 11px solid #334155;
    border-radius: 16px;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
}
.template-black-white .cg-card-body-frame {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-radius: 8px;
    padding: 7px;
    color: #f8fafc;
}
.template-black-white .cg-card-header {
    background: linear-gradient(90deg, #334155 0%, #1e293b 100%);
    border-left: 3px solid #64748b;
    border-radius: 6px;
    padding: 5px 8px;
    color: #fff;
}
.template-black-white .cg-card-name {
    color: #fff;
}
.template-black-white .cg-card-art-box {
    border: 2px solid #475569;
    border-radius: 6px;
}
.template-black-white .cg-attack-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}
.template-black-white .cg-attack-name {
    color: #e2e8f0;
}
.template-black-white .cg-card-bottom,
.template-black-white .cg-species-bar,
.template-black-white .cg-attack-desc {
    color: #cbd5e1;
}

/* 9. DIAMANTE Y PERLA (4ª GEN - MARCO PLATINO METÁLICO LV.X) */
.template-diamond-pearl {
    border: 11px solid #94a3b8;
    border-radius: 16px;
    background: linear-gradient(135deg, #cbd5e1 0%, #64748b 50%, #94a3b8 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.25);
}
.template-diamond-pearl .cg-card-body-frame {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    padding: 7px;
}
.template-diamond-pearl .cg-card-header {
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
    border-bottom: 2px solid #94a3b8;
    border-radius: 6px 6px 0 0;
    padding: 4px 8px;
}
.template-diamond-pearl .cg-card-art-box {
    border: 2px solid #94a3b8;
    border-radius: 6px;
}
.template-diamond-pearl .cg-card-name {
    color: #1e293b;
    font-weight: 900;
}
.template-diamond-pearl .cg-attack-box {
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

/* 10. SERIE EX / RUBÍ Y ZAFIRO (3ª GEN - BORDE PLATEADO HOLOGRÁFICO HOENN 2003) */
.template-gen3-ex {
    border: 11px solid #cbd5e1;
    border-radius: 16px;
    background: repeating-linear-gradient(45deg, #e2e8f0 0px, #e2e8f0 4px, #cbd5e1 4px, #cbd5e1 8px);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.template-gen3-ex .cg-card-body-frame {
    background: #f8fafc;
    border-radius: 6px;
    padding: 6px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.template-gen3-ex .cg-card-header {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1.5px solid #94a3b8;
    border-radius: 6px;
    padding: 4px 8px;
}
.template-gen3-ex .cg-card-name {
    color: #0f172a;
    font-weight: 900;
}
.template-gen3-ex .cg-card-suffix {
    color: #2563eb;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.5px;
}
.template-gen3-ex .cg-card-art-box {
    border: 2px solid #94a3b8;
    border-radius: 4px;
}

/* 11. NEO GENESIS / E-SERIES (2ª GEN - RETRO ÁMBAR / PERGAMINO) */
.template-gen2-neo {
    border: 12px solid #d97706;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}
.template-gen2-neo .cg-card-body-frame {
    background: #fef3c7;
    border-radius: 6px;
    padding: 6px;
}
.template-gen2-neo .cg-card-header {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #b45309;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 4px;
}
.template-gen2-neo .cg-card-art-box {
    border: 3px solid #b45309;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
.template-gen2-neo .cg-card-name {
    color: #451a03;
    font-weight: 900;
}
.template-gen2-neo .cg-card-hp {
    color: #b91c1c;
    font-weight: 900;
}

/* 12. CARTA DE ENTRENADOR (FORMATO TRAINER / OBJETO / PARTIDARIO) */
.template-trainer {
    border: 11px solid #3b82f6;
    border-radius: 16px;
    background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%);
}
.template-trainer .cg-card-body-frame {
    background: #f8fafc;
    border-radius: 8px;
    padding: 8px;
}
.template-trainer .cg-card-header {
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
}
.template-trainer .cg-card-header-left {
    width: 100%;
    justify-content: space-between;
}
.template-trainer .cg-stage-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.template-trainer .cg-card-name {
    color: #fff;
    font-size: var(--cg-name-size, 1.25rem);
}
.template-trainer .cg-card-header-right {
    display: none; /* Sin PS ni tipo */
}
.template-trainer .cg-stats-bar {
    display: none; /* Sin debilidad ni coste */
}
.template-trainer .cg-card-art-box {
    border: 2px solid #2563eb;
    border-radius: 6px;
    height: 190px;
}

/* 13. SECRETA DORADA (GOLD ULTRA RARE - ACABADO ORO MONOCROMÁTICO) */
.template-gold-secret {
    border: 11px solid #ca8a04;
    border-radius: 16px;
    background: linear-gradient(135deg, #fef08a 0%, #eab308 30%, #a16207 70%, #ca8a04 100%);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.35), inset 0 0 10px rgba(0,0,0,0.3);
}
.template-gold-secret .cg-card-body-frame {
    background: linear-gradient(180deg, #fef9c3 0%, #fef08a 35%, #eab308 100%);
    border-radius: 8px;
    padding: 8px;
}
.template-gold-secret .cg-card-header {
    background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(254, 240, 138, 0.9) 100%);
    border: 1.5px solid #a16207;
    border-radius: 6px;
    padding: 5px 8px;
    box-shadow: 0 2px 6px rgba(161, 98, 7, 0.2);
}
.template-gold-secret .cg-card-name {
    color: #713f12;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.template-gold-secret .cg-card-art-box {
    border: 2px solid #a16207;
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(161, 98, 7, 0.3);
}
.template-gold-secret .cg-attack-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(161, 98, 7, 0.3);
    border-radius: 6px;
}
.template-gold-secret .cg-attack-name {
    color: #713f12;
}
.template-gold-secret .cg-card-bottom,
.template-gold-secret .cg-species-bar,
.template-gold-secret .cg-attack-desc {
    color: #78350f;
}

/* ==========================================================================
   ESTRUCTURA INTERNA DE LA CARTA
   ========================================================================== */
.cg-card-body-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* Cabecera: Fase, Nombre, HP, Tipo con Auto-regulación Reactiva */
.cg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 4px;
    min-width: 0;
    gap: 4px;
}

.cg-card-header-left {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.cg-stage-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
}

.cg-stage-tag {
    font-size: var(--cg-stage-size, 0.62rem);
    font-weight: 900;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.cg-evolves-from-badge {
    font-size: var(--cg-evolves-size, 0.45rem);
    font-weight: 700;
    color: #64748b;
    font-style: italic;
    white-space: nowrap;
    line-height: 1;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cg-card-name-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.cg-card-name {
    font-size: var(--cg-name-size, 1.15rem) !important;
    font-weight: 900;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    flex-shrink: 1;
    line-height: 1.15;
}

.cg-card-name-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    margin-left: 4px;
    flex-shrink: 0;
}

.cg-card-name-icon-img {
    height: calc(var(--cg-name-size, 1.18rem) * 1.32);
    max-height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.cg-card-header-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

.cg-hp-container {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
    white-space: nowrap;
}

.cg-hp-label {
    font-size: var(--cg-hp-label-size, 0.62rem);
    font-weight: 800;
}

.cg-card-hp {
    font-size: var(--cg-hp-size, 1.25rem);
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
}

.cg-card-type-icon {
    width: var(--cg-type-icon-size, 24px);
    height: var(--cg-type-icon-size, 24px);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Placeholders de texto vacíos en la vista previa de la carta */
.cg-card-placeholder-text {
    opacity: 0.42;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}

/* Ilustración vacía con llamada a la acción interactiva */
.cg-card-empty-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    cursor: pointer;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
    user-select: none;
}

.cg-card-empty-art:hover {
    background: radial-gradient(circle, rgba(51, 65, 85, 0.95) 0%, rgba(15, 23, 42, 1) 100%);
    border-color: #00f0ff;
    box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.25);
}

.cg-empty-art-icon {
    font-size: 2.2rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.cg-empty-art-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    margin-bottom: 2px;
}

.cg-empty-art-sub {
    font-size: 0.65rem;
    color: #94a3b8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Caja de Ilustración */
.cg-card-art-box {
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.cg-card-artwork {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: var(--cg-art-fit, cover);
    pointer-events: none;
    transition: transform 0.05s ease-out;
}

/* Barra de Pokédex / Datos de la especie */
.cg-species-bar {
    text-align: center;
    font-size: 0.58rem;
    font-weight: 700;
    color: #475569;
    padding: 2px 4px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    font-style: italic;
}

/* Habilidad */
.cg-ability-box {
    border-left: 3px solid #ef4444;
    padding: 3px 6px;
    margin-bottom: 4px;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 0 4px 4px 0;
}

.cg-ability-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-ability-tag {
    background: #ef4444;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.cg-ability-name {
    font-size: 0.8rem;
    font-weight: 800;
}

.cg-ability-desc {
    font-size: 0.65rem;
    line-height: 1.25;
    margin: 2px 0 0;
    color: #334155;
}

/* Lista de Ataques */
.cg-attacks-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
    justify-content: center;
}

.cg-attack-box {
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
}

.cg-attack-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cg-attack-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-attack-cost-icons {
    display: flex;
    gap: 2px;
    align-items: center;
}

.cg-energy-symbol-small {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

.cg-custom-icon-emoji {
    font-size: 13.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.cg-custom-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.cg-card-type-icon.has-custom-icon {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e2e8f0 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(0, 0, 0, 0.35);
}

.cg-card-type-icon.has-custom-icon .cg-custom-icon-emoji {
    font-size: calc(var(--cg-type-icon-size, 24px) * 0.72);
}

.cg-card-type-icon.has-custom-icon .cg-custom-icon-img {
    width: 90%;
    height: 90%;
}

.cg-attack-name {
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.cg-attack-damage {
    font-size: 1.15rem;
    font-weight: 900;
}

.cg-attack-desc {
    font-size: 0.65rem;
    line-height: 1.2;
    margin: 2px 0 0;
    color: #334155;
}

/* Barra de Debilidad, Resistencia, Retirada */
.cg-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 3px 0;
    font-size: 0.62rem;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: 4px;
    gap: 4px;
}

.cg-stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    min-width: 0;
    text-align: center;
}

.cg-stat-label {
    font-size: 0.54rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cg-stat-val {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    line-height: 1.1;
}

/* Pequeño texto personalizado para debilidad / fortalezas / retirada */
.cg-stat-custom-text {
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1.15;
    color: #475569;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    letter-spacing: -0.15px;
    margin-top: 1px;
}

.cg-stat-primary-text {
    font-size: 0.56rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
}

.cg-stat-none {
    font-size: 0.52rem;
    color: #94a3b8;
    font-weight: 600;
}

/* Cajas de configuración de estadísticas en el editor */
.cg-stat-card-box {
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cg-stat-card-box:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 240, 255, 0.25);
}

.cg-stat-card-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-input-with-preset {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cg-input-with-preset .cg-select-preset {
    width: 140px;
    flex-shrink: 0;
}

.cg-input-with-preset .cg-input {
    flex: 1;
    min-width: 0;
}

/* Grupo de Etiqueta de Atributo (Debilidad, Resistencia, Retirada) */
.cg-stat-label-group {
    margin-bottom: 12px;
}

.cg-stat-label-group .cg-form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cg-label-hint {
    font-size: 0.72rem;
    color: #00f0ff;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
}

.cg-stat-label-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.cg-stat-label-inputs .cg-input-stat-label {
    flex: 1;
    min-width: 140px;
    font-weight: 600;
}

.cg-stat-label-inputs .cg-select-stat-preset {
    width: 210px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #cbd5e1;
    background-color: rgba(15, 23, 42, 0.7);
}

.cg-stat-values-row {
    margin-bottom: 6px;
    gap: 8px;
}

@media (max-width: 640px) {
    .cg-input-with-preset {
        flex-direction: column;
        align-items: stretch;
    }
    .cg-input-with-preset .cg-select-preset {
        width: 100%;
    }
    .cg-stat-label-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    .cg-stat-label-inputs .cg-select-stat-preset {
        width: 100%;
    }
    .cg-stat-values-row {
        flex-wrap: wrap;
    }
}

/* Toggle e Icono Personalizado para Tipo de Cabecera */
.cg-custom-type-icon-toggle-wrap {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px dashed rgba(0, 240, 255, 0.25);
    border-radius: 6px;
}

/* Subpaneles de Configuración de Iconos Personalizados (Debilidad, Resistencia, Retirada, Cabecera) */
.cg-custom-icon-subpanel {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 8px;
    animation: cgFadeInSubpanel 0.2s ease-out;
}

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

.cg-custom-icon-header {
    margin-bottom: 8px;
}

.cg-custom-icon-subhead {
    font-size: 0.74rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.2px;
}

.cg-custom-icon-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cg-custom-icon-col {
    flex: 1;
    min-width: 0;
}

.cg-form-sublabel {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 5px;
}

.cg-emoji-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cg-input-emoji {
    max-width: 140px;
    text-align: center;
    font-size: 1.1rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.cg-emoji-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cg-emoji-pill {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
}

.cg-emoji-pill:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    transform: scale(1.15);
}

.cg-emoji-pill.active {
    background: rgba(0, 240, 255, 0.25);
    border-color: #00f0ff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
    transform: scale(1.1);
}

.cg-icon-uploader-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cg-custom-icon-preview-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 50%;
    padding: 2px;
}

.cg-custom-icon-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.cg-btn-remove-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: #fff;
    border: 1px solid #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cg-btn-remove-icon:hover {
    background: #dc2626;
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .cg-custom-icon-body {
        flex-direction: column;
        gap: 12px;
    }
}

.template-black-white .cg-stat-custom-text,
.template-sword-shield-v .cg-stat-custom-text,
.template-sun-moon-gx .cg-stat-custom-text {
    color: #cbd5e1;
}

.template-black-white .cg-stat-primary-text,
.template-sword-shield-v .cg-stat-primary-text,
.template-sun-moon-gx .cg-stat-primary-text {
    color: #f8fafc;
}

/* Parte Inferior: Cita Pokédex, Expansión, Rareza, Ilustrador */
.cg-card-bottom {
    font-size: 0.55rem;
    line-height: 1.2;
    color: #64748b;
}

.cg-flavor-text {
    font-style: italic;
    margin: 0 0 3px;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    padding-bottom: 2px;
}

.cg-bottom-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cg-expansion-symbol-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
}

.cg-set-svg-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.cg-rarity-badge {
    font-size: 0.75rem;
    font-weight: 900;
}

/* ==========================================================================
   Panel de Guardado, Descarga y Compra (Sección 10 en Editor Central)
   ========================================================================== */
.cg-checkout-card {
    border-color: rgba(6, 182, 212, 0.45) !important;
    background: linear-gradient(180deg, rgba(14, 14, 26, 0.95) 0%, rgba(22, 16, 38, 0.95) 100%) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(6, 182, 212, 0.12) !important;
}

.cg-checkout-card .cg-accordion-header {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.25);
}

.cg-checkout-card .cg-accordion-icon {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

.cg-checkout-card .cg-export-box {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.cg-checkout-card .cg-export-box::before {
    display: none;
}

/* Botón de Compra Rápida Sticky bajo el Escenario 3D en Columna 3 */
.cg-preview-bottom-action {
    width: 100%;
    max-width: 310px;
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.cg-btn-add-cart-sticky {
    width: 100%;
    padding: 11px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cg-btn-add-cart-sticky:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.6), 0 0 20px rgba(139, 92, 246, 0.5);
}

.cg-btn-add-cart-sticky:active {
    transform: translateY(0);
}

.cg-btn-add-cart-sticky .cg-btn-cart-icon {
    font-size: 1.1rem;
}

.cg-btn-add-cart-sticky .cg-btn-cart-text {
    flex: 1;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cg-btn-add-cart-sticky .cg-btn-cart-badge {
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cg-export-box {
    width: 100%;
    margin-top: 20px;
    background: var(--cg-panel-bg, #0d0d14);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--cg-radius, 12px);
    padding: 22px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.08);
    position: relative;
    overflow: hidden;
}

.cg-export-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cg-accent-cyan, #06b6d4), var(--cg-accent-violet, #8b5cf6), var(--cg-accent-cyan, #06b6d4));
    background-size: 200% 100%;
    animation: cgLineGradient 4s linear infinite;
}

@keyframes cgLineGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Botón rápido en la barra superior */
.cg-btn-add-cart-quick {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important;
    animation: cgPulseCartBtn 2.5s infinite alternate !important;
}

.cg-btn-add-cart-quick:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.6) !important;
}

@keyframes cgPulseCartBtn {
    0% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); }
    100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.6); }
}

/* Sección de Compra de Carta Física */
.cg-buy-card-section {
    margin-bottom: 20px;
}

.cg-buy-header {
    margin-bottom: 18px;
}

.cg-buy-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid var(--cg-accent-cyan, #06b6d4);
    border-radius: 4px;
    color: var(--cg-accent-cyan, #06b6d4);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cg-buy-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.cg-buy-desc {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Fila de Precios y Cantidad */
.cg-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    gap: 15px;
}

.cg-qty-selector {
    text-align: left;
}

.cg-qty-label, .cg-price-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.cg-qty-stepper {
    display: flex;
    align-items: center;
    background: #09090d;
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.cg-qty-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #06b6d4;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.cg-qty-btn:hover {
    background: rgba(6, 182, 212, 0.2);
    color: #fff;
}

.cg-qty-input {
    width: 40px;
    text-align: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    padding: 0;
}

.cg-qty-input::-webkit-inner-spin-button,
.cg-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cg-price-display-box {
    text-align: right;
}

.cg-price-amount {
    font-size: 1.6rem;
    font-weight: 900;
    color: #06b6d4;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
    letter-spacing: -0.5px;
}

.cg-price-foil-note {
    display: block;
    font-size: 0.72rem;
    color: #f59e0b;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Botón Principal Añadir al Carrito */
.cg-btn-add-cart {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 25px rgba(139, 92, 246, 0.4), 0 0 15px rgba(6, 182, 212, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.cg-btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6), 0 0 25px rgba(6, 182, 212, 0.5);
    background: linear-gradient(135deg, #9333ea 0%, #0891b2 100%) !important;
}

.cg-btn-add-cart:active {
    transform: translateY(0);
}

.cg-btn-add-cart.is-loading {
    opacity: 0.8;
    cursor: wait;
}

.cg-btn-cart-icon {
    font-size: 1.2rem;
}

.cg-btn-cart-badge {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Garantías y Especificaciones */
.cg-guarantees-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.cg-guarantee-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: 600;
    text-align: left;
}

.cg-guarantee-icon {
    font-size: 0.9rem;
}

/* Divisor */
.cg-export-divider {
    position: relative;
    text-align: center;
    margin: 20px 0 16px;
}

.cg-export-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.cg-export-divider span {
    position: relative;
    background: var(--cg-panel-bg, #0d0d14);
    padding: 0 12px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #64748b;
    text-transform: uppercase;
}

.cg-download-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Modal Cyberpunk de Confirmación de Carrito
   ========================================================================== */
.cg-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cgModalFadeIn 0.3s ease-out forwards;
}

@keyframes cgModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cg-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #0b0b12;
    border: 1px solid var(--cg-accent-cyan, #06b6d4);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.3), inset 0 0 20px rgba(139, 92, 246, 0.15);
    animation: cgModalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cgModalScaleUp {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.cg-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.cg-modal-close:hover {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.cg-modal-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    border-radius: 4px;
    color: #10b981;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cg-modal-title {
    margin: 0 0 18px;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}

.cg-modal-card-summary {
    display: flex;
    gap: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 22px;
    align-items: center;
}

.cg-modal-thumb-wrap {
    flex: 0 0 85px;
    height: 118px;
    border-radius: 6px;
    overflow: hidden;
    background: #181824;
    border: 1px solid rgba(6, 182, 212, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.cg-modal-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cg-modal-card-info {
    flex: 1;
    text-align: left;
}

.cg-modal-card-name {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
}

.cg-modal-detail-row {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.cg-modal-detail-row strong {
    color: #f1f5f9;
}

.cg-modal-price-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    margin-top: 6px;
}

.cg-modal-price {
    color: var(--cg-accent-cyan, #06b6d4) !important;
    font-size: 1.1rem;
    font-weight: 900 !important;
}

.cg-modal-toploader-note {
    font-size: 0.72rem;
    color: #10b981;
    margin-top: 6px;
    font-weight: 600;
}

/* Los 3 Botones del Modal */
.cg-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cg-modal-btn {
    width: 100%;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Botón 1: Ver Carrito */
.cg-modal-btn-cart {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.cg-modal-btn-cart:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.8);
    transform: translateY(-2px);
}

/* Botón 2: Seguir Diseñando */
.cg-modal-btn-continue {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cg-modal-btn-continue:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Botón 3: Ir a la Tienda */
.cg-modal-btn-store {
    background: rgba(6, 182, 212, 0.1);
    color: var(--cg-accent-cyan, #06b6d4);
    border: 1px solid var(--cg-accent-cyan, #06b6d4);
}

.cg-modal-btn-store:hover {
    background: var(--cg-accent-cyan, #06b6d4);
    color: #000;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    transform: translateY(-2px);
}

/* ==========================================================================
   Modal Cyberpunk de Autenticación para Descargar Carta
   ========================================================================== */
.cg-auth-modal-dialog {
    max-width: 440px;
    text-align: center;
}

.cg-auth-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-auth-tab-btn {
    flex: 1;
    padding: 9px 12px;
    background: transparent;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.78rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
}

.cg-auth-tab-btn:hover {
    color: #fff;
}

.cg-auth-tab-btn.active {
    background: var(--cg-accent-cyan, #06b6d4);
    color: #000;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}

.cg-auth-tab-btn#cg-auth-tab-register.active {
    background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.cg-auth-form-group {
    margin-bottom: 14px;
    text-align: left;
}

.cg-auth-form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #06b6d4;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'JetBrains Mono', monospace;
}

.cg-auth-form-group input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cg-auth-form-group input:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.cg-auth-alert {
    display: none;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(239, 68, 68, 0.15);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    color: #fca5a5;
    font-size: 0.8rem;
    text-align: left;
    line-height: 1.4;
}

.cg-auth-alert.is-success {
    background: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
    color: #6ee7b7;
}

@media (max-width: 600px) {
    .cg-pricing-row {
        flex-direction: column;
        align-items: stretch;
    }
    .cg-price-display-box {
        text-align: left;
    }
    .cg-guarantees-grid {
        grid-template-columns: 1fr;
    }
    .cg-modal-card-summary {
        flex-direction: column;
        text-align: center;
    }
    .cg-modal-card-info {
        text-align: center;
    }
    .cg-modal-thumb-wrap {
        margin: 0 auto;
    }
}

/* Modal de impresión / guía de corte */
/* Modal de impresión / guía de corte (Soporta frontal y reverso) */
@media print {
    body * {
        visibility: hidden !important;
    }
    .cg-card-front, .cg-card-front * {
        visibility: visible !important;
    }
    .cg-card-flipper.flipped .cg-card-front,
    .cg-card-flipper.flipped .cg-card-front * {
        visibility: hidden !important;
    }
    .cg-card-flipper.flipped .cg-card-back,
    .cg-card-flipper.flipped .cg-card-back * {
        visibility: visible !important;
    }
    .cg-card-front,
    .cg-card-flipper.flipped .cg-card-back {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 63mm !important;
        height: 88mm !important;
        box-shadow: none !important;
        border: 2px solid #000 !important;
    }
}

/* ==========================================================================
   14. ESTILOS DE CARTAS 3D LENTICULARES (DOBLE ILUSTRACIÓN EN MOVIMIENTO)
   ========================================================================== */

/* Capas de Arte Lenticular en la Carta */
.cg-card-art-box {
    --lenticular-opacity: 0;
}

.cg-card-artwork.cg-art-a {
    z-index: 1;
    position: absolute;
    inset: 0;
}

.cg-card-artwork.cg-art-b {
    z-index: 2;
    position: absolute;
    inset: 0;
    opacity: var(--lenticular-opacity, 0);
    will-change: opacity, transform;
    pointer-events: none;
}

.cg-card-empty-art.cg-art-a {
    z-index: 1;
    position: absolute;
    inset: 0;
}

.cg-card-empty-art.cg-art-b {
    z-index: 2;
    position: absolute;
    inset: 0;
    opacity: var(--lenticular-opacity, 0);
    background: rgba(168, 85, 247, 0.15);
    border: 2px dashed rgba(168, 85, 247, 0.4);
}

/* Textura óptica lenticular con estrías cilíndricas */
.cg-lenticular-lens-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px,
        transparent 3.5px
    );
    mix-blend-mode: overlay;
    opacity: 0.7;
}

.cg-lenticular-lens-layer.cg-lens-vertical {
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px,
        transparent 3.5px
    );
}

/* Indicador de Carta Lenticular en Escenario */
.cg-lenticular-badge-indicator {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 5;
    background: rgba(15, 23, 42, 0.88);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.55);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Panel de Configuración Lenticular en Tab 3 */
.cg-lenticular-section {
    margin-top: 20px;
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.35), rgba(15, 23, 42, 0.5));
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cg-lenticular-toggle-card {
    cursor: pointer;
}

.cg-lenticular-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.cg-lenticular-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: #a855f7;
    cursor: pointer;
}

.cg-lenticular-toggle-content {
    flex: 1;
}

.cg-lenticular-toggle-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.cg-lenticular-toggle-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #f3e8ff;
    letter-spacing: 0.3px;
}

.cg-lenticular-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    background: linear-gradient(90deg, #a855f7, #06b6d4);
    color: #fff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.cg-lenticular-toggle-desc {
    margin: 0;
    font-size: 0.78rem;
    color: #cbd5e1;
    line-height: 1.35;
}

/* Subpanel Desplegable */
.cg-lenticular-subpanel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    animation: cgFadeIn 0.25s ease-out;
}

.cg-lenticular-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: #e0f2fe;
    line-height: 1.4;
}

.cg-lenticular-notice .cg-notice-icon {
    font-size: 1rem;
}

/* Caja de Carga para Imagen B */
.cg-upload-box-lenticular {
    border-color: rgba(168, 85, 247, 0.4) !important;
    background: rgba(168, 85, 247, 0.05) !important;
    padding: 18px !important;
}

.cg-upload-box-lenticular:hover {
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.12) !important;
}

/* Preview de Imagen B cargada */
.cg-lenticular-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.cg-lenticular-preview-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.cg-lenticular-preview-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cg-lenticular-preview-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f3e8ff;
}

.cg-lenticular-preview-sub {
    font-size: 0.72rem;
    color: #94a3b8;
}

.cg-btn-remove-lenticular {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 800;
    transition: all 0.2s ease;
}

.cg-btn-remove-lenticular:hover {
    background: #ef4444;
    color: #fff;
    transform: scale(1.05);
}

.cg-lenticular-adjustments {
    margin-top: 12px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Botón de Demostración Automática (Auto-Swing) */
.cg-auto-swing-wrap {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cg-btn-auto-swing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #e0e7ff;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cg-btn-auto-swing:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(6, 182, 212, 0.35));
    border-color: #a855f7;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.cg-btn-auto-swing.is-active {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border-color: #c084fc;
    color: #fff;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
    animation: cgPulseGlow 1.8s infinite;
}

@keyframes cgPulseGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.85); }
}

.cg-auto-swing-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
}

/* Nota de Precio Lenticular */
.cg-price-lenticular-note {
    font-size: 0.75rem;
    color: #c084fc;
    font-weight: 700;
    margin-left: 6px;
    display: inline-block;
}

/* ==========================================================================
   15. AVISOS DE INCOMPATIBILIDAD FOIL HOLOGRÁFICO CON CARTA 3D LENTICULAR
   ========================================================================== */

/* Disclaimer sutil en el toggle de la carta 3D */
.cg-lenticular-foil-disclaimer {
    margin-top: 8px;
    font-size: 0.73rem;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1.4;
}

.cg-lenticular-foil-disclaimer strong {
    color: #fbbf24;
}

/* Alerta destacada en el subpanel 3D Lenticular */
.cg-lenticular-foil-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: #fef3c7;
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
}

.cg-lenticular-foil-warning .cg-warning-icon {
    font-size: 1.15rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.cg-lenticular-foil-warning .cg-warning-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cg-lenticular-foil-warning .cg-warning-body strong {
    color: #fbbf24;
    font-weight: 800;
}

/* Alerta en Pestaña 1 cuando el Foil está bloqueado por 3D */
.cg-foil-lenti-blocked-box {
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(30, 27, 75, 0.4)) !important;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    animation: cgFadeIn 0.25s ease-out;
}

.cg-foil-lenti-blocked-box .cg-foil-warning-title {
    color: #fbbf24 !important;
    font-weight: 800;
    font-size: 0.82rem;
}

.cg-foil-lenti-blocked-box .cg-foil-warning-text {
    color: #fde68a !important;
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 4px 0 0 0;
}

/* Estado deshabilitado del selector de Foil */
#cg-input-foil:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #94a3b8 !important;
}



/* ==========================================================================
   Responsive Breakpoints para el Layout Studio de 3 Columnas
   ========================================================================== */
@media (max-width: 1280px) {
    .cg-workspace {
        grid-template-columns: 200px minmax(320px, 1fr) 390px;
        gap: 16px;
    }
    .cg-card-3d-stage {
        width: 275px;
    }
    .cg-vertical-zoom-widget {
        right: 0px;
    }
}

@media (max-width: 1060px) {
    .cg-workspace {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cg-nav-sidebar {
        position: static;
        width: 100%;
        box-sizing: border-box;
    }
    .cg-tabs-nav-vertical {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
        gap: 8px;
    }
    .cg-tabs-nav-vertical .cg-tab-btn {
        width: auto;
        white-space: nowrap;
        flex-shrink: 0;
        border-left: 1px solid transparent;
    }
    .cg-tabs-nav-vertical .cg-tab-btn.active {
        border-left: 1px solid var(--cg-accent-cyan);
    }
    .cg-sidebar-footer-actions {
        display: none;
    }
    .cg-preview-pane {
        position: static !important;
        order: -1;
        margin-bottom: 15px;
    }
}

@media (max-width: 520px) {
    .cg-card-3d-stage {
        width: 270px;
    }
    .cg-stage-wrapper {
        padding-right: 32px;
    }
    .cg-vertical-zoom-widget {
        right: -8px;
    }
    .cg-floating-dock {
        gap: 5px;
        padding: 5px 10px;
    }
    .cg-dock-btn {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .cg-accordion-header {
        padding: 12px 14px;
    }
    .cg-accordion-body {
        padding: 14px;
    }
}

/* ==========================================================================
   Módulo de Efectos Visuales TCG (Hasta 5)
   ========================================================================== */
.cg-accordion-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.cg-effects-count-badge {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.8px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

.cg-effects-count-badge.is-max {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.cg-effects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cg-effects-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cg-effect-filter-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cg-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-effect-filter-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cg-effect-filter-pill.active {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}

.cg-effects-controls-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: rgba(14, 14, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .cg-effects-controls-row {
        grid-template-columns: 1fr;
    }
}

.cg-effects-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cg-effects-val-badge {
    color: var(--cg-accent-cyan);
    font-weight: 800;
    font-size: 0.8rem;
}

.cg-effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    max-height: 540px;
    overflow-y: auto;
    padding: 4px;
}

/* Tarjeta individual de Efecto Visual (Estilo mini-carta como en la referencia) */
.cg-effect-card {
    position: relative;
    aspect-ratio: 63 / 88;
    background: #181e34;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.2, 0.85, 0.4, 1.2), border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.cg-effect-card:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(6, 182, 212, 0.3);
}

.cg-effect-card.active {
    border-color: var(--cg-accent-cyan);
    background: #1f2744;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.5), inset 0 0 12px rgba(6, 182, 212, 0.15);
}

.cg-effect-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--cg-accent-cyan);
    color: #050b14;
    font-weight: 900;
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.8);
    z-index: 5;
}

.cg-effect-card-preview {
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #12172b;
    border-radius: 8px;
}

.cg-effect-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
}

.cg-effect-card-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #f8fafc;
    text-transform: uppercase;
    padding: 6px 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-effect-card.active .cg-effect-card-label {
    color: var(--cg-accent-cyan);
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

/* Caja de subida de efecto personalizado */
.cg-custom-effect-upload-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(14, 14, 26, 0.7);
    border: 1px dashed rgba(6, 182, 212, 0.35);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 12px;
}

.cg-custom-effect-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cg-custom-effect-icon {
    font-size: 1.5rem;
}

.cg-custom-effect-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px;
}

.cg-custom-effect-desc {
    font-size: 0.73rem;
    color: var(--cg-text-muted);
    margin: 0;
}

.cg-btn-custom-effect-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid var(--cg-accent-cyan);
    color: var(--cg-accent-cyan);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cg-btn-custom-effect-upload:hover {
    background: var(--cg-accent-cyan);
    color: #050b14;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.5);
}

/* ==========================================================================
   INSIGNIAS Y TAGS TCG (ESTILO OFICIAL Y PERSONALIZADO)
   ========================================================================== */

.cg-bold-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0;
}

.cg-group-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cg-btn-link-sm {
    background: none;
    border: none;
    color: #f87171;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color 0.15s ease;
}

.cg-btn-link-sm:hover {
    color: #ef4444;
}

.cg-badge-category-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.cg-badge-category-filters::-webkit-scrollbar {
    display: none;
}

.cg-badge-cat-btn {
    background: #1e2640;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cg-badge-cat-btn:hover {
    background: #283354;
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.2);
}

.cg-badge-cat-btn.active {
    background: #4f46e5;
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.cg-badge-tag-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 10px 4px;
    margin-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cg-badge-tag-pills::-webkit-scrollbar {
    height: 6px;
}

.cg-badge-tag-pills::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.cg-badge-tag-pill {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    background: #252e4d;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.cg-badge-tag-pill:hover {
    background: #2e3960;
    border-color: rgba(99, 102, 241, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cg-badge-tag-pill.active {
    background: #2f3c6e;
    border-color: #6366f1;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.5), inset 0 0 0 1px #818cf8;
    transform: translateY(-2px);
}

.cg-badge-tag-pill img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: transform 0.2s ease;
}

.cg-badge-tag-pill:hover img {
    transform: scale(1.06);
}

/* Iconos de Nombre / ex Pills Selector */
.cg-name-icons-pills {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 4px 12px 4px;
    margin-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cg-name-icon-pill {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    background: #1d2542;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.cg-name-icon-pill:hover {
    background: #253158;
    border-color: rgba(129, 140, 248, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.cg-name-icon-pill.active {
    background: #273462;
    border-color: #6366f1;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.6), inset 0 0 0 1.5px #818cf8;
    transform: translateY(-2px);
}

.cg-name-icon-pill img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

.cg-name-icon-pill:hover img {
    transform: scale(1.08);
}

.cg-dropzone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.cg-badge-nuevo {
    background: #7c83fd;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(124, 131, 253, 0.35);
}

.cg-dropzone-box {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    padding: 26px 20px;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cg-dropzone-box:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
}

.cg-dropzone-box.dragover {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.cg-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 2px;
}

.cg-btn-dropzone {
    background: #2b3558;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin: 2px 0;
}

.cg-btn-dropzone:hover {
    background: #384674;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.cg-dropzone-sub {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
    font-weight: 400;
}

.cg-dropzone-preview {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(6, 182, 212, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 360px;
}

.cg-dropzone-preview img {
    max-height: 44px;
    max-width: 140px;
    object-fit: contain;
    border-radius: 4px;
}

.cg-btn-remove-custom {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cg-btn-remove-custom:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #ffffff;
    border-color: #ef4444;
}

.cg-custom-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 22px 0;
}

/* ==========================================================================
   CAPAS DE SUPERPOSICIÓN DE TAGS E INSIGNIAS EN LA CARTA POKÉMON
   ========================================================================== */

.cg-card-tag-layer {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.cg-card-badge-layer {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   PERSONALIZACIÓN AVANZADA DE ICONOS: ENERGÍAS, POKÉBALLS Y SÍMBOLOS TCG
   ========================================================================== */

/* Barra de selección rápida de energías en costes de ataques */
.cg-attack-cost-builder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.cg-energy-picker-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.cg-energy-picker-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.cg-energy-pick-btn {
    width: 26px;
    height: 26px;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cg-energy-pick-btn:hover {
    transform: scale(1.22);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
    background: rgba(56, 189, 248, 0.15);
}

.cg-energy-pick-btn svg,
.cg-energy-pick-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cg-cost-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--cg-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    background: var(--cg-input-bg);
}

.cg-cost-bubble svg,
.cg-cost-bubble img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
}

/* Paleta de iconos rápidos preestablecidos (Pokéballs, mecánicas, etc.) */
.cg-icon-quick-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.cg-icon-preset-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 3px;
    transition: all 0.18s ease;
}

.cg-icon-preset-btn:hover {
    transform: scale(1.18);
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.cg-icon-preset-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Selector de Símbolo de Expansión */
.cg-set-symbol-selector-wrap {
    margin-top: 4px;
}

.cg-set-symbol-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cg-set-symbol-preview-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    box-sizing: border-box;
}

.cg-set-symbol-preview-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cg-set-symbol-preview-icon span {
    font-size: 1.1rem;
}

/* Símbolo de Expansión en el pie de la carta */
.cg-expansion-symbol-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cg-expansion-symbol-img {
    height: 11px;
    width: auto;
    max-width: 18px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}

/* ==========================================================================
   ZONAS INTERACTIVAS SOBRE LA CARTA (CLICK-TO-EDIT HOTSPOTS)
   ========================================================================== */
.cg-card-hotspots-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
    border-radius: 18px;
    overflow: hidden;
}

.cg-card-hotspots-layer.hotspots-disabled {
    display: none !important;
}

.cg-card-hotspot {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    border: 1.5px solid transparent;
}

/* Bounding box sutil al pasar el ratón (idéntico a la referencia visual) */
.cg-card-hotspot:hover {
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
}

/* Zona seleccionada / activa */
.cg-card-hotspot.is-active {
    border: 1.5px solid #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.55), inset 0 0 8px rgba(6, 182, 212, 0.2);
}

/* Coordenadas en porcentajes precisos para cada zona de la carta */
.cg-card-hotspot[data-zone="header-left"] {
    top: 1.8%;
    left: 3%;
    width: 58%;
    height: 10.5%;
}

.cg-card-hotspot[data-zone="header-right"] {
    top: 1.8%;
    left: 63%;
    width: 34%;
    height: 10.5%;
}

.cg-card-hotspot[data-zone="artwork"] {
    top: 12.8%;
    left: 5%;
    width: 90%;
    height: 45%;
}

.cg-card-hotspot[data-zone="tag"] {
    top: 55.5%;
    left: 5%;
    width: 44%;
    height: 6%;
}

/* Posición exacta de la insignia como en la referencia */
.cg-card-hotspot[data-zone="badge"] {
    top: 35.5%;
    left: 57%;
    width: 37%;
    height: 19.5%;
    z-index: 26;
}

.cg-card-hotspot[data-zone="attacks"] {
    top: 61%;
    left: 5%;
    width: 90%;
    height: 23%;
}

.cg-card-hotspot[data-zone="stats"] {
    top: 84%;
    left: 5%;
    width: 90%;
    height: 8%;
}

.cg-card-hotspot[data-zone="bottom"] {
    top: 92%;
    left: 4%;
    width: 92%;
    height: 6.5%;
}

/* ==========================================================================
   ZONAS INTERACTIVAS SOBRE EL PÓSTER (POSTER CLICK-TO-EDIT HOTSPOTS)
   ========================================================================== */
.cg-poster-hotspots-layer {
    border-radius: 4px;
}

.cg-poster-hotspot {
    border-radius: 4px;
}

/* 1. Plantilla y Marco (Cabecera / Barra Superior) */
.cg-poster-hotspot[data-zone="poster-template"] {
    top: 0.8%;
    left: 1.5%;
    width: 68%;
    height: 9.5%;
}

/* 2. Efectos Visuales y Foil (Esquina Superior Derecha) */
.cg-poster-hotspot[data-zone="poster-effects"] {
    top: 0.8%;
    left: 71%;
    width: 27.5%;
    height: 9.5%;
}

/* 3. Ilustración y Filtros (Área Central de Imagen) */
.cg-poster-hotspot[data-zone="poster-artwork"] {
    top: 11.2%;
    left: 1.5%;
    width: 97%;
    height: 57%;
}

/* 4. Título y Textos Principales */
.cg-poster-hotspot[data-zone="poster-texts"] {
    top: 69%;
    left: 1.5%;
    width: 97%;
    height: 16.5%;
}

/* 5. Lema o Cita Célebre */
.cg-poster-hotspot[data-zone="poster-tagline"] {
    top: 86.2%;
    left: 1.5%;
    width: 97%;
    height: 6.5%;
}

/* 6. Datos, Pokédex, Recompensa y Créditos */
.cg-poster-hotspot[data-zone="poster-meta"] {
    top: 93.2%;
    left: 1.5%;
    width: 97%;
    height: 6%;
}

/* ADAPTACIÓN HORIZONTAL PARA HOTSPOTS DE PÓSTER (LANDSCAPE) */
.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-template"] {
    top: 1%;
    left: 1.5%;
    width: 58%;
    height: 11%;
}

.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-effects"] {
    top: 1%;
    left: 61%;
    width: 37.5%;
    height: 11%;
}

.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-artwork"] {
    top: 13%;
    left: 1.5%;
    width: 58%;
    height: 85%;
}

.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-texts"] {
    top: 13%;
    left: 61%;
    width: 37.5%;
    height: 42%;
}

.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-tagline"] {
    top: 56%;
    left: 61%;
    width: 37.5%;
    height: 20%;
}

.cg-poster-hotspots-layer.horizontal .cg-poster-hotspot[data-zone="poster-meta"] {
    top: 77%;
    left: 61%;
    width: 37.5%;
    height: 21%;
}

/* Etiqueta flotante identificadora de zona en hover */
.cg-hotspot-indicator {
    position: absolute;
    top: -20px;
    right: 4px;
    background: rgba(14, 14, 26, 0.94);
    color: #06b6d4;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(6, 182, 212, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    z-index: 30;
}

.cg-card-hotspot:hover .cg-hotspot-indicator,
.cg-card-hotspot.is-active .cg-hotspot-indicator {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PANEL POPOVER FLOTANTE CONTEXTUAL (CLICK-TO-EDIT MODAL CYBERPUNK)
   ========================================================================== */
.cg-card-popover {
    position: absolute;
    z-index: 120;
    width: 355px;
    max-width: calc(100vw - 32px);
    background: #151928;
    background: linear-gradient(180deg, rgba(22, 26, 41, 0.98) 0%, rgba(16, 20, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 14px 16px 16px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(6, 182, 212, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    animation: cgPopoverEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top center;
    color: #fff;
    font-family: inherit;
}

@keyframes cgPopoverEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cg-popover-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    margin: 0 auto 10px;
    cursor: grab;
    touch-action: none;
    transition: all 0.2s ease;
}

.cg-popover-handle:hover {
    background: #a855f7;
    width: 52px;
}

.cg-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    padding-bottom: 2px;
}

.cg-popover-drag-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    font-size: 13px;
    color: #a855f7;
    cursor: grab;
    opacity: 0.8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.cg-popover-header:hover .cg-popover-drag-hint {
    transform: scale(1.25);
    color: #c084fc;
}

.cg-card-popover.is-dragging {
    cursor: grabbing !important;
    user-select: none !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.92), 0 0 35px rgba(168, 85, 247, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(168, 85, 247, 0.8) !important;
    transition: none !important;
    animation: none !important;
    opacity: 0.96;
}

.cg-card-popover.is-dragging .cg-popover-header,
.cg-card-popover.is-dragging .cg-popover-handle,
.cg-card-popover.is-dragging .cg-popover-drag-hint {
    cursor: grabbing !important;
}

.cg-popover-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.cg-popover-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-popover-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Cuadrícula de Opciones de Presets (Insignias, Tags, etc.) */
.cg-popover-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 2px;
}

.cg-popover-presets-grid::-webkit-scrollbar {
    width: 4px;
}
.cg-popover-presets-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.cg-popover-preset-card {
    background: #20263b;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-sizing: border-box;
}

.cg-popover-preset-card:hover {
    border-color: rgba(6, 182, 212, 0.5);
    background: #272f49;
    transform: translateY(-2px);
}

.cg-popover-preset-card.is-active {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.16);
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.45);
}

.cg-popover-preset-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.cg-popover-none-icon {
    font-size: 1.35rem;
    color: #ef4444;
}

/* Subtítulo de Sección con Pill de Etiqueta */
.cg-popover-sub-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cg-popover-sub-title {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #cbd5e1;
    text-transform: uppercase;
}

.cg-popover-badge-tag {
    background: #6366f1;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Dropzone de subida drag & drop con borde punteado */
.cg-popover-dropzone {
    border: 1.5px dashed rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    background: rgba(30, 36, 56, 0.55);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cg-popover-dropzone:hover,
.cg-popover-dropzone.dragover {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
}

.cg-popover-cloud-icon {
    font-size: 1.5rem;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.cg-popover-upload-btn {
    background: #333c5e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    margin-bottom: 4px;
}

.cg-popover-upload-btn:hover {
    background: #3e4973;
    border-color: #06b6d4;
    color: #fff;
}

.cg-popover-dropzone-hint {
    color: #8f9bb3;
    font-size: 0.72rem;
}

/* Controles de Formulario para otras zonas del Popover */
.cg-popover-input-group {
    margin-bottom: 10px;
}

.cg-popover-input-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

.cg-popover-input,
.cg-popover-select {
    width: 100%;
    box-sizing: border-box;
    background: #0c0f18;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #fff;
    padding: 7px 10px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.cg-popover-input:focus,
.cg-popover-select:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.cg-popover-quick-buttons {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.cg-popover-quick-btn {
    background: #20263b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.cg-popover-quick-btn:hover,
.cg-popover-quick-btn.is-active {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
    color: #fff;
}

.cg-popover-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.cg-popover-type-btn {
    background: #20263b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cg-popover-type-btn svg,
.cg-popover-type-btn img {
    width: 22px;
    height: 22px;
    display: block;
}

.cg-popover-type-btn:hover,
.cg-popover-type-btn.is-active {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.25);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}

/* Enlace a la sección completa en el editor central */
.cg-popover-editor-link {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #06b6d4;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s;
    cursor: pointer;
}

.cg-popover-editor-link:hover {
    color: #38bdf8;
    text-decoration: underline;
}

/* Controles de Formulario para Póster en Popover */
.cg-popover-field-group {
    margin-bottom: 8px;
}

.cg-popover-field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* Grilla de Mini-Tarjetas de Plantillas en Popover */
.cg-popover-tmpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 165px;
    overflow-y: auto;
    padding: 2px;
}

.cg-popover-tmpl-grid::-webkit-scrollbar,
.cg-popover-pills-row::-webkit-scrollbar {
    width: 4px;
}
.cg-popover-tmpl-grid::-webkit-scrollbar-thumb,
.cg-popover-pills-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.cg-popover-mini-card {
    background: #20263b;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
}

.cg-popover-mini-card:hover {
    border-color: rgba(6, 182, 212, 0.5);
    background: #272f49;
    transform: translateY(-1px);
}

.cg-popover-mini-card.is-active {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.18);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.cg-popover-mini-icon {
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: 3px;
}

.cg-popover-mini-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Filas de Botones Pill para Filtros, Overlays, Marcos y Papel */
.cg-popover-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 130px;
    overflow-y: auto;
    padding: 2px;
}

.cg-popover-pill-btn {
    background: #20263b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cg-popover-pill-btn:hover {
    border-color: rgba(6, 182, 212, 0.5);
    color: #fff;
}

.cg-popover-pill-btn.is-active {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
    color: #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.cg-popover-orient-btn {
    background: #20263b;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}

.cg-popover-orient-btn:hover {
    border-color: #06b6d4;
    color: #fff;
}

.cg-popover-orient-btn.is-active {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
    color: #06b6d4;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

/* Ocultar durante la impresión y exportación a PNG */
@media print {
    .cg-card-hotspots-layer,
    .cg-card-popover {
        display: none !important;
    }
}

/* ==========================================================================
   ESTILOS PARA MODO CARTA VACÍA Y VACIADO DE ATAQUES/ATRIBUTOS
   ========================================================================== */
.cg-dock-btn.active {
    background: rgba(6, 182, 212, 0.25);
    border-color: var(--cg-accent-cyan, #06b6d4);
    color: var(--cg-accent-cyan, #06b6d4);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.5);
}

#cg-dock-btn-empty-card.active {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.cg-btn-danger-soft {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    transition: all 0.2s ease !important;
}

.cg-btn-danger-soft:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}

.cg-empty-attacks-notice {
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.cg-empty-attacks-notice:hover {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.03);
}

.cg-empty-attacks-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 6px;
}

.cg-empty-attacks-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}

.cg-empty-attacks-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.35;
}

.cg-btn-primary-soft {
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    color: #c084fc !important;
    transition: all 0.2s ease !important;
}

.cg-btn-primary-soft:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4) !important;
}

.cg-btn-secondary-soft {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    transition: all 0.2s ease !important;
}

.cg-btn-secondary-soft:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================================================
   12. SELECTOR DUAL DE MODO DE PRODUCTO (CARTA COLECCIONABLE VS PÓSTER DE PARED)
   ========================================================================== */
.cg-product-mode-container {
    width: 100%;
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(15, 17, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.cg-product-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cg-product-mode-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #94a3b8;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.cg-product-mode-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    transform: translateY(-1px);
}

.cg-product-mode-btn.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(168, 85, 247, 0.15));
    border-color: #06b6d4;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25), inset 0 0 12px rgba(6, 182, 212, 0.1);
}

.cg-product-mode-btn#cg-mode-btn-poster.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.18));
    border-color: #ec4899;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3), inset 0 0 12px rgba(236, 72, 153, 0.15);
}

.cg-mode-icon {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

.cg-mode-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cg-mode-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: inherit;
    text-transform: uppercase;
}

.cg-mode-subtitle {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cg-product-mode-btn.active .cg-mode-subtitle {
    color: #cbd5e1;
}

.cg-mode-badge-new {
    position: absolute;
    top: 10px;
    right: 12px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.6);
    animation: cg-pulse-badge 2s infinite ease-in-out;
}

.cg-product-mode-btn.is-coming-soon {
    opacity: 0.7;
    cursor: not-allowed;
    border-style: dashed;
    border-color: rgba(168, 85, 247, 0.35);
}

.cg-product-mode-btn.is-coming-soon:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.6);
    color: #e2e8f0;
    transform: none;
}

.cg-mode-badge-soon {
    position: absolute;
    top: 10px;
    right: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(6, 182, 212, 0.3));
    border: 1px solid #a855f7;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.3);
}

@keyframes cg-pulse-badge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.9; }
}

/* ==========================================================================
   13. REGLAS DE VISIBILIDAD CONDICIONAL (MODO CARTA VS MODO PÓSTER)
   ========================================================================== */
/* Por defecto, los elementos de póster están ocultos si no estamos en modo póster */
.cg-poster-only-tab,
.cg-poster-only-pane,
.cg-poster-only-section {
    display: none !important;
}

/* Cuando se activa el modo póster (.is-poster-mode) */
.is-poster-mode .cg-card-only-tab,
.is-poster-mode .cg-card-only-pane,
.is-poster-mode .cg-card-only-section,
.is-poster-mode .cg-card-only-size,
.is-poster-mode #cg-btn-flip-card,
.is-poster-mode #cg-lenticular-module-box {
    display: none !important;
}

.is-poster-mode .cg-poster-only-tab {
    display: flex !important;
}

.is-poster-mode .cg-poster-only-pane {
    display: block !important;
}

.is-poster-mode .cg-poster-only-section {
    display: block !important;
}

/* ==========================================================================
   14. COMPONENTES DE CONFIGURACIÓN DEL PÓSTER (PLANTILLAS, ORIENTACIÓN, MARCOS)
   ========================================================================== */
/* Selector de orientación */
.cg-orientation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.cg-orientation-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.cg-orientation-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.cg-orientation-btn.active {
    background: rgba(14, 165, 233, 0.12);
    border-color: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.3);
}

.cg-orient-icon {
    font-size: 20px;
    line-height: 1;
}

.cg-orient-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cg-orient-info strong {
    font-size: 13px;
    font-weight: 800;
    color: inherit;
}

.cg-orient-info span {
    font-size: 11px;
    color: #64748b;
}

.cg-orientation-btn.active .cg-orient-info span {
    color: #bae6fd;
}

/* Selector de marcos físicos */
.cg-frames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.cg-frame-card-option {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cg-frame-card-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.cg-frame-card-option.active {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
}

.cg-frame-color-preview {
    width: 36px;
    height: 48px;
    border-radius: 4px;
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.frame-preview-none {
    background: #1e293b;
    border: 1px dashed rgba(255, 255, 255, 0.3);
}

.frame-preview-black {
    background: #334155;
    border: 4px solid #111113;
    outline: 1px solid rgba(255, 255, 255, 0.1);
}

.frame-preview-white {
    background: #e2e8f0;
    border: 4px solid #ffffff;
    outline: 1px solid rgba(0, 0, 0, 0.15);
}

.frame-preview-oak {
    background: #d4a373;
    border: 4px solid #9e6f3d;
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

.cg-frame-name {
    font-size: 12px;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 3px;
    line-height: 1.2;
}

.cg-frame-desc {
    font-size: 10px;
    color: #64748b;
    line-height: 1.3;
    margin-bottom: 8px;
    flex: 1;
}

.cg-frame-price-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.cg-frame-card-option.active .cg-frame-price-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* ==========================================================================
   15. ADAPTACIÓN DEL ESCENARIO 3D PARA PÓSTERS (VERTICAL Y HORIZONTAL)
   ========================================================================== */
.cg-card-flipper.is-poster-flipper {
    aspect-ratio: 1 / 1.414 !important; /* Proporción estándar DIN vertical (A4 / A3) */
    transition: aspect-ratio 0.35s ease;
    cursor: default !important;
    transform: rotateX(0deg) rotateY(0deg) !important;
}

.is-poster-mode .cg-card-flipper {
    cursor: default !important;
    transform: rotateX(0deg) rotateY(0deg) !important;
}

/* En modo póster (impresión real), eliminar reflejo glare de cursor y mantener canvas plano */
.is-poster-mode .cg-card-glare-layer,
.is-poster-front .cg-card-glare-layer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Acabado Foil / Estampado metalizado en póster: 100% estático estilo impresión física */
.is-poster-front .cg-card-foil-layer {
    --foil-pos-x: 50% !important;
    --foil-pos-y: 50% !important;
    transition: none !important;
}

.is-poster-mode .cg-preview-live-badge .cg-pulse-dot {
    display: none !important;
    animation: none !important;
}

.cg-card-3d-stage.poster-orient-horizontal {
    width: 440px !important;
    max-width: 100% !important;
}

.cg-card-flipper.poster-orient-horizontal {
    aspect-ratio: 1.414 / 1 !important; /* Proporción DIN horizontal (A4 / A3) */
}

/* En modo póster, los bordes son de corte de imprenta recto (guillotina 90º) */
.cg-card-front.is-poster-front {
    border-radius: 4px !important;
}

/* Simulación hiperrealista de marcos de madera en el escenario 3D */
.cg-card-front.poster-frame-black {
    border: 14px solid #141416 !important;
    outline: 2px solid #28282c !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -2px 6px rgba(0, 0, 0, 0.9) !important;
}

.cg-card-front.poster-frame-white {
    border: 14px solid #f8f8f6 !important;
    outline: 2px solid #e2e2dc !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
}

.cg-card-front.poster-frame-oak {
    border: 14px solid #ad7845 !important;
    border-image: linear-gradient(135deg, #c49666 0%, #9e6f3d 25%, #be8e5d 50%, #875c31 75%, #ba8a58 100%) 14 !important;
    outline: 2px solid #784c22 !important;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Colgador magnético de madera teca natural (superior e inferior) */
.cg-card-front.poster-frame-hanger-wood {
    border-top: 14px solid #8c5a2c !important;
    border-bottom: 14px solid #8c5a2c !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-image: linear-gradient(90deg, #6d421d 0%, #a06e3e 25%, #7d4d23 50%, #a87747 75%, #6d421d 100%) 14 0 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Colgador magnético negro mate (superior e inferior) */
.cg-card-front.poster-frame-hanger-black {
    border-top: 14px solid #141416 !important;
    border-bottom: 14px solid #141416 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 1px solid #28282c !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), inset 0 2px 3px rgba(255, 255, 255, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.9) !important;
}

/* Placa Metálica Displate Style */
.cg-card-front.poster-frame-metal {
    border: 2px solid #8c93a8 !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 12px rgba(255, 255, 255, 0.1) !important;
}

/* Lienzo Canvas sobre bastidor de madera de 2cm */
.cg-card-front.poster-frame-canvas {
    border: 4px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 2px !important;
    box-shadow: 14px 20px 35px rgba(0, 0, 0, 0.7), -4px 0 12px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
}

/* Acabados de Papel */
.cg-card-front.poster-paper-matte {
    filter: contrast(0.97) brightness(1.02);
}

.cg-card-front.poster-paper-metallic::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, rgba(200, 220, 255, 0.08) 35%, rgba(255, 220, 200, 0.08) 65%, rgba(255, 255, 255, 0.14) 100%);
    mix-blend-mode: overlay;
    z-index: 5;
}

/* Acabado Lienzo Canvas Algodón 380g */
.cg-card-front.poster-paper-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0px, rgba(0, 0, 0, 0.035) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0px, rgba(0, 0, 0, 0.035) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
    z-index: 5;
    opacity: 0.75;
}

/* Acabado Papel Washi Japonés de Fibra Kozo 220g */
.cg-card-front.poster-paper-washi::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
        radial-gradient(circle at 25% 35%, rgba(139, 90, 43, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 65% 75%, rgba(139, 90, 43, 0.04) 1.5px, transparent 1.5px),
        linear-gradient(135deg, rgba(253, 246, 227, 0.15) 0%, rgba(245, 235, 205, 0.25) 100%);
    background-size: 70px 70px, 110px 110px, 100% 100%;
    mix-blend-mode: multiply;
    z-index: 5;
}

/* Filtros Artísticos de Imagen */
.poster-filter-vibrant img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-vibrant {
    filter: saturate(1.4) contrast(1.08);
}

.poster-filter-manga-bw img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-manga-bw {
    filter: grayscale(100%) contrast(1.45) brightness(0.95);
}

.poster-filter-vintage-film img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-vintage-film {
    filter: sepia(0.35) contrast(1.12) brightness(0.96) saturate(0.9);
}

.poster-filter-cyber-neon img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-cyber-neon {
    filter: contrast(1.3) saturate(1.55) hue-rotate(-15deg);
}

.poster-filter-matrix-green img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-matrix-green {
    filter: grayscale(100%) brightness(0.9) sepia(100%) hue-rotate(85deg) saturate(600%) contrast(1.2);
}

.poster-filter-synthwave-duo img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-synthwave-duo {
    filter: contrast(1.3) saturate(1.8) hue-rotate(275deg);
}

.poster-filter-noir-gold img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-noir-gold {
    filter: grayscale(85%) sepia(80%) hue-rotate(5deg) contrast(1.4) brightness(0.95);
}

.poster-filter-risograph-duo img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-risograph-duo {
    filter: contrast(1.4) saturate(2) hue-rotate(315deg) brightness(0.98);
}

.poster-filter-woodblock-washi img.cg-poster-art-img,
img.cg-poster-art-img.poster-filter-woodblock-washi {
    filter: sepia(0.42) contrast(1.38) brightness(0.92) saturate(0.85);
}

/* ==========================================================================
   16. PLANTILLAS DECORATIVAS EXCLUSIVAS DE PÓSTER DE PARED
   ========================================================================== */
.cg-poster-art-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
    user-select: none;
}

/* Placeholder de subida cuando aún no hay imagen */
.cg-poster-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
    border: 2px dashed rgba(168, 85, 247, 0.35);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-poster-placeholder:hover {
    background: rgba(168, 85, 247, 0.14);
    border-color: #a855f7;
}

.cg-poster-placeholder-icon {
    font-size: 38px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.cg-poster-placeholder-text {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
}

/* Contenedor de transformación de la imagen del póster */
.cg-poster-art-transform {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    overflow: hidden;
}

.cg-poster-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   PLANTILLA 1: GALERÍA DE MUSEO (EXHIBITION MINIMAL)
   -------------------------------------------------------------------------- */
.template-poster-gallery {
    background: #f8f7f4;
    color: #111111;
    padding: 16px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.04);
}

.cg-poster-gallery-passepartout {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cg-poster-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #222222;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cg-poster-gallery-art-frame {
    position: relative;
    flex: 1;
    margin: 12px 0;
    background: #000000;
    border: 1px solid #111111;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cg-poster-gallery-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.cg-poster-gallery-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
    color: #000000;
    line-height: 1.1;
    text-transform: uppercase;
}

.cg-poster-gallery-subtitle {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #666666;
    margin: 3px 0 0 0;
    text-transform: uppercase;
}

.cg-poster-palette-swatches {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.cg-poster-palette-swatches .swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.cg-poster-palette-swatches .swatch-1 { background: #e11d48; }
.cg-poster-palette-swatches .swatch-2 { background: #f59e0b; }
.cg-poster-palette-swatches .swatch-3 { background: #10b981; }
.cg-poster-palette-swatches .swatch-4 { background: #0ea5e9; }
.cg-poster-palette-swatches .swatch-5 { background: #6366f1; }

.cg-poster-gallery-seal {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #888888;
    text-align: right;
    line-height: 1.2;
}

.cg-poster-gallery-seal small {
    display: block;
    font-size: 7px;
    color: #aaaaaa;
}

/* --------------------------------------------------------------------------
   PLANTILLA 2: CINEMATOGRÁFICO (MOVIE POSTER)
   -------------------------------------------------------------------------- */
.template-poster-movie {
    background: #050508;
    color: #ffffff;
}

.cg-poster-movie-art-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cg-poster-movie-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 18px 16px 18px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.88) 75%, rgba(0, 0, 0, 0.98) 100%);
    box-sizing: border-box;
}

.cg-poster-movie-top {
    text-align: center;
}

.cg-poster-movie-laurel {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #facc15;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.cg-poster-movie-tagline {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.cg-poster-movie-bottom {
    text-align: center;
}

.cg-poster-movie-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.05;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9), 0 0 20px rgba(6, 182, 212, 0.4);
}

.cg-poster-movie-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #38bdf8;
    margin: 4px 0 10px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.cg-poster-movie-credits {
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #94a3b8;
    line-height: 1.35;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    opacity: 0.85;
}

.cg-poster-movie-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.cg-movie-badge {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   PLANTILLA 3: CARD ART SHOWCASE (LÁMINA CARTA LIMPIA)
   -------------------------------------------------------------------------- */
.template-poster-showcase {
    background: radial-gradient(circle at 50% 20%, #1e1b4b 0%, #09090f 100%);
    color: #ffffff;
    padding: 16px;
    border: 2px solid rgba(234, 179, 8, 0.35);
}

.cg-poster-showcase-outer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cg-poster-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(234, 179, 8, 0.4);
}

.cg-poster-showcase-name {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fef08a, #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cg-poster-showcase-jp {
    font-size: 12px;
    font-weight: 800;
    color: #fef08a;
    opacity: 0.85;
}

.cg-poster-showcase-art-box {
    position: relative;
    flex: 1;
    margin: 10px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.cg-poster-showcase-plaque {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
}

.cg-poster-showcase-plaque-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    margin-bottom: 4px;
}

.cg-showcase-dex-badge {
    font-weight: 900;
    color: #eab308;
}

.cg-showcase-spec {
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cg-showcase-quality {
    font-size: 8px;
    font-weight: 800;
    color: #38bdf8;
    padding: 1px 5px;
    background: rgba(56, 189, 248, 0.15);
    border-radius: 3px;
}

.cg-poster-showcase-dedication {
    font-size: 9px;
    font-style: italic;
    color: #cbd5e1;
    margin: 4px 0;
}

.cg-poster-showcase-brand {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #64748b;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 4: VINTAGE 90s ANIME WALL POSTER
   -------------------------------------------------------------------------- */
.template-poster-vintage {
    background: #fbf5e6;
    color: #1a1a1a;
    padding: 14px;
}

.cg-poster-vintage-cel {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid #332d27;
    padding: 10px;
    box-sizing: border-box;
}

.cg-vintage-crosshair {
    position: absolute;
    font-size: 11px;
    font-weight: 900;
    color: #332d27;
    line-height: 1;
}

.cg-vintage-crosshair.tl { top: 2px; left: 3px; }
.cg-vintage-crosshair.tr { top: 2px; right: 3px; }
.cg-vintage-crosshair.bl { bottom: 2px; left: 3px; }
.cg-vintage-crosshair.br { bottom: 2px; right: 3px; }

.cg-poster-vintage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1.5px solid #332d27;
}

.cg-poster-vintage-katakana {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #332d27;
}

.cg-poster-vintage-stamp {
    font-size: 8px;
    font-weight: 900;
    color: #dc2626;
    border: 1.5px solid #dc2626;
    padding: 2px 6px;
    border-radius: 4px;
    transform: rotate(-4deg);
    text-transform: uppercase;
}

.cg-poster-vintage-art-container {
    position: relative;
    flex: 1;
    margin: 8px 0;
    border: 2px solid #332d27;
    background: #111;
    overflow: hidden;
    box-shadow: 3px 3px 0 #332d27;
}

.cg-poster-vintage-bottom {
    border-top: 1.5px solid #332d27;
    padding-top: 6px;
    text-align: center;
}

.cg-poster-vintage-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0;
    color: #332d27;
    text-transform: uppercase;
    line-height: 1.1;
}

.cg-poster-vintage-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #b45309;
    margin: 2px 0 6px 0;
    text-transform: uppercase;
}

.cg-poster-vintage-credits {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    font-weight: 700;
    color: #78716c;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 5: CARTEL DE RECOMPENSA "WANTED" (ONE PIECE MARINE)
   -------------------------------------------------------------------------- */
.template-poster-wanted {
    background: #edd8b0;
    background: radial-gradient(circle at 50% 50%, #f6e8cc 0%, #ecd4a7 60%, #d8bb83 100%);
    color: #3b2413;
    padding: 12px;
    box-shadow: inset 0 0 25px rgba(92, 59, 21, 0.35);
    position: relative;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.cg-wanted-parchment-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 3.5px solid #3b2413;
    padding: 8px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
}

.cg-wanted-header {
    text-align: center;
    padding: 2px 0 4px 0;
}

.cg-wanted-title {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #3b2413;
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 2px 2px 3px rgba(60, 36, 19, 0.25);
    transform: scaleY(1.08);
}

.cg-wanted-photo-outer {
    position: relative;
    flex: 1;
    margin: 4px 0 6px 0;
    border: 3px solid #3b2413;
    background: #110e0b;
    overflow: hidden;
    box-shadow: 2px 3px 0 rgba(60, 36, 19, 0.4), inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.cg-wanted-photo-frame {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cg-wanted-nail {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #8c6a46 0%, #2b1809 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.cg-wanted-nail.tl { top: 4px; left: 4px; }
.cg-wanted-nail.tr { top: 4px; right: 4px; }
.cg-wanted-nail.bl { bottom: 4px; left: 4px; }
.cg-wanted-nail.br { bottom: 4px; right: 4px; }

.cg-wanted-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 2px;
}

.cg-wanted-condition-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-bottom: 1.5px solid #3b2413;
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.cg-wanted-condition {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #3b2413;
    text-transform: uppercase;
}

.cg-wanted-cond-ornament {
    font-size: 8px;
    color: #8c5a2c;
}

.cg-wanted-name-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 2px 0;
}

.cg-wanted-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #2b1709;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.cg-wanted-bounty-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    width: 100%;
    margin: 1px 0 5px 0;
    color: #2b1709;
}

.cg-wanted-berry-sym {
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    font-family: Georgia, serif;
    color: #3b2413;
}

.cg-wanted-bounty-val {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2.5px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
}

.cg-wanted-dash {
    font-size: 18px;
    font-weight: 900;
}

.cg-wanted-marine-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1.5px solid #3b2413;
    padding-top: 5px;
}

.cg-wanted-marine-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.cg-wanted-marine-svg {
    width: 24px;
    height: 12px;
    color: #3b2413;
}

.cg-wanted-marine-word {
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #3b2413;
}

.cg-wanted-disclaimer {
    display: flex;
    flex-direction: column;
    font-size: 4.8px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #634327;
    text-align: center;
    max-width: 170px;
}

.cg-wanted-seal-stamp {
    border: 1.5px solid #b91c1c;
    border-radius: 4px;
    color: #b91c1c;
    padding: 1px 4px;
    font-size: 6px;
    font-weight: 900;
    transform: rotate(-6deg);
    text-align: center;
    line-height: 1.1;
    background: rgba(185, 28, 28, 0.05);
}

.cg-wanted-seal-stamp small {
    display: block;
    font-size: 5px;
    letter-spacing: 0.5px;
}

/* Wanted en orientación Horizontal (Landscape) */
.cg-wanted-main-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.template-poster-wanted.horizontal .cg-wanted-parchment-inner {
    flex-direction: column;
    padding: 6px 10px;
}

.template-poster-wanted.horizontal .cg-wanted-header {
    padding: 0 0 2px 0;
}

.template-poster-wanted.horizontal .cg-wanted-title {
    font-size: 24px;
    letter-spacing: 5px;
}

.template-poster-wanted.horizontal .cg-wanted-main-row {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
}

.template-poster-wanted.horizontal .cg-wanted-photo-outer {
    flex: 1.1;
    margin: 0;
    height: 100%;
}

.template-poster-wanted.horizontal .cg-wanted-info {
    flex: 1.2;
    padding-top: 0;
    justify-content: space-between;
}

.template-poster-wanted.horizontal .cg-wanted-condition-bar {
    padding-bottom: 1px;
    margin-bottom: 2px;
}

.template-poster-wanted.horizontal .cg-wanted-name {
    font-size: 16px;
}

.template-poster-wanted.horizontal .cg-wanted-bounty-val {
    font-size: 16px;
    letter-spacing: 1.5px;
}

.template-poster-wanted.horizontal .cg-wanted-marine-bar {
    padding-top: 2px;
}

/* --------------------------------------------------------------------------
   PLANTILLA 6: GRAND LINE MANGA COLOR SPREAD (ONE PIECE)
   -------------------------------------------------------------------------- */
.template-poster-one-piece {
    background: #090d16;
    background: radial-gradient(circle at center, #111a2e 0%, #080c14 80%, #03050a 100%);
    color: #ffffff;
    padding: 14px;
    position: relative;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.cg-op-canvas-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.cg-op-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(245, 158, 11, 0.4);
}

.cg-op-flag-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cg-op-symbol-svg {
    width: 22px;
    height: 22px;
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.cg-op-crew-name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #f59e0b;
    text-transform: uppercase;
}

.cg-op-japanese-crest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cg-op-jp-logo {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.cg-op-coords-tag {
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #94a3b8;
    text-transform: uppercase;
}

.cg-op-artwork-frame {
    position: relative;
    flex: 1;
    margin: 10px 0;
    border: 1.5px solid rgba(245, 158, 11, 0.5);
    background: #000;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(245, 158, 11, 0.15);
}

.cg-op-bounty-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(10, 15, 26, 0.88);
    border: 1.5px solid #f59e0b;
    border-radius: 6px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.cg-op-bounty-label {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #f59e0b;
}

.cg-op-bounty-number {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
}

.cg-op-footer {
    padding-top: 8px;
    border-top: 1.5px solid rgba(245, 158, 11, 0.4);
}

.cg-op-titles-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cg-op-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.cg-op-cond-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
}

.cg-op-tagline {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #cbd5e1;
    margin: 3px 0 6px 0;
    text-transform: uppercase;
}

.cg-op-bottom-meta {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #64748b;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   ESTILOS DE UI: PANEL DE CONTROLES ONE PIECE
   -------------------------------------------------------------------------- */
.cg-poster-op-group {
    transition: all 0.3s ease;
}

@keyframes cgOpPulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 20px 4px rgba(245, 158, 11, 0.4);
        border-color: #fbbf24;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
        border-color: rgba(245, 158, 11, 0.35);
    }
}

.cg-poster-op-group.cg-op-pulse-highlight {
    animation: cgOpPulseHighlight 1.2s ease-out;
}

.cg-bounty-preset-btn {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cg-bounty-preset-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #ffffff;
    transform: translateY(-1px);
}

.cg-bounty-preset-btn.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #fbbf24;
    color: #000000;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* --------------------------------------------------------------------------
   ESTILOS DE UI: SELECTORES DE ACABADO DE PAPEL Y FILTROS ARTÍSTICOS
   -------------------------------------------------------------------------- */
.cg-poster-paper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.cg-paper-option {
    background: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    position: relative;
}

.cg-paper-option:hover {
    border-color: #a855f7;
    background: #243049;
    transform: translateY(-2px);
}

.cg-paper-option.active {
    border-color: #a855f7;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.cg-paper-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: #334155;
    color: #94a3b8;
    margin-bottom: 4px;
}

.cg-paper-option.active .cg-paper-badge {
    background: #a855f7;
    color: #ffffff;
}

.cg-paper-title {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.cg-paper-desc {
    font-size: 8.5px;
    color: #94a3b8;
    margin-top: 2px;
}

.cg-poster-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cg-filter-pill {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}

.cg-filter-pill:hover {
    border-color: #38bdf8;
    background: #243049;
    color: #ffffff;
}

.cg-filter-pill.active {
    border-color: #38bdf8;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

/* --------------------------------------------------------------------------
   PLANTILLA 7: FULL-BLEED CONTEMPORÁNEO (BORDERLESS FINE ART)
   -------------------------------------------------------------------------- */
.template-poster-borderless {
    background: #09090b;
    position: relative;
    overflow: hidden;
}

.cg-borderless-art-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cg-borderless-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0.85) 100%);
    box-sizing: border-box;
    pointer-events: none;
}

.cg-borderless-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    pointer-events: auto;
}

.cg-borderless-glass-plaque {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.cg-borderless-plaque-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cg-borderless-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    color: #ffffff;
}

.cg-borderless-sub {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #38bdf8;
    margin: 2px 0 8px 0;
    text-transform: uppercase;
}

.cg-borderless-footer-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #cbd5e1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 8: NEO-TOKYO SYNTHWAVE (CYBERPUNK HUD)
   -------------------------------------------------------------------------- */
.template-poster-cyberpunk {
    background: #05050c;
    color: #00f0ff;
    padding: 14px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    position: relative;
    box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.08);
}

.cg-cyber-hud-corner {
    position: absolute;
    font-size: 14px;
    color: #ff0055;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.8);
    pointer-events: none;
    z-index: 10;
}

.cg-cyber-hud-corner.tl { top: 4px; left: 4px; }
.cg-cyber-hud-corner.tr { top: 4px; right: 4px; }
.cg-cyber-hud-corner.bl { bottom: 4px; left: 4px; }
.cg-cyber-hud-corner.br { bottom: 4px; right: 4px; }

.cg-cyber-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cg-cyber-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    padding-bottom: 6px;
}

.cg-cyber-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-cyber-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 6px #00f0ff;
}

.cg-cyber-status-text {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00f0ff;
    font-family: 'Courier New', monospace;
}

.cg-cyber-kanji-glitch {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ff0055;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}

.cg-cyber-id {
    font-size: 9px;
    font-weight: 900;
    color: #fcee0a;
    font-family: 'Courier New', monospace;
}

.cg-cyber-art-viewport {
    position: relative;
    flex: 1;
    margin: 8px 0;
    border: 1px solid rgba(0, 240, 255, 0.4);
    background: #020205;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.cg-cyber-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 4;
}

.cg-cyber-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 1px dashed rgba(0, 240, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
}

.cg-cyber-tagline-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(5, 5, 12, 0.85);
    border-left: 2px solid #ff0055;
    padding: 2px 6px;
    font-size: 7.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 6;
}

.cg-cyber-footer {
    border-top: 1px solid rgba(0, 240, 255, 0.3);
    padding-top: 6px;
}

.cg-cyber-barcodes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cg-cyber-barcode-bars {
    width: 80px;
    height: 8px;
    background: repeating-linear-gradient(90deg, #00f0ff, #00f0ff 2px, transparent 2px, transparent 4px, #00f0ff 4px, #00f0ff 7px, transparent 7px, transparent 9px);
    opacity: 0.7;
}

.cg-cyber-barcode-num {
    font-size: 7px;
    font-weight: 800;
    color: #94a3b8;
    font-family: 'Courier New', monospace;
}

.cg-cyber-title {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
}

.cg-cyber-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0 5px 0;
}

.cg-cyber-sub {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00f0ff;
    text-transform: uppercase;
}

.cg-cyber-hazard {
    font-size: 7.5px;
    font-weight: 900;
    color: #fcee0a;
    background: rgba(252, 238, 10, 0.15);
    padding: 1px 4px;
    border-radius: 2px;
}

.cg-cyber-tech-meta {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-weight: 700;
    color: #64748b;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 9: JAPANDI MINIMAL & ZEN
   -------------------------------------------------------------------------- */
.template-poster-japandi {
    background: #f7f4ed;
    color: #2c2724;
    padding: 16px;
}

.cg-japandi-inner {
    height: 100%;
    display: flex;
    gap: 14px;
}

.cg-japandi-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 28px;
    padding: 6px 0;
    border-right: 1px solid rgba(44, 39, 36, 0.15);
}

.cg-japandi-kanji-vert {
    writing-mode: vertical-rl;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #2c2724;
    font-family: serif;
}

.cg-japandi-stamp-circle {
    width: 20px;
    height: 20px;
    border: 1.5px solid #b91c1c;
    border-radius: 50%;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(4deg);
    background: rgba(185, 28, 28, 0.04);
}

.cg-japandi-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cg-japandi-art-box {
    position: relative;
    flex: 1;
    margin-bottom: 12px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.cg-japandi-info {
    text-align: left;
}

.cg-japandi-dex-tag {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #8c7e72;
    text-transform: uppercase;
}

.cg-japandi-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #2c2724;
    margin: 2px 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.cg-japandi-subtitle {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #685e56;
    margin: 0;
    text-transform: uppercase;
}

.cg-japandi-divider {
    width: 30px;
    height: 1px;
    background: #2c2724;
    margin: 6px 0;
}

.cg-japandi-tagline {
    font-size: 7.5px;
    font-weight: 500;
    color: #8c7e72;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.cg-japandi-bottom-brand {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #a89f95;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 10: WEEKLY MANGA TANKŌBON COVER
   -------------------------------------------------------------------------- */
.template-poster-manga-cover {
    background: #ffffff;
    color: #000000;
    padding: 12px;
}

.cg-manga-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cg-manga-spine-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ef4444;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.cg-manga-publisher {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.cg-manga-vol-badge {
    font-size: 9px;
    font-weight: 900;
    background: #ffffff;
    color: #ef4444;
    padding: 1px 6px;
    border-radius: 3px;
}

.cg-manga-kanji-spine {
    font-size: 9px;
    font-weight: 800;
}

.cg-manga-hero-section {
    position: relative;
    flex: 1;
    border: 2px solid #000000;
    background: #000000;
    overflow: hidden;
    box-shadow: 4px 4px 0 #000000;
}

.cg-manga-sfx-katakana {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 3px 3px 0 #ef4444;
    transform: rotate(8deg);
    pointer-events: none;
    z-index: 10;
}

.cg-manga-corner-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #ef4444;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.cg-manga-info-band {
    border-top: 2px solid #000000;
    padding-top: 6px;
    margin-top: 8px;
}

.cg-manga-titles-group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cg-manga-main-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #000000;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
}

.cg-manga-sub {
    font-size: 8.5px;
    font-weight: 700;
    color: #666666;
    margin: 0;
    text-transform: uppercase;
}

.cg-manga-author-bar {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 8px;
    margin: 3px 0 4px 0;
}

.cg-manga-author-lbl {
    font-weight: 700;
    color: #888888;
}

.cg-manga-author-name {
    font-weight: 900;
    color: #000000;
    letter-spacing: 0.5px;
}

.cg-manga-meta-strip {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-weight: 700;
    color: #999999;
}

/* ==========================================================================
   SUPERPOSICIÓN DE EFECTOS CYBERPUNK / FX PARA PÓSTER (OVERLAYS)
   ========================================================================== */
.cg-poster-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}

/* 1. Glitch Cyber RGB */
.cg-poster-overlay-glitch-cyber {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 240, 255, 0.05) 0px,
        rgba(0, 240, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(255, 0, 85, 0.04) 0px,
        rgba(255, 0, 85, 0.04) 2px,
        transparent 2px,
        transparent 6px
    );
    box-shadow: inset 0 0 50px rgba(0, 240, 255, 0.15);
    mix-blend-mode: screen;
}
.cg-poster-overlay-glitch-cyber::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(0, 255, 234, 0.05) 0px,
        rgba(0, 255, 234, 0.05) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}

/* 2. Matrix Digital Rain */
.cg-poster-overlay-matrix-rain {
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.05) 0%, rgba(0, 15, 5, 0.4) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(0, 255, 65, 0.12) 0px,
            rgba(0, 255, 65, 0.12) 2px,
            transparent 2px,
            transparent 8px
        );
    mix-blend-mode: screen;
}
.cg-poster-overlay-matrix-rain::before {
    content: '01 10 11 00 10 01 11 00 11 10 01 00 10 01 10 11 00 10 11 01 00 11 01 10';
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    font-family: 'Courier New', monospace;
    font-size: 7px;
    color: rgba(0, 255, 65, 0.35);
    letter-spacing: 3px;
    line-height: 1.4;
    overflow: hidden;
    height: 100%;
    pointer-events: none;
    word-break: break-all;
}

/* 3. Tactical HUD Target Lock */
.cg-poster-overlay-tactical-hud {
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.08);
}
.cg-poster-overlay-tactical-hud::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(0, 240, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
.cg-poster-overlay-tactical-hud::after {
    content: '+ SYS.LOCK 99.8%';
    position: absolute;
    bottom: 24px;
    right: 18px;
    font-family: monospace;
    font-size: 8px;
    font-weight: 800;
    color: #00f0ff;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.8);
    background: rgba(0, 15, 30, 0.7);
    padding: 2px 6px;
    border: 1px solid rgba(0, 240, 255, 0.5);
    border-radius: 2px;
}

/* 4. Malla Neón 3D / Synthwave Wireframe */
.cg-poster-overlay-neon-wireframe {
    background: linear-gradient(180deg, transparent 55%, rgba(255, 0, 128, 0.15) 75%, rgba(0, 240, 255, 0.25) 100%);
}
.cg-poster-overlay-neon-wireframe::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -20%;
    right: -20%;
    height: 45%;
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 128, 0.4) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(160px) rotateX(65deg);
    transform-origin: bottom center;
    pointer-events: none;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, transparent 100%);
}

/* 5. Grano Retro / Dust & Scratches */
.cg-poster-overlay-dust-scratches {
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.07) 1.5px, transparent 1.5px),
        radial-gradient(circle at 45% 85%, rgba(0,0,0,0.1) 2px, transparent 2px),
        repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,0.04) 1px, transparent 2px);
    background-size: 60px 60px, 90px 90px, 120px 120px, 4px 4px;
    mix-blend-mode: overlay;
    opacity: 0.85;
}

/* 6. Destello Prismático / Holo Glare */
.cg-poster-overlay-holo-glare {
    background: linear-gradient(
        135deg,
        rgba(255, 0, 128, 0.12) 0%,
        rgba(0, 240, 255, 0.15) 35%,
        rgba(255, 240, 0, 0.12) 65%,
        rgba(168, 85, 247, 0.18) 100%
    );
    mix-blend-mode: color-dodge;
}
.cg-poster-overlay-holo-glare::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    transform: rotate(-25deg);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   PLANTILLA 11: CYBER MATRIX / NETRUNNER TERMINAL
   -------------------------------------------------------------------------- */
.template-poster-cyber-matrix {
    background: #030a05;
    color: #00ff41;
    padding: 14px;
    border: 1px solid rgba(0, 255, 65, 0.35);
    box-shadow: inset 0 0 25px rgba(0, 255, 65, 0.08);
    position: relative;
    font-family: 'Courier New', monospace;
}

.cg-matrix-digital-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(0, 255, 65, 0.03) 0px,
        rgba(0, 255, 65, 0.03) 1px,
        transparent 1px,
        transparent 4px
    );
    z-index: 1;
}

.cg-matrix-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.cg-matrix-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 255, 65, 0.3);
    padding-bottom: 5px;
    font-size: 8px;
    font-weight: 700;
}

.cg-matrix-prompt {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #00ff41;
}

.cg-matrix-prompt-icon {
    color: #00f0ff;
    font-weight: 900;
}

.cg-matrix-status-badge {
    background: rgba(255, 0, 55, 0.2);
    border: 1px solid #ff0037;
    color: #ff0037;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.cg-matrix-hex-code {
    color: #00f0ff;
    letter-spacing: 1px;
    font-weight: 800;
}

.cg-matrix-viewport {
    position: relative;
    flex: 1;
    margin: 8px 0;
    border: 1px solid rgba(0, 255, 65, 0.4);
    background: #010502;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.cg-matrix-crosshairs {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1) 0%, transparent 60%),
        linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    pointer-events: none;
    z-index: 3;
}

.cg-matrix-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
    background-size: 100% 3px;
    z-index: 4;
}

.cg-matrix-corner-tag {
    position: absolute;
    background: rgba(3, 10, 5, 0.85);
    border: 1px solid rgba(0, 255, 65, 0.5);
    padding: 1px 4px;
    font-size: 6.5px;
    font-weight: 800;
    color: #00ff41;
    letter-spacing: 1px;
    z-index: 5;
}

.cg-matrix-corner-tag.tl { top: 6px; left: 6px; }
.cg-matrix-corner-tag.br { bottom: 6px; right: 6px; color: #ff0055; border-color: #ff0055; }

.cg-matrix-footer {
    border-top: 1px solid rgba(0, 255, 65, 0.3);
    padding-top: 6px;
}

.cg-matrix-stream-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    color: rgba(0, 255, 65, 0.7);
    margin-bottom: 4px;
    letter-spacing: 1.5px;
}

.cg-matrix-kanji-node {
    font-size: 11px;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 2px;
}

.cg-matrix-title-wrap {
    margin: 2px 0;
}

.cg-matrix-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.4);
}

.cg-matrix-subtitle {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ff41;
    text-transform: uppercase;
    margin: 3px 0 0 0;
}

.cg-matrix-tagline-wrap {
    margin: 3px 0 5px 0;
}

.cg-matrix-tagline {
    font-size: 7.5px;
    font-weight: 800;
    color: #a7f3d0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cg-matrix-legal-bar {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLANTILLA 12: TACTICAL MECHA / EVA BLUEPRINT
   -------------------------------------------------------------------------- */
.template-poster-mecha-blueprint {
    background: #08101e;
    color: #00d2ff;
    padding: 13px;
    border: 2px solid #00d2ff;
    position: relative;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.12);
}

.cg-mecha-tech-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 210, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.08) 1px, transparent 1px);
    background-size: 16px 16px;
    z-index: 1;
}

.cg-mecha-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.cg-mecha-header {
    margin-bottom: 6px;
}

.cg-mecha-hazard-bar {
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        #fcee0a,
        #fcee0a 6px,
        #000000 6px,
        #000000 12px
    );
    border-radius: 1px;
    margin-bottom: 5px;
}

.cg-mecha-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 210, 255, 0.4);
    padding-bottom: 4px;
}

.cg-mecha-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-mecha-badge {
    background: #00d2ff;
    color: #08101e;
    font-size: 7.5px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 1px;
}

.cg-mecha-code {
    font-size: 7px;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: #94a3b8;
}

.cg-mecha-kanji {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fcee0a;
}

.cg-mecha-pilot-tag {
    font-size: 8.5px;
    font-weight: 900;
    font-family: monospace;
    color: #ffffff;
    background: rgba(0, 210, 255, 0.15);
    border: 1px solid #00d2ff;
    padding: 1px 6px;
    border-radius: 2px;
}

.cg-mecha-viewport {
    position: relative;
    flex: 1;
    margin: 6px 0;
    border: 1px solid #00d2ff;
    background: #030811;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}

.cg-mecha-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}
.cg-mecha-reticle::before,
.cg-mecha-reticle::after {
    content: '';
    position: absolute;
    background: rgba(0, 210, 255, 0.5);
}
.cg-mecha-reticle::before {
    top: 50%;
    left: -10px;
    right: -10px;
    height: 1px;
}
.cg-mecha-reticle::after {
    left: 50%;
    top: -10px;
    bottom: -10px;
    width: 1px;
}

.cg-mecha-lockon {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 7.5px;
    font-weight: 900;
    font-family: monospace;
    color: #ff3b30;
    background: rgba(8, 16, 30, 0.85);
    border: 1px solid #ff3b30;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 4;
}

.cg-mecha-caution-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #fcee0a;
    color: #000000;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 4;
}

.cg-mecha-footer {
    border-top: 1px solid rgba(0, 210, 255, 0.4);
    padding-top: 6px;
}

.cg-mecha-sync-bar {
    margin-bottom: 4px;
}

.cg-mecha-sync-label {
    font-size: 7px;
    font-weight: 800;
    font-family: monospace;
    color: #00d2ff;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.cg-mecha-sync-meter {
    height: 4px;
    background: rgba(0, 210, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.cg-mecha-sync-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #00d2ff, #fcee0a, #ff3b30);
}

.cg-mecha-titles {
    margin: 3px 0;
}

.cg-mecha-title {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.cg-mecha-subtitle {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #00d2ff;
    text-transform: uppercase;
    margin: 2px 0 0 0;
}

.cg-mecha-tagline {
    font-size: 7.5px;
    font-weight: 600;
    color: #94a3b8;
    margin: 2px 0 4px 0;
    letter-spacing: 0.5px;
}

.cg-mecha-specs-row {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-family: monospace;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
    border-top: 1px dashed rgba(0, 210, 255, 0.2);
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   PLANTILLA 13: RETRO SYNTHWAVE 80s / OUTRUN HORIZON
   -------------------------------------------------------------------------- */
.template-poster-synthwave-outrun {
    background: linear-gradient(180deg, #0e051d 0%, #1f0b38 45%, #35084a 100%);
    color: #ff71ce;
    padding: 14px;
    border: 2px solid #ff71ce;
    box-shadow: 0 0 25px rgba(255, 113, 206, 0.3), inset 0 0 25px rgba(1, 205, 254, 0.15);
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.cg-synth-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at 85% 15%, rgba(1, 205, 254, 0.8) 1.5px, transparent 1.5px),
        radial-gradient(circle at 50% 30%, rgba(255, 113, 206, 0.6) 1px, transparent 1px),
        radial-gradient(circle at 75% 40%, rgba(255,255,255,0.8) 1px, transparent 1px);
    background-size: 150px 150px;
    z-index: 1;
}

.cg-synth-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.cg-synth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 113, 206, 0.4);
    padding-bottom: 5px;
}

.cg-synth-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #01cdfe;
}

.cg-synth-logo-icon {
    color: #ff71ce;
    font-size: 10px;
}

.cg-synth-kanji {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #fcf434;
    text-shadow: 0 0 8px rgba(252, 244, 52, 0.6);
}

.cg-synth-stereo-tag {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: rgba(255, 113, 206, 0.25);
    border: 1px solid #ff71ce;
    padding: 1px 5px;
    border-radius: 2px;
}

.cg-synth-viewport {
    position: relative;
    flex: 1;
    margin: 8px 0;
    border: 1px solid #01cdfe;
    background: #080214;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(1, 205, 254, 0.25);
}

.cg-synth-sun {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff007f 0%, #ff8c00 100%);
    mask-image: repeating-linear-gradient(180deg, #000 0px, #000 6px, transparent 6px, transparent 8px);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0px, #000 6px, transparent 6px, transparent 8px);
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.6);
    pointer-events: none;
    z-index: 2;
    opacity: 0.35;
}

.cg-synth-wireframe-grid {
    position: absolute;
    bottom: 0;
    left: -20%;
    right: -20%;
    height: 40%;
    background-image:
        linear-gradient(rgba(1, 205, 254, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 113, 206, 0.3) 1px, transparent 1px);
    background-size: 15px 15px;
    transform: perspective(120px) rotateX(60deg);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 3;
}

.cg-synth-neon-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: linear-gradient(90deg, #ff007f, #7928ca);
    padding: 2px 7px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.5);
    z-index: 4;
}

.cg-synth-footer {
    border-top: 1px solid rgba(255, 113, 206, 0.4);
    padding-top: 6px;
}

.cg-synth-titles {
    margin: 2px 0;
}

.cg-synth-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    font-style: italic;
    background: linear-gradient(180deg, #ffffff 0%, #ff71ce 50%, #01cdfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
    filter: drop-shadow(0 0 8px rgba(255, 113, 206, 0.6));
}

.cg-synth-subtitle {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #01cdfe;
    text-transform: uppercase;
    margin: 2px 0 0 0;
}

.cg-synth-tagline {
    font-size: 7.5px;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 1px;
    margin: 2px 0 4px 0;
}

.cg-synth-meta-bar {
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    font-weight: 700;
    color: #a855f7;
    letter-spacing: 1px;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   PLANTILLA 14: DARK FANTASY GRIMOIRE / ELDEN RUNIC
   -------------------------------------------------------------------------- */
.template-poster-dark-fantasy {
    background: #0d0c0a;
    color: #e5c158;
    padding: 15px;
    border: 2px solid #8c6d23;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95), 0 0 20px rgba(140, 109, 35, 0.25);
    position: relative;
    font-family: 'Cinzel', 'Georgia', serif;
}

.cg-fantasy-stone-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.04) 0%, transparent 70%),
        repeating-radial-gradient(circle at 20% 30%, transparent 0, rgba(0, 0, 0, 0.15) 1px, transparent 3px);
    z-index: 1;
}

.cg-fantasy-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.cg-fantasy-header {
    border-bottom: 1px solid #8c6d23;
    padding-bottom: 5px;
}

.cg-fantasy-runic-border-top {
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin-bottom: 4px;
}

.cg-fantasy-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d4af37;
}

.cg-fantasy-cross {
    font-size: 11px;
    color: #b91c1c;
}

.cg-fantasy-header-title {
    font-size: 8px;
    letter-spacing: 3px;
}

.cg-fantasy-kanji {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #f3e5ab;
}

.cg-fantasy-viewport {
    position: relative;
    flex: 1;
    margin: 8px 0;
    border: 1px solid #8c6d23;
    background: #050504;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.cg-fantasy-filigree {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #d4af37;
    pointer-events: none;
    z-index: 3;
}
.cg-fantasy-filigree.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.cg-fantasy-filigree.tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.cg-fantasy-filigree.bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.cg-fantasy-filigree.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.cg-fantasy-alchemy-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border: 1px dashed rgba(212, 175, 55, 0.25);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

.cg-fantasy-wax-seal {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, #8b0000 0%, #4a0000 100%);
    border: 2px solid #d4af37;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f3e5ab;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(139, 0, 0, 0.6);
    z-index: 4;
}
.cg-fantasy-wax-seal span {
    font-size: 10px;
    line-height: 1;
}
.cg-fantasy-wax-seal small {
    font-size: 5px;
    letter-spacing: 1px;
    font-weight: 800;
}

.cg-fantasy-footer {
    border-top: 1px solid #8c6d23;
    padding-top: 6px;
    text-align: center;
}

.cg-fantasy-tome-number {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #b91c1c;
    margin-bottom: 2px;
}

.cg-fantasy-titles {
    margin: 2px 0;
}

.cg-fantasy-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #f3e5ab;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.cg-fantasy-subtitle {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #d4af37;
    text-transform: uppercase;
    margin: 2px 0 0 0;
}

.cg-fantasy-ornament {
    font-size: 8px;
    color: #8c6d23;
    margin: 3px 0;
    letter-spacing: 3px;
}

.cg-fantasy-tagline {
    font-size: 7px;
    font-style: italic;
    color: #d1d5db;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
}

.cg-fantasy-latin-motto {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
    font-weight: 700;
    color: #78716c;
    letter-spacing: 1.5px;
    border-top: 1px dashed rgba(140, 109, 35, 0.3);
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   PLANTILLA 15: XILOGRAFÍA UKIYO-E / EDO WOODBLOCK PRINT
   -------------------------------------------------------------------------- */
.template-poster-ukiyo-e {
    background: #f5eedb;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 60%),
        repeating-linear-gradient(0deg, rgba(74, 44, 23, 0.02) 0px, rgba(74, 44, 23, 0.02) 1px, transparent 1px, transparent 4px);
    color: #2b1709;
    padding: 14px;
    border: 3.5px solid #2b1709;
    box-shadow: inset 0 0 25px rgba(100, 60, 20, 0.25);
    position: relative;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Georgia', serif;
}

.cg-ukiyo-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1.5px solid #2b1709;
    padding: 8px 10px;
    box-sizing: border-box;
    position: relative;
}

.cg-ukiyo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #2b1709;
    padding-bottom: 4px;
}

.cg-ukiyo-series-title {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #b91c1c;
    text-transform: uppercase;
}

.cg-ukiyo-crest {
    font-size: 13px;
    color: #2b1709;
}

.cg-ukiyo-catalog-num {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #2b1709;
}

.cg-ukiyo-body {
    position: relative;
    flex: 1;
    display: flex;
    margin: 8px 0;
    gap: 10px;
}

.cg-ukiyo-viewport {
    position: relative;
    flex: 1;
    border: 2px solid #2b1709;
    background: #110e0b;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.cg-ukiyo-cartouche {
    width: 28px;
    background: #fbf6ec;
    border: 1.5px solid #2b1709;
    box-shadow: 2px 2px 0 rgba(43, 23, 9, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    box-sizing: border-box;
}

.cg-ukiyo-kanji-vert {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #2b1709;
}

.cg-ukiyo-hanko-box {
    margin-top: 6px;
    width: 18px;
    height: 18px;
    background: #b91c1c;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transform: rotate(-3deg);
}

.cg-ukiyo-footer {
    border-top: 2px solid #2b1709;
    padding-top: 5px;
    text-align: center;
}

.cg-ukiyo-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #2b1709;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.cg-ukiyo-subtitle {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #78350f;
    margin: 2px 0 3px 0;
    text-transform: uppercase;
}

.cg-ukiyo-colophon {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #92400e;
    border-top: 1px dashed rgba(43, 23, 9, 0.3);
    padding-top: 3px;
}

/* --------------------------------------------------------------------------
   PLANTILLA 16: SWISS TYPOGRAPHY / MINIMALIST BAUHAUS
   -------------------------------------------------------------------------- */
.template-poster-swiss-modern {
    background: #fdfdfd;
    color: #0f172a;
    padding: 16px;
    border: 1px solid #e2e8f0;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial', sans-serif;
}

.cg-swiss-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.cg-swiss-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 6px;
}

.cg-swiss-spec-block {
    display: flex;
    flex-direction: column;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.3;
}

.cg-swiss-cross-badge {
    background: #e11d48;
    color: #ffffff;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    border-radius: 2px;
}

.cg-swiss-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    position: relative;
}

.cg-swiss-huge-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 0.92;
    color: #0f172a;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    word-break: break-word;
}

.cg-swiss-viewport {
    flex: 1;
    position: relative;
    border: 2px solid #0f172a;
    background: #000;
    overflow: hidden;
}

.cg-swiss-footer {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    gap: 8px;
    border-top: 2px solid #0f172a;
    padding-top: 6px;
    font-size: 6.5px;
    line-height: 1.35;
}

.cg-swiss-footer-col {
    display: flex;
    flex-direction: column;
}

.cg-swiss-footer-col strong {
    font-size: 7.5px;
    color: #0f172a;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.cg-swiss-footer-col span {
    color: #64748b;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   PLANTILLA 17: TAROT MAJOR ARCANA / CELESTIAL COLLECTOR
   -------------------------------------------------------------------------- */
.template-poster-tarot-arcana {
    background: #09080f;
    background-image: 
        radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.06) 0%, transparent 50%);
    color: #f1dfa8;
    padding: 14px;
    border: 2px solid #c5a044;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95), 0 0 25px rgba(197, 160, 68, 0.2);
    position: relative;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
}

.cg-tarot-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(197, 160, 68, 0.5);
    padding: 8px;
    box-sizing: border-box;
    position: relative;
}

.cg-tarot-corner-star {
    position: absolute;
    width: 12px;
    height: 12px;
    color: #e6ca65;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.cg-tarot-corner-star.tl { top: 2px; left: 2px; }
.cg-tarot-corner-star.tr { top: 2px; right: 2px; }
.cg-tarot-corner-star.bl { bottom: 2px; left: 2px; }
.cg-tarot-corner-star.br { bottom: 2px; right: 2px; }

.cg-tarot-header {
    text-align: center;
    padding-bottom: 4px;
}

.cg-tarot-numeral-pill {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #c5a044;
    background: rgba(197, 160, 68, 0.1);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #e6ca65;
}

.cg-tarot-viewport {
    position: relative;
    flex: 1;
    margin: 6px 0;
    border: 2px solid #c5a044;
    border-radius: 120px 120px 4px 4px;
    overflow: hidden;
    background: #040306;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.85);
}

.cg-tarot-footer {
    text-align: center;
    padding-top: 4px;
}

.cg-tarot-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #f1dfa8;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(230, 202, 101, 0.4);
}

.cg-tarot-subtitle {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #c5a044;
    margin: 2px 0;
    text-transform: uppercase;
}

.cg-tarot-motto {
    font-size: 6.5px;
    font-style: italic;
    letter-spacing: 1.5px;
    color: #a89366;
    border-top: 1px solid rgba(197, 160, 68, 0.3);
    padding-top: 3px;
    margin-top: 3px;
}

/* ==========================================================================
   ADAPTACIONES HORIZONTALES PARA TODAS LAS PLANTILLAS DE PÓSTER (LANDSCAPE)
   ========================================================================== */

/* 1. Galería de Museo Horizontal */
.template-poster-gallery.horizontal {
    padding: 10px 14px;
}
.template-poster-gallery.horizontal .cg-poster-gallery-header {
    font-size: 9px;
    padding-bottom: 4px;
}
.template-poster-gallery.horizontal .cg-poster-gallery-art-frame {
    margin: 6px 0;
}
.template-poster-gallery.horizontal .cg-poster-gallery-footer {
    padding-top: 4px;
}
.template-poster-gallery.horizontal .cg-poster-gallery-title {
    font-size: 15px;
}
.template-poster-gallery.horizontal .cg-poster-gallery-subtitle {
    font-size: 8px;
}

/* 2. Cinematográfico Horizontal (Widescreen Key-Art) */
.template-poster-movie.horizontal .cg-poster-movie-overlay {
    padding: 10px 14px 8px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.98) 100%);
}
.template-poster-movie.horizontal .cg-poster-movie-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.template-poster-movie.horizontal .cg-poster-movie-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    gap: 14px;
}
.template-poster-movie.horizontal .cg-movie-bottom-titles {
    flex: 1.2;
}
.template-poster-movie.horizontal .cg-poster-movie-title {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}
.template-poster-movie.horizontal .cg-poster-movie-sub {
    font-size: 8px;
    margin: 2px 0 0 0;
}
.template-poster-movie.horizontal .cg-poster-movie-billing {
    flex: 1.1;
    text-align: right;
}
.template-poster-movie.horizontal .cg-poster-movie-credits {
    font-size: 5.8px;
    margin-bottom: 3px;
}
.template-poster-movie.horizontal .cg-poster-movie-badges {
    justify-content: flex-end;
    gap: 4px;
}

/* 3. Showcase Horizontal */
.template-poster-showcase.horizontal {
    padding: 8px 12px;
}
.template-poster-showcase.horizontal .cg-poster-showcase-header {
    padding-bottom: 4px;
}
.template-poster-showcase.horizontal .cg-poster-showcase-name {
    font-size: 14px;
}
.template-poster-showcase.horizontal .cg-poster-showcase-art-box {
    margin: 5px 0;
}
.template-poster-showcase.horizontal .cg-poster-showcase-plaque {
    padding: 4px 8px;
}
.template-poster-showcase.horizontal .cg-poster-showcase-dedication {
    margin: 1px 0;
    font-size: 7.5px;
}

/* 4. Vintage Anime Horizontal */
.template-poster-vintage.horizontal {
    padding: 8px 10px;
}
.template-poster-vintage.horizontal .cg-poster-vintage-cel {
    padding: 5px 8px;
}
.template-poster-vintage.horizontal .cg-poster-vintage-art-container {
    margin: 4px 0;
}
.template-poster-vintage.horizontal .cg-poster-vintage-title {
    font-size: 14px;
}
.template-poster-vintage.horizontal .cg-poster-vintage-bottom {
    padding-top: 3px;
}

/* 5. One Piece Grand Line Horizontal */
.template-poster-one-piece.horizontal {
    padding: 8px 12px;
}
.template-poster-one-piece.horizontal .cg-op-header {
    padding-bottom: 4px;
}
.template-poster-one-piece.horizontal .cg-op-artwork-frame {
    margin: 5px 0;
}
.template-poster-one-piece.horizontal .cg-op-footer {
    padding-top: 4px;
}
.template-poster-one-piece.horizontal .cg-op-title {
    font-size: 15px;
}
.template-poster-one-piece.horizontal .cg-op-tagline {
    font-size: 7.5px;
    margin: 1px 0 3px 0;
}
.template-poster-one-piece.horizontal .cg-op-bounty-pill {
    bottom: 6px;
    right: 6px;
    padding: 2px 6px;
}

/* 6. Borderless Horizontal */
.template-poster-borderless.horizontal .cg-borderless-overlay {
    padding: 10px 14px;
}
.template-poster-borderless.horizontal .cg-borderless-glass-plaque {
    padding: 6px 12px;
    border-radius: 6px;
}
.template-poster-borderless.horizontal .cg-borderless-title {
    font-size: 15px;
}
.template-poster-borderless.horizontal .cg-borderless-sub {
    font-size: 8.5px;
    margin: 1px 0 4px 0;
}

/* 7. Cyberpunk Horizontal */
.template-poster-cyberpunk.horizontal {
    padding: 8px 12px;
}
.template-poster-cyberpunk.horizontal .cg-cyber-art-viewport {
    margin: 4px 0;
}
.template-poster-cyberpunk.horizontal .cg-cyber-title {
    font-size: 15px;
}
.template-poster-cyberpunk.horizontal .cg-cyber-footer {
    padding-top: 4px;
}

/* 8. Japandi Horizontal */
.template-poster-japandi.horizontal {
    padding: 8px 14px;
}
.template-poster-japandi.horizontal .cg-japandi-inner {
    gap: 10px;
}
.template-poster-japandi.horizontal .cg-japandi-art-box {
    margin-bottom: 4px;
}
.template-poster-japandi.horizontal .cg-japandi-title {
    font-size: 14px;
}
.template-poster-japandi.horizontal .cg-japandi-tagline {
    display: none;
}

/* 9. Manga Cover Horizontal */
.template-poster-manga-cover.horizontal {
    padding: 8px 12px;
}
.template-poster-manga-cover.horizontal .cg-manga-spine-bar {
    margin-bottom: 4px;
    padding: 2px 8px;
}
.template-poster-manga-cover.horizontal .cg-manga-sfx-katakana {
    font-size: 24px;
    top: 6px;
    right: 8px;
}
.template-poster-manga-cover.horizontal .cg-manga-info-band {
    margin-top: 4px;
    padding-top: 4px;
}
.template-poster-manga-cover.horizontal .cg-manga-main-title {
    font-size: 15px;
}

/* 10. Cyber Matrix Horizontal */
.template-poster-cyber-matrix.horizontal {
    padding: 8px 12px;
}
.template-poster-cyber-matrix.horizontal .cg-matrix-top-bar {
    padding-bottom: 3px;
}
.template-poster-cyber-matrix.horizontal .cg-matrix-viewport {
    margin: 4px 0;
}
.template-poster-cyber-matrix.horizontal .cg-matrix-footer {
    padding-top: 4px;
}
.template-poster-cyber-matrix.horizontal .cg-matrix-title {
    font-size: 15px;
}
.template-poster-cyber-matrix.horizontal .cg-matrix-tagline-wrap {
    display: none;
}

/* 11. Mecha Blueprint Horizontal */
.template-poster-mecha-blueprint.horizontal {
    padding: 8px 12px;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-hazard-bar {
    height: 4px;
    margin-bottom: 3px;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-header {
    margin-bottom: 3px;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-viewport {
    margin: 4px 0;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-footer {
    padding-top: 4px;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-title {
    font-size: 15px;
}
.template-poster-mecha-blueprint.horizontal .cg-mecha-tagline {
    display: none;
}

/* 12. Synthwave Outrun Horizontal */
.template-poster-synthwave-outrun.horizontal {
    padding: 8px 12px;
}
.template-poster-synthwave-outrun.horizontal .cg-synth-header {
    padding-bottom: 3px;
}
.template-poster-synthwave-outrun.horizontal .cg-synth-viewport {
    margin: 4px 0;
}
.template-poster-synthwave-outrun.horizontal .cg-synth-footer {
    padding-top: 4px;
}
.template-poster-synthwave-outrun.horizontal .cg-synth-title {
    font-size: 16px;
}
.template-poster-synthwave-outrun.horizontal .cg-synth-tagline {
    display: none;
}

/* 13. Dark Fantasy Horizontal */
.template-poster-dark-fantasy.horizontal {
    padding: 8px 12px;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-header {
    padding-bottom: 3px;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-viewport {
    margin: 4px 0;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-footer {
    padding-top: 4px;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-title {
    font-size: 15px;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-ornament {
    margin: 1px 0;
}
.template-poster-dark-fantasy.horizontal .cg-fantasy-tagline {
    display: none;
}

/* 14. Ukiyo-e Horizontal */
.template-poster-ukiyo-e.horizontal {
    padding: 8px 12px;
}
.template-poster-ukiyo-e.horizontal .cg-ukiyo-body {
    margin: 4px 0;
}
.template-poster-ukiyo-e.horizontal .cg-ukiyo-title {
    font-size: 16px;
}

/* 15. Swiss Modern Horizontal */
.template-poster-swiss-modern.horizontal {
    padding: 10px 14px;
}
.template-poster-swiss-modern.horizontal .cg-swiss-huge-title {
    font-size: 22px;
    margin-bottom: 4px;
}
.template-poster-swiss-modern.horizontal .cg-swiss-main {
    margin: 4px 0;
}

/* 16. Tarot Arcana Horizontal */
.template-poster-tarot-arcana.horizontal {
    padding: 8px 12px;
}
.template-poster-tarot-arcana.horizontal .cg-tarot-viewport {
    margin: 4px 0;
    border-radius: 60px 60px 4px 4px;
}
.template-poster-tarot-arcana.horizontal .cg-tarot-title {
    font-size: 16px;
}

/* ==========================================================================
   SELLOS DE AUTENTICIDAD Y EDICIÓN LIMITADA (PRINT-READY STAMPS)
   ========================================================================== */
.cg-poster-seal-layer {
    position: absolute;
    bottom: 12px;
    right: 12px;
    pointer-events: none;
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cg-poster-seal-badge {
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.cg-poster-seal-badge:hover {
    transform: scale(1.06);
}

/* 1. Sello Dorado Holográfico Archival */
.cg-poster-seal-badge.seal-gold-embossed {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff0b3 0%, #d4af37 40%, #8c6d23 85%, #5a4512 100%);
    border: 1.5px dashed rgba(255, 255, 255, 0.85);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #3d2b05;
    padding: 2px;
    box-sizing: border-box;
}
.seal-gold-star {
    font-size: 9px;
    line-height: 1;
    color: #3d2b05;
}
.seal-gold-text-top {
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}
.seal-gold-text-sub {
    font-size: 3.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    opacity: 0.9;
}

/* 2. Sello Hanko Lacre Rojo Oriental */
.cg-poster-seal-badge.seal-hanko-red {
    width: 32px;
    height: 32px;
    background: rgba(185, 28, 28, 0.92);
    border: 2px solid #7f1d1d;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transform: rotate(-4deg);
}
.seal-hanko-kanji {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
}
.seal-hanko-sub {
    font-size: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 3. Edición Limitada Numerada */
.cg-poster-seal-badge.seal-numbered-edition {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(245, 158, 11, 0.6);
    border-radius: 4px;
    padding: 3px 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.seal-num-label {
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #f59e0b;
    text-transform: uppercase;
}
.seal-num-value {
    font-size: 8px;
    font-weight: 900;
    color: #f8fafc;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

/* 4. Código Criptográfico QR / Barcode */
.cg-poster-seal-badge.seal-crypto-barcode {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 3px;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.seal-crypto-bars {
    width: 22px;
    height: 12px;
    background: repeating-linear-gradient(90deg, #00f0ff 0px, #00f0ff 1.5px, transparent 1.5px, transparent 3px);
}
.seal-crypto-info {
    display: flex;
    flex-direction: column;
    font-family: monospace;
    font-size: 5px;
    font-weight: 800;
    color: #00f0ff;
    line-height: 1.1;
    letter-spacing: 0.5px;
}