:root { --bg: #f8fafc; --panel: #ffffff; --text: #1e293b; --text-light: #64748b; --border: #e2e8f0; --primary: #2563eb; --primary-hover: #1d4ed8; --success: #10b981; --danger: #ef4444; --input-bg: #ffffff; --item-hover: #f1f5f9; }
[data-theme="dark"] { --bg: #0f172a; --panel: #1e293b; --text: #f8fafc; --text-light: #94a3b8; --border: #334155; --primary: #3b82f6; --primary-hover: #2563eb; --success: #10b981; --danger: #ef4444; --input-bg: #0f172a; --item-hover: #334155; }

body, h2, h3, label, button, .badge, .stat-item { user-select: none; -webkit-user-select: none; }
input, textarea, .console-output { user-select: text; -webkit-user-select: text; }
::-webkit-scrollbar { width: 8px; height: 8px; } 
::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; } 
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } 
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; display: grid; grid-template-columns: 320px 1fr; gap: 20px; height: 95vh; box-sizing: border-box; transition: background-color 0.3s; }
.panel { background: var(--panel); padding: 25px; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }

.title-primary { font-size: 1.5rem; color: var(--primary); border: none; margin: 0; padding: 0; }
.border-bottom { border-bottom: 1px solid var(--border); }
.pb-15 { padding-bottom: 15px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mt-0 { margin-top: 0; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .p-15 { padding: 15px; } .w-100 { width: 100%; }
.flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-gap { display: flex; gap: 10px; } .flex-col { display: flex; flex-direction: column; } .align-center { align-items: center; }
.text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-primary { color: var(--primary); } .text-large { font-size: 1.1rem; } .fw-bold { font-weight: bold; }

h2 { margin-top: 0; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 12px; color: var(--text); } 
h3 { font-size: 1.05rem; margin-top: 20px; margin-bottom: 10px; color: var(--text); } 
label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--text-light); margin-bottom: 6px; }

/* FIX CRÍTICO: Ancho de inputs text vs checkboxes */
input[type="text"], input[type="password"], input[type="number"], input[type="date"], textarea, select { width: 100%; padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 0.95rem; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; outline: none; background: var(--input-bg); color: var(--text); }
input[type="checkbox"], input[type="radio"] { width: auto !important; margin: 0; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); transform: scale(1.1); }

button { padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; border: none; cursor: pointer; border-radius: 6px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-small { padding: 6px 12px; font-size: 0.85rem; }
.btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-hover); } .btn-success { background: var(--success); color: white; } .btn-danger { background: var(--danger); color: white; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background: var(--item-hover); } .btn-outline-primary { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline-primary:hover { background: var(--item-hover); } button:disabled { opacity: 0.6; cursor: not-allowed; }

.user-profile { background: var(--input-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; text-align: center; } .avatar { width: 40px; height: 40px; background: var(--item-hover); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; margin: 0 auto 10px; } .user-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 15px; }
.module-nav { list-style: none; padding: 0; margin: 0 0 20px 0; border-bottom: 1px solid var(--border); padding-bottom: 15px; } .module-nav li { padding: 12px; font-size: 1rem; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.2s; margin-bottom: 5px; color: var(--text-light); } .module-nav li:hover { background: var(--item-hover); color: var(--text); } .module-nav li.active { background: var(--primary); color: white; }
.session-list { list-style: none; padding: 0; margin: 0; } .session-list li { padding: 12px; font-size: 0.95rem; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px; margin-bottom: 4px; } .session-list li:hover { background: var(--item-hover); } .session-list li.active { background: var(--item-hover); color: var(--primary); font-weight: 600; border-left: 4px solid var(--primary); }

.cards-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; padding: 12px; border: 1px dashed var(--border); border-radius: 6px; background: var(--input-bg); min-height: 20px;} .badge { background: var(--item-hover); color: var(--primary); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; cursor: grab; user-select: none; border: 1px solid var(--border); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.stats-box { background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; margin-bottom: 15px; } .stat-item span { display: block; font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; } .stat-item strong { font-size: 1.5rem; color: var(--text); }
.console-output { background: #000000; color: #4ade80; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 0.85rem; overflow-y: auto; white-space: pre-wrap; flex-grow: 1; border: 1px solid var(--border); min-height: 150px; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(2px); justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: var(--panel); padding: 30px; border-radius: 12px; width: 600px; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); border: 1px solid var(--border); }
.checkbox-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; max-height: 180px; overflow-y: auto; background: var(--input-bg); } .checkbox-list label { display: flex; align-items: center; padding: 10px 15px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); cursor: pointer; gap: 12px; margin: 0; } .checkbox-list label:hover { border-color: var(--primary); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-on { background: var(--success); box-shadow: 0 0 5px var(--success); } .status-off { background: var(--danger); } .status-qr { background: #f59e0b; }
.device-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; background: var(--input-bg); }
.cloud-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .cloud-table th, .cloud-table td { border-bottom: 1px solid var(--border); padding: 12px; text-align: left; color: var(--text); }
.file-upload-box { border: 2px dashed var(--border); padding: 30px; text-align: center; border-radius: 8px; cursor: pointer; margin-bottom: 15px; color: var(--text-light); transition: 0.2s; } .file-upload-box:hover { background: var(--item-hover); border-color: var(--primary); color: var(--primary); }

.theme-toggle { position: absolute; top: 20px; right: 20px; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.estimator-box { margin-top: 15px; padding: 15px; background: var(--input-bg); border-left: 4px solid var(--primary); color: var(--text-light); font-size: 0.95rem; border-radius: 6px; display: flex; flex-direction: column; gap: 5px; } .estimator-box strong { color: var(--primary); font-size: 1.15rem; }
.schedule-box { background: var(--item-hover); border: 1px solid var(--primary); border-radius: 8px; padding: 15px; margin-top: 15px; }

.app-view { display: none; } .app-view.active-view { display: flex; flex-direction: column; gap: 20px; height: 100%; } .workspace-grid { display: none; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%; } .workspace-col { display: flex; flex-direction: column; gap: 20px; }
.welcome-screen { display:flex; justify-content:center; align-items:center; height:100%; flex-direction:column; color:var(--text-light); } .icon-large { font-size: 4rem; margin-bottom: 20px; } .file-label { font-size: 0.9rem; color: var(--text-light); background: var(--bg); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); flex-grow: 1; word-break: break-all; }
.list-none { list-style: none; } .p-0 { padding: 0; } .gap-8 { gap: 8px; } .cursor-pointer { cursor: pointer; }