:root {
    --bg-base: #0f1015;
    --bg-panel: #1c1d24;
    --bg-input: #2a2b36;
    --accent-gold: #FFD700;
    --accent-hover: #e6c200;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --border-color: #374151;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }

body { background-color: var(--bg-base); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; }

/* Control de Pantallas */
.screen { display: none; width: 100%; height: 100%; }
.screen.active { display: flex; }
.panel { display: none; flex-direction: column; gap: 24px; flex: 1; }
.panel.active { display: flex; }

/* Login Screen */
#login-screen { justify-content: center; align-items: center; }
.login-box { background: var(--bg-panel); padding: 40px; border-radius: 12px; border: 1px solid var(--border-color); width: 350px; display: flex; flex-direction: column; gap: 15px; text-align: center; }
.login-box input { padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-input); color: white; outline: none; }
.login-box input:focus { border-color: var(--accent-gold); }

/* Sidebar y Logo */
.sidebar { width: 340px; background-color: var(--bg-panel); border-right: 1px solid var(--border-color); padding: 24px; display: flex; flex-direction: column; gap: 24px; z-index: 10; }
.logo { font-size: 26px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.logo span { color: var(--accent-gold); }

/* Controles y Botones */
.control-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; display: block; }
.mode-selector { display: flex; background: var(--bg-base); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
.mode-btn { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-weight: 600; transition: 0.3s; font-size: 12px;}
.mode-btn.active { background: var(--accent-gold); color: #000; }
.hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
input[type="range"] { width: 100%; accent-color: var(--accent-gold); }
.action-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.btn-primary { background-color: var(--accent-gold); color: #000; border: none; padding: 14px; border-radius: 8px; font-weight: 700; cursor: pointer; text-transform: uppercase; }
.btn-primary:hover { background-color: var(--accent-hover); }
.btn-outline { background-color: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-outline:hover { background: rgba(255, 215, 0, 0.1); }
.btn-outline:disabled { border-color: var(--border-color); color: var(--border-color); cursor: not-allowed; background: transparent; }
.btn-text { background: none; border: none; color: #ff4d4d; cursor: pointer; font-weight: 600; }

/* Galería y Carpetas */
.galeria-grid { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; max-height: 60vh; padding-right: 5px;}
.galeria-grid::-webkit-scrollbar { width: 6px; }
.galeria-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.folder-card { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; }
.folder-card:hover { border-color: var(--accent-gold); background: rgba(255, 215, 0, 0.05); }
.folder-icon { font-size: 24px; }
.folder-info { display: flex; flex-direction: column; }
.folder-info strong { color: var(--text-main); font-size: 14px;}
.folder-info span { color: var(--text-muted); font-size: 12px; }
.card-diseno { background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; }
.card-diseno:hover { border-color: var(--accent-gold); }
.card-diseno img { width: 50px; height: 50px; object-fit: contain; background: #fff; border-radius: 4px; }
.card-info { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.card-info span { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Área Principal y Canvas */
.workspace { flex: 1; display: flex; flex-direction: column; position: relative;}
.toolbar { height: 60px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 24px; gap: 15px; background: var(--bg-base); z-index: 10;}
.bg-toggle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; }
.bg-grid { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 10px 0, 10px -10px, 0px 10px; background-color: #fff; }
.bg-dark { background-color: #121212; }
.bg-neon { background-color: #00ff00; }
.canvas-container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px; overflow: hidden; position: relative; height: 100%; }

/* Estilos de las Reglas (Rulers) */
.ruler-h { position: absolute; top: 0; left: 40px; right: 40px; height: 20px; background: rgba(28, 29, 36, 0.9); border-bottom: 1px solid var(--border-color); display: none; z-index: 4; background-image: repeating-linear-gradient(90deg, transparent, transparent 49px, var(--accent-gold) 49px, var(--accent-gold) 50px, transparent 50px, transparent 9px, var(--border-color) 9px, var(--border-color) 10px); }
.ruler-v { position: absolute; top: 40px; left: 0; bottom: 40px; width: 20px; background: rgba(28, 29, 36, 0.9); border-right: 1px solid var(--border-color); display: none; z-index: 4; background-image: repeating-linear-gradient(180deg, transparent, transparent 49px, var(--accent-gold) 49px, var(--accent-gold) 50px, transparent 50px, transparent 9px, var(--border-color) 9px, var(--border-color) 10px); }

#dropzone { width: 100%; height: 100%; border: 2px dashed var(--border-color); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; text-align: center; }
#dropzone:hover { border-color: var(--accent-gold); background: rgba(255, 215, 0, 0.05); }
canvas { display: none; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 2;}

/* Cursores */
.magic-cursor { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21'/%3E%3Cpath d='M22 21H7'/%3E%3Cpath d='m5 11 9 9'/%3E%3C/svg%3E") 5 18, crosshair; }
.ai-cursor { cursor: crosshair; } /* Cursor simple para cuando la IA está activa */

/* Animación Escaneo */
#scan-overlay { position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; pointer-events: none; z-index: 5; display: none; }
.scan-line { position: absolute; width: 100%; height: 4px; background: linear-gradient(to bottom, transparent, var(--accent-gold), transparent); box-shadow: 0 0 15px var(--accent-gold); animation: scanMove 1.2s ease-in-out infinite; }
@keyframes scanMove { 0% { top: 0%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.processing { filter: brightness(1.2) contrast(1.1); transition: 0.3s; }

/* Ventana Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; width: 90%; max-width: 600px; display: flex; flex-direction: column; position: relative; }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.modal-close:hover { color: var(--accent-gold); }
.modal-img-container { width: 100%; height: 350px; border-radius: 8px; margin-top: 15px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 1px solid var(--border-color); }
.modal-img-container img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* SweetAlert Dark Mode */
.swal2-popup { background: var(--bg-panel) !important; color: var(--text-main) !important; border: 1px solid var(--border-color); }
.swal2-title, .swal2-html-container { color: var(--text-main) !important; }
.swal2-input { background: var(--bg-input) !important; color: white !important; border-color: var(--border-color) !important; }
.swal2-input:focus { box-shadow: 0 0 0 2px rgba(255,215,0,0.5) !important; }
.swal2-confirm { background-color: var(--accent-gold) !important; color: #000 !important; font-weight: bold !important; border-radius: 8px !important; }