:root {
    --bg: #020617;
    --card: #1e293b;
    --accent: #3b82f6;
    --text: #f8fafc;
}

body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }

header { padding: 20px; text-align: center; background: var(--card); border-bottom: 2px solid var(--accent); }

.container { padding: 20px; max-width: 1200px; margin: auto; }

.controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; flex-wrap: wrap; }

/* FIX DEL PREVIEW */
#editor-wrapper {
    height: 65vh; /* 65% de la altura de la pantalla */
    border: 1px solid #475569;
    border-radius: 10px;
    overflow: hidden;
    background: #1e1e1e;
}

#editor { width: 100%; height: 100%; }

.btn { background: var(--accent); color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn:hover { opacity: 0.9; }

.cookie-banner { position: fixed; bottom: 0; width: 100%; background: #000; padding: 15px; text-align: center; border-top: 1px solid var(--accent); }

.footer { text-align: center; padding: 30px; font-size: 0.8rem; opacity: 0.7; }
.footer a { color: var(--accent); text-decoration: none; }