:root {
 --sidebar-w: 56px;
 --panel-w: 380px;
 --bg-dark: #0a0f1c;
 --bg-sidebar: #151921;
 --bg-panel: rgba(20, 30, 50, 0.97);
 --bg-glass: rgba(35, 48, 68, 0.9);
 --bg-input: rgba(51, 65, 85, 0.7);
 --bg-hover: rgba(71, 85, 105, 0.6);
 --primary: #10d393;
 --primary-lt: #34eab0;
 --accent: #60a5fa;
 --success: #34d399;
 --warning: #fbbf24;
 --danger: #f87171;
 --cyan: #22d3ee;
 --purple: #a78bfa;
 --text-1: #ffffff;
 --text-2: #cbd5e1;
 --text-3: #94a3b8;
 --border: rgba(148, 163, 184, 0.3);
 --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
 --backdrop: blur(16px) saturate(180%);
 }
 [data-theme="pastel"] {
 --bg-dark: #f0ebe3; --bg-sidebar: #e8e3db; --bg-panel: rgba(255, 255, 255, 0.95);
 --bg-glass: rgba(255, 255, 255, 0.85); --bg-input: rgba(240, 235, 227, 0.8);
 --bg-hover: rgba(225, 220, 210, 0.7); --primary: #7c9eb2; --primary-lt: #8fb4c8;
 --accent: #6b8fa3; --success: #8fb996; --warning: #ddb892; --danger: #d4a5a5;
 --text-1: #4a5568; --text-2: #718096; --text-3: #a0aec0;
 --border: rgba(160, 174, 192, 0.3); --shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body, html { height: 100%; font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-dark); overflow: hidden; color: var(--text-1); transition: all 0.3s; }
 .app { display: flex; height: 100vh; }
 .sidebar { width: var(--sidebar-w); background: var(--bg-sidebar); display: flex; flex-direction: column; border-right: 1px solid var(--border); z-index: 3000; }
 .logo { height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); cursor: pointer; }
 .logo i { font-size: 24px; color: white; }
 .nav { flex: 1; display: flex; flex-direction: column; padding: 8px 0; }
 .nav-group { padding: 8px 0; border-bottom: 1px solid var(--border); }
 .nav-item { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #94a3b8; cursor: pointer; transition: all 0.2s; position: relative; }
 .nav-item i { font-size: 19px; }
 .nav-item:hover { color: #ffffff; background: var(--bg-hover); }
 .nav-item.active { color: var(--primary); background: rgba(16, 211, 147, 0.18); }
 .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; background: var(--primary); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px var(--primary); }
 .nav-item[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background: var(--bg-panel); padding: 8px 14px; border-radius: 4px; font-size: 12px; white-space: nowrap; margin-left: 10px; box-shadow: var(--shadow); z-index: 9999; border: 1px solid var(--border); color: #ffffff; font-weight: 500; }
 .map-wrap { flex: 1; position: relative; }
 #map { height: 100%; width: 100%; }
 [data-theme="pastel"] #map { filter: saturate(0.9) brightness(1.02); }
 .panel { position: fixed; top: 16px; left: calc(var(--sidebar-w) + 16px); width: var(--panel-w); max-height: calc(100vh - 32px); background: var(--bg-panel); backdrop-filter: var(--backdrop); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; z-index: 2000; content-visibility: auto; contain-intrinsic-size: 380px 600px; }
 .panel.active { display: flex; }
 .panel-hdr { padding: 14px 16px; background: linear-gradient(135deg, rgba(16, 211, 147, 0.25), rgba(139, 92, 246, 0.15)); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
 .panel-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; }
 .panel-title i { color: var(--primary); font-size: 15px; text-shadow: 0 0 10px rgba(16,211,147,0.5); }
 .panel-close { background: none; border: none; color: var(--text-2); cursor: pointer; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
 .panel-close:hover { background: var(--danger); color: white; }
 .panel-body { padding: 16px; overflow-y: auto; flex: 1; max-height: 75vh; }
 .panel-body::-webkit-scrollbar { width: 5px; }
 .panel-body::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }
 .form-group { margin-bottom: 12px; }
 .form-label { font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
 .form-input { width: 100%; padding: 11px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 13px; color: #ffffff; font-weight: 500; }
 .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16,211,147,0.25); }
 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: linear-gradient(135deg, var(--primary), #059669); border: none; border-radius: 6px; font-weight: 800; font-size: 12px; text-transform: uppercase; color: #ffffff; cursor: pointer; width: 100%; transition: all 0.2s; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
 .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
 .btn-2 { background: var(--bg-glass); border: 1px solid var(--border); color: #ffffff; text-shadow: none; }
 .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
 .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; }
 .btn-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
 .btn-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
 .btn-accent { background: linear-gradient(135deg, #3b82f6, #2563eb); }
 .toolbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
 .tool-btn { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-glass); border: 1px solid var(--border); border-radius: 6px; color: #e2e8f0; cursor: pointer; font-size: 17px; transition: all 0.2s; }
 .tool-btn:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary); box-shadow: 0 0 10px rgba(16,211,147,0.3); }
 .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
 .stat { background: var(--bg-glass); border: 1px solid var(--border); border-radius: 6px; padding: 12px; text-align: center; }
 .stat-val { font-size: 20px; font-weight: 800; color: var(--primary); font-family: monospace; text-shadow: 0 0 10px rgba(16,211,147,0.3); }
 .stat-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; margin-top: 4px; font-weight: 600; }
 .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-glass); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; }
 .toggle-lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #ffffff; }
 .toggle-lbl i { color: var(--primary); }
 .switch { position: relative; width: 40px; height: 22px; }
 .switch input { display: none; }
 .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #475569; border-radius: 22px; transition: 0.3s; border: 1px solid var(--border); }
 .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #ffffff; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
 input:checked + .slider { background: var(--primary); border-color: var(--primary); }
 input:checked + .slider:before { transform: translateX(18px); }
 .range-grp { display: flex; align-items: center; gap: 10px; }
 .range { flex: 1; -webkit-appearance: none; height: 5px; background: var(--bg-input); border-radius: 3px; }
 .range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--primary); border-radius: 50%; cursor: pointer; }
 .range-val { width: 60px; text-align: center; padding: 5px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; font-family: monospace; font-size: 12px; color: var(--text-1); }
 .section-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--warning); text-transform: uppercase; margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); letter-spacing: 0.5px; }
 .tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 12px; background: rgba(0,0,0,0.4); padding: 4px; border-radius: 6px; }
 .tab { flex: 0 1 auto; padding: 6px 8px; background: transparent; border: none; border-radius: 4px; font-weight: 700; font-size: 9px; text-transform: uppercase; color: #e2e8f0; cursor: pointer; letter-spacing: 0.3px; white-space: nowrap; transition: all 0.15s; }
 .tab:hover { color: #ffffff; }
 .tab.active { background: linear-gradient(135deg, var(--primary), #059669); color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
 .tab-content { display: none; }
 .tab-content.active { display: block; }
 .data-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: monospace; }
 .data-table th { background: var(--bg-glass); padding: 10px 8px; text-align: left; font-weight: 700; color: #ffffff; text-transform: uppercase; font-size: 10px; position: sticky; top: 0; }
 .data-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 10px; color: #e2e8f0; }
 .data-table tr:hover td { background: var(--bg-hover); }
 .data-table tr.selected td { background: rgba(34, 211, 238, 0.2); }
 .quick-tools { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 30px; padding: 10px 18px; z-index: 1500; display: flex; gap: 10px; box-shadow: var(--shadow); backdrop-filter: var(--backdrop); }
 .quick-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-glass); border: 1px solid var(--border); color: #e2e8f0; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
 .quick-btn:hover { background: var(--primary); color: #ffffff; border-color: var(--primary); box-shadow: 0 0 15px rgba(16,211,147,0.4); }
 .coords-disp { position: fixed; bottom: 80px; left: 20px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; z-index: 1500; font-family: monospace; font-size: 12px; backdrop-filter: var(--backdrop); color: #ffffff; }
 .coords-disp span { color: var(--primary); font-weight: 600; }
 .undo-redo { position: fixed; bottom: 80px; right: 20px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; z-index: 1500; display: flex; gap: 6px; box-shadow: var(--shadow); }
 .undo-btn { width: 38px; height: 38px; border-radius: 6px; background: var(--bg-glass); border: 1px solid var(--border); color: #e2e8f0; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
 .undo-btn:hover:not(:disabled) { background: var(--primary); color: #ffffff; }
 .undo-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 22px; display: flex; align-items: center; gap: 12px; z-index: 9999; box-shadow: var(--shadow); opacity: 0; transition: all 0.3s; color: #ffffff; font-weight: 500; }
 .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
 .toast.success { border-left: 4px solid var(--success); }
 .toast.error { border-left: 4px solid var(--danger); }
 .toast.warning { border-left: 4px solid var(--warning); }
 .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 15, 28, 0.9); display: none; align-items: center; justify-content: center; z-index: 10000; flex-direction: column; gap: 16px; }
 .loading.show { display: flex; }
 .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .hidden { display: none !important; }
 .color-badge { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; }
 .dist-label { background: rgba(0,0,0,0.9); color: #fcd34d; padding: 3px 6px; border-radius: 4px; border: 1px solid #fcd34d; font-size: 10px; font-weight: bold; }
 .vertex-label { background: #ffffff; color: #1e293b; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; font-weight: bold; border: 2px solid #1e293b; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
 .azimuth-label { background: rgba(167, 139, 250, 0.95); color: #ffffff; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: bold; }
 input[type="file"] { display: none; }
 .lot-card { background: var(--bg-glass); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .lot-header { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
 .lot-header:hover { background: var(--bg-hover); }
 .lot-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #ffffff; }
 .lot-badges { display: flex; gap: 6px; }
 .badge { padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; }
 .badge-warning { background: var(--warning); color: #1a1d23; }
 .badge-accent { background: var(--accent); color: #fff; }
 .lot-body { display: none; padding: 14px; border-top: 1px solid var(--border); }
 .lot-body.open { display: block; }
 .mini-table { width: 100%; font-size: 10px; margin-top: 8px; }
 .mini-table th, .mini-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); }
 .mini-table th { background: var(--bg-dark); color: #e2e8f0; font-weight: 600; }
 .summary-box { background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(248,113,113,0.15)); border: 1px solid var(--warning); border-radius: 8px; padding: 18px; margin-bottom: 16px; }
 .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
 .summary-item { text-align: center; }
 .summary-val { font-size: 26px; font-weight: 800; font-family: monospace; }
 .summary-val.warning { color: var(--warning); text-shadow: 0 0 10px rgba(251,191,36,0.4); }
 .summary-val.danger { color: var(--danger); text-shadow: 0 0 10px rgba(248,113,113,0.4); }
 .summary-val.accent { color: var(--accent); text-shadow: 0 0 10px rgba(96,165,250,0.4); }
 .summary-val.success { color: var(--success); text-shadow: 0 0 10px rgba(52,211,153,0.4); }
 .summary-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; font-weight: 600; }
 .export-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
 .float-panel { position: fixed; background: var(--bg-panel); backdrop-filter: var(--backdrop); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 3000; display: flex; flex-direction: column; overflow: hidden; min-width: 280px; }
 .fusion-bar { background: rgba(6, 182, 212, 0.1); border: 1px solid var(--cyan); border-radius: 6px; padding: 12px; margin-bottom: 12px; display: none; }
 .fusion-bar.active { display: block; }
 .fusion-count { font-size: 24px; font-weight: 800; color: var(--cyan); }
 @keyframes slicerPulse { 0%,100%{stroke-opacity:1;} 50%{stroke-opacity:0.5;} }
 /* MULTILINE */
 .ml-step { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
 .ml-step-num { background: #10b981; color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; }
 .slicer-line-anim { animation: slicerPulse 1.5s ease-in-out infinite; }
 /* KEYBOARD SHORTCUTS */
 kbd {
 background: linear-gradient(135deg, var(--bg-glass), var(--bg-input));
 border: 1px solid var(--border);
 border-radius: 4px;
 padding: 4px 8px;
 font-family: monospace;
 font-size: 11px;
 font-weight: 700;
 color: var(--primary);
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 display: inline-block;
 margin: 0 2px;
 }
 .shortcut-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px;
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 8px;
 transition: all 0.2s;
 }
 .shortcut-item:hover {
 background: var(--bg-hover);
 border-color: var(--primary);
 }
 .shortcut-keys {
 display: flex;
 align-items: center;
 gap: 4px;
 font-weight: 600;
 }
 .shortcut-desc {
 color: var(--text-2);
 font-size: 12px;
 }
 /* TOUR GUIDE */
 @keyframes pulse {
 0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.7), 0 0 20px var(--primary); }
 50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.7), 0 0 30px var(--primary); }
 }
 /* SPLASH SCREEN */
 @keyframes logoFloat { 
 0%, 100% { transform: translateY(0px) rotate(0deg); } 
 50% { transform: translateY(-20px) rotate(5deg); } 
 }
 @keyframes loadProgress { 
 0% { width: 0%; } 
 100% { width: 100%; } 
 }
 #splash-screen.hidden {
 opacity: 0;
 pointer-events: none;
 }
 /* PROFESSIONAL TOOLS */
 .pro-card {
 background: linear-gradient(135deg, rgba(16,211,147,0.1), rgba(59,130,246,0.1));
 border: 1px solid var(--primary);
 border-radius: 10px;
 padding: 14px;
 margin-bottom: 12px;
 }
 .pro-card-title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 800;
 font-size: 12px;
 color: var(--primary);
 margin-bottom: 10px;
 text-transform: uppercase;
 }
 .setback-visual {
 position: relative;
 width: 100%;
 height: 120px;
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 8px;
 margin: 12px 0;
 overflow: hidden;
 }
 .setback-polygon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 70%;
 height: 70%;
 border: 2px solid var(--primary);
 background: rgba(16,211,147,0.2);
 }
 .setback-inner {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border: 2px dashed var(--warning);
 background: rgba(251,191,36,0.15);
 }
 .elevation-chart {
 width: 100%;
 height: 150px;
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 8px;
 position: relative;
 overflow: hidden;
 }
 .elevation-line {
 fill: none;
 stroke: var(--primary);
 stroke-width: 2;
 }
 .elevation-area {
 fill: rgba(16,211,147,0.3);
 }
 .smart-lot {
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
 margin-bottom: 8px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .smart-lot-info {
 display: flex;
 flex-direction: column;
 gap: 2px;
 }
 .smart-lot-area {
 font-size: 16px;
 font-weight: 800;
 color: var(--primary);
 }
 .smart-lot-dims {
 font-size: 10px;
 color: var(--text-2);
 }
 .smart-lot-status {
 padding: 4px 10px;
 border-radius: 4px;
 font-size: 9px;
 font-weight: 700;
 text-transform: uppercase;
 }
 .status-ok { background: var(--success); color: #fff; }
 .status-warn { background: var(--warning); color: #1a1d23; }
 .status-error { background: var(--danger); color: #fff; }
 .input-with-unit {
 position: relative;
 }
 .input-with-unit input {
 padding-right: 35px;
 }
 .input-unit {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 11px;
 color: var(--text-3);
 font-weight: 600;
 }
 /* MEMORIAL & CROQUIS */
 .memorial-preview {
 background: #fff;
 color: #1a1a1a;
 border-radius: 8px;
 padding: 20px;
 font-family: 'Times New Roman', serif;
 font-size: 11px;
 line-height: 1.6;
 max-height: 400px;
 overflow-y: auto;
 border: 1px solid var(--border);
 }
 .memorial-preview h1 {
 font-size: 14px;
 text-align: center;
 margin-bottom: 15px;
 text-transform: uppercase;
 border-bottom: 2px solid #333;
 padding-bottom: 10px;
 }
 .memorial-preview h2 {
 font-size: 12px;
 margin: 15px 0 8px 0;
 color: #333;
 border-bottom: 1px solid #ccc;
 padding-bottom: 4px;
 }
 .memorial-preview table {
 width: 100%;
 border-collapse: collapse;
 margin: 10px 0;
 font-size: 10px;
 }
 .memorial-preview th, .memorial-preview td {
 border: 1px solid #333;
 padding: 5px 8px;
 text-align: center;
 }
 .memorial-preview th {
 background: #f0f0f0;
 font-weight: bold;
 }
 .croquis-canvas {
 background: #fff;
 border: 1px solid var(--border);
 border-radius: 8px;
 display: block;
 margin: 0 auto;
 }
 .croquis-config {
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 12px;
 margin-bottom: 12px;
 }
 .croquis-config-title {
 font-size: 10px;
 color: var(--text-2);
 font-weight: 700;
 margin-bottom: 8px;
 text-transform: uppercase;
 }
 .color-picker-row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 8px;
 }
 .color-picker-row label {
 font-size: 11px;
 color: var(--text-2);
 flex: 1;
 }
 .color-picker-row input[type="color"] {
 width: 40px;
 height: 28px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 }
 /* ========== ASSISTANT & BEGINNER MODE ========== */
 /* Mode Toggle */
 .mode-toggle {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 4000;
 display: flex;
 align-items: center;
 gap: 10px;
 background: var(--bg-panel);
 padding: 8px 14px;
 border-radius: 25px;
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
 }
 .mode-toggle-label {
 font-size: 11px;
 color: var(--text-2);
 font-weight: 600;
 }
 .mode-toggle-btn {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: 15px;
 border: none;
 font-size: 10px;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.3s;
 }
 .mode-toggle-btn.active {
 background: var(--primary);
 color: #fff;
 }
 .mode-toggle-btn:not(.active) {
 background: var(--bg-glass);
 color: var(--text-2);
 }
 /* Smart Assistant */
 @keyframes fabPulse {
 0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5); }
 50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.8); }
 }
 /* WhatsApp Button */
 /* .whatsapp-float eliminado v31 — movido a quick-tools bar */
 
 .chat-message {
 max-width: 85%;
 padding: 10px 14px;
 border-radius: 12px;
 font-size: 12px;
 line-height: 1.5;
 animation: fadeInUp 0.3s ease;
 }
 @keyframes fadeInUp {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .chat-message.bot {
 background: var(--bg-glass);
 border: 1px solid var(--border);
 align-self: flex-start;
 border-bottom-left-radius: 4px;
 }
 .chat-message.user {
 background: linear-gradient(135deg, var(--primary), #059669);
 color: white;
 align-self: flex-end;
 border-bottom-right-radius: 4px;
 }
 .chat-message.bot .msg-time,
 .chat-message.user .msg-time {
 font-size: 9px;
 opacity: 0.7;
 margin-top: 4px;
 display: block;
 }
 .whatsapp-banner {
 background: linear-gradient(135deg, #25D366, #128C7E);
 padding: 12px;
 border-radius: 8px;
 margin-top: 10px;
 cursor: pointer;
 transition: all 0.2s;
 }
 .whatsapp-banner:hover {
 transform: scale(1.02);
 box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
 }
 .whatsapp-banner-content {
 display: flex;
 align-items: center;
 gap: 10px;
 color: white;
 }
 .whatsapp-banner i {
 font-size: 24px;
 }
 .whatsapp-banner-text {
 flex: 1;
 }
 .whatsapp-banner-text strong {
 display: block;
 font-size: 11px;
 }
 .whatsapp-banner-text span {
 font-size: 9px;
 opacity: 0.9;
 }
 .typing-indicator {
 display: flex;
 gap: 4px;
 padding: 10px 14px;
 background: var(--bg-glass);
 border-radius: 12px;
 align-self: flex-start;
 border-bottom-left-radius: 4px;
 }
 .typing-indicator span {
 width: 8px;
 height: 8px;
 background: var(--text-3);
 border-radius: 50%;
 animation: typing 1.4s infinite ease-in-out;
 }
 .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
 .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
 @keyframes typing {
 0%, 60%, 100% { transform: translateY(0); }
 30% { transform: translateY(-6px); }
 }

 /* Assistant Panel */
 @keyframes slideUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
 /* Quick Start Cards */
 .quickstart-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin-top: 12px;
 }
 .quickstart-card {
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px;
 cursor: pointer;
 transition: all 0.2s;
 text-align: center;
 }
 .quickstart-card:hover {
 border-color: var(--primary);
 transform: translateY(-2px);
 box-shadow: 0 5px 20px rgba(16, 211, 147, 0.2);
 }
 .quickstart-card i {
 font-size: 24px;
 margin-bottom: 8px;
 display: block;
 }
 .quickstart-card span {
 font-size: 11px;
 font-weight: 600;
 color: var(--text-1);
 }
 /* Educational Tooltips */
 .edu-tooltip {
 position: fixed;
 background: var(--bg-panel);
 border: 1px solid var(--primary);
 border-radius: 10px;
 padding: 12px 16px;
 max-width: 280px;
 z-index: 9999;
 box-shadow: 0 10px 40px rgba(0,0,0,0.4);
 animation: tooltipFade 0.2s ease;
 }
 @keyframes tooltipFade {
 from { opacity: 0; transform: scale(0.95); }
 to { opacity: 1; transform: scale(1); }
 }
 .edu-tooltip::before {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 20px;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-top: 8px solid var(--primary);
 }
 .edu-tooltip-title {
 font-size: 12px;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 6px;
 display: flex;
 align-items: center;
 gap: 6px;
 }
 .edu-tooltip-text {
 font-size: 11px;
 color: var(--text-2);
 line-height: 1.5;
 }
 .edu-tooltip-tip {
 margin-top: 8px;
 padding-top: 8px;
 border-top: 1px solid var(--border);
 font-size: 10px;
 color: var(--warning);
 display: flex;
 align-items: center;
 gap: 4px;
 }
 /* Demo Loader */
 .demo-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(10, 15, 28, 0.9);
 z-index: 6000;
 display: none;
 align-items: center;
 justify-content: center;
 }
 .demo-overlay.active { display: flex; }
 .demo-card {
 background: var(--bg-panel);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 30px;
 max-width: 450px;
 text-align: center;
 }
 .demo-card h2 {
 font-size: 18px;
 color: #fff;
 margin-bottom: 10px;
 }
 .demo-card p {
 font-size: 12px;
 color: var(--text-2);
 margin-bottom: 20px;
 }
 .demo-options {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 }
 .demo-option {
 padding: 20px 15px;
 background: var(--bg-glass);
 border: 2px solid var(--border);
 border-radius: 12px;
 cursor: pointer;
 transition: all 0.2s;
 }
 .demo-option:hover {
 border-color: var(--primary);
 transform: translateY(-3px);
 }
 .demo-option i {
 font-size: 28px;
 margin-bottom: 10px;
 display: block;
 }
 .demo-option span {
 font-size: 12px;
 font-weight: 600;
 color: var(--text-1);
 display: block;
 }
 .demo-option small {
 font-size: 10px;
 color: var(--text-3);
 }
 /* Step Indicator */
 .step-number {
 width: 30px;
 height: 30px;
 background: var(--primary);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 font-weight: 800;
 color: #fff;
 }
 .step-text {
 font-size: 13px;
 color: var(--text-1);
 font-weight: 600;
 }
 .step-hint {
 font-size: 10px;
 color: var(--text-3);
 }
 .step-skip {
 padding: 6px 12px;
 background: var(--bg-glass);
 border: 1px solid var(--border);
 border-radius: 15px;
 color: var(--text-2);
 font-size: 10px;
 cursor: pointer;
 }
 .step-skip:hover { background: var(--bg-hover); }
 /* Beginner Mode Highlights */
 [data-beginner-highlight] {
 position: relative;
 }
 .beginner-mode [data-beginner-highlight]::after {
 content: attr(data-beginner-hint);
 position: absolute;
 bottom: -25px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--primary);
 color: #fff;
 padding: 4px 10px;
 border-radius: 10px;
 font-size: 9px;
 font-weight: 600;
 white-space: nowrap;
 opacity: 0;
 transition: opacity 0.2s;
 pointer-events: none;
 }
 .beginner-mode [data-beginner-highlight]:hover::after {
 opacity: 1;
 }
 /* Hidden in beginner mode */
 .beginner-mode .advanced-feature {
 display: none !important;
 }
 /* Wizard */
 .wizard-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(10, 15, 28, 0.95);
 z-index: 7000;
 display: none;
 align-items: center;
 justify-content: center;
 }
 .wizard-overlay.active { display: flex; }
 .wizard-card {
 background: var(--bg-panel);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 40px;
 max-width: 550px;
 text-align: center;
 }
 .wizard-icon {
 width: 80px;
 height: 80px;
 background: linear-gradient(135deg, var(--primary), #059669);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 20px;
 }
 .wizard-icon i { font-size: 36px; color: #fff; }
 .wizard-card h1 {
 font-size: 22px;
 color: #fff;
 margin-bottom: 10px;
 }
 .wizard-card p {
 font-size: 13px;
 color: var(--text-2);
 margin-bottom: 25px;
 line-height: 1.6;
 }
 .wizard-question {
 font-size: 15px;
 color: var(--primary);
 font-weight: 700;
 margin-bottom: 20px;
 }
 .wizard-options {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 15px;
 margin-bottom: 20px;
 }
 .wizard-opt {
 padding: 20px;
 background: var(--bg-glass);
 border: 2px solid var(--border);
 border-radius: 12px;
 cursor: pointer;
 transition: all 0.2s;
 }
 .wizard-opt:hover {
 border-color: var(--primary);
 background: rgba(16, 211, 147, 0.1);
 }
 .wizard-opt i {
 font-size: 32px;
 margin-bottom: 10px;
 display: block;
 }
 .wizard-opt strong {
 font-size: 13px;
 color: var(--text-1);
 display: block;
 margin-bottom: 5px;
 }
 .wizard-opt span {
 font-size: 10px;
 color: var(--text-3);
 }
 .wizard-skip {
 background: none;
 border: none;
 color: var(--text-3);
 font-size: 12px;
 cursor: pointer;
 margin-top: 10px;
 }
 .wizard-skip:hover { color: var(--text-1); }
 /* ========== MULTI-POTREROS SYSTEM ========== */
 /* Floating Potreros Panel - Right Side */
 .potreros-panel {
 position: fixed;
 top: 80px;
 right: 60px;
 width: 260px;
 max-height: calc(100vh - 100px);
 background: var(--bg-panel);
 border: 1px solid var(--border);
 border-radius: 12px;
 box-shadow: var(--shadow);
 z-index: 2000;
 display: flex;
 flex-direction: column;
 transition: all 0.3s ease;
 overflow: hidden;
 }
 .potreros-panel.collapsed {
 width: 46px;
 height: 46px;
 border-radius: 10px;
 }
 .potreros-panel.collapsed .potreros-content {
 display: none;
 }
 .potreros-panel.collapsed .potreros-header {
 padding: 0;
 border: none;
 }
 .potreros-panel.collapsed .potreros-header-icon {
 width: 46px;
 height: 46px;
 border-radius: 10px;
 }
 .potreros-header {
 display: flex;
 align-items: center;
 padding: 10px 12px;
 background: linear-gradient(135deg, rgba(16, 211, 147, 0.2), rgba(139, 92, 246, 0.15));
 border-bottom: 1px solid var(--border);
 gap: 8px;
 cursor: pointer;
 }
 .potreros-header:hover {
 background: linear-gradient(135deg, rgba(16, 211, 147, 0.3), rgba(139, 92, 246, 0.2));
 }
 .potreros-header-icon {
 width: 28px;
 height: 28px;
 background: linear-gradient(135deg, var(--primary), #059669);
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 12px;
 flex-shrink: 0;
 }
 .potreros-header-info {
 flex: 1;
 min-width: 0;
 }
 .potreros-header-info h3 {
 font-size: 11px;
 font-weight: 700;
 color: #fff;
 margin: 0;
 }
 .potreros-header-info span {
 font-size: 9px;
 color: var(--text-3);
 }
 .potreros-collapse-icon {
 color: var(--text-2);
 font-size: 10px;
 transition: transform 0.3s;
 }
 .potreros-panel.collapsed .potreros-collapse-icon {
 display: none;
 }
 .potreros-content {
 display: flex;
 flex-direction: column;
 flex: 1;
 overflow: hidden;
 }
 .potreros-body {
 flex: 1;
 overflow-y: auto;
 padding: 8px;
 max-height: 350px;
 }
 .potreros-body::-webkit-scrollbar { width: 4px; }
 .potreros-body::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }
 .potreros-empty {
 text-align: center;
 padding: 20px 10px;
 color: var(--text-3);
 }
 .potreros-empty i {
 font-size: 28px;
 margin-bottom: 8px;
 opacity: 0.5;
 display: block;
 }
 .potreros-empty p {
 font-size: 10px;
 margin: 0;
 line-height: 1.4;
 }
 .potrero-item {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 10px;
 background: var(--bg-glass);
 border: 2px solid var(--border);
 border-radius: 8px;
 margin-bottom: 6px;
 cursor: pointer;
 transition: all 0.2s;
 }
 .potrero-item:hover {
 border-color: var(--text-3);
 background: var(--bg-hover);
 }
 .potrero-item.active {
 border-color: var(--primary);
 background: rgba(16, 211, 147, 0.15);
 box-shadow: 0 0 10px rgba(16, 211, 147, 0.2);
 }
 .potrero-color {
 width: 14px;
 height: 14px;
 border-radius: 4px;
 flex-shrink: 0;
 }
 .potrero-info {
 flex: 1;
 min-width: 0;
 }
 .potrero-name {
 font-size: 11px;
 font-weight: 700;
 color: var(--text-1);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .potrero-meta {
 font-size: 9px;
 color: var(--text-3);
 }
 .potrero-actions {
 display: flex;
 gap: 2px;
 opacity: 0;
 transition: opacity 0.2s;
 }
 .potrero-item:hover .potrero-actions,
 .potrero-item.active .potrero-actions {
 opacity: 1;
 }
 .potrero-action {
 width: 22px;
 height: 22px;
 border-radius: 4px;
 border: none;
 background: transparent;
 color: var(--text-3);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 9px;
 transition: all 0.2s;
 }
 .potrero-action:hover {
 background: var(--bg-hover);
 color: var(--text-1);
 }
 .potrero-action.delete:hover {
 background: rgba(239, 68, 68, 0.2);
 color: #ef4444;
 }
 .potreros-footer {
 padding: 8px;
 border-top: 1px solid var(--border);
 }
 .potreros-add-btn {
 width: 100%;
 padding: 10px;
 border-radius: 8px;
 border: 2px dashed var(--border);
 background: transparent;
 color: var(--text-2);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font-size: 11px;
 font-weight: 600;
 transition: all 0.2s;
 }
 .potreros-add-btn:hover {
 border-color: var(--primary);
 color: var(--primary);
 background: rgba(16, 211, 147, 0.1);
 }
 /* Potrero Edit Modal */
 .potrero-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(10, 15, 28, 0.9);
 z-index: 6000;
 display: none;
 align-items: center;
 justify-content: center;
 }
 .potrero-modal.active { display: flex; }
 .potrero-modal-card {
 background: var(--bg-panel);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 25px;
 width: 350px;
 }
 .potrero-modal-title {
 font-size: 16px;
 font-weight: 700;
 color: #fff;
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .potrero-colors {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 gap: 8px;
 margin-bottom: 15px;
 }
 .potrero-color-opt {
 width: 100%;
 aspect-ratio: 1;
 border-radius: 6px;
 border: 2px solid transparent;
 cursor: pointer;
 transition: all 0.2s;
 }
 .potrero-color-opt:hover {
 transform: scale(1.1);
 }
 .potrero-color-opt.selected {
 border-color: #fff;
 box-shadow: 0 0 10px currentColor;
 }
 /* Active Potrero Indicator on Map */
 .active-potrero-badge {
 position: fixed;
 top: 70px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--bg-panel);
 border: 2px solid var(--primary);
 border-radius: 25px;
 padding: 8px 20px;
 z-index: 2500;
 display: none;
 align-items: center;
 gap: 10px;
 box-shadow: var(--shadow);
 }
 .active-potrero-badge.visible { display: flex; }
 .active-potrero-badge .potrero-color {
 width: 12px;
 height: 12px;
 }
 .active-potrero-badge span {
 font-size: 12px;
 font-weight: 700;
 color: var(--text-1);
 }
 .active-potrero-badge small {
 font-size: 10px;
 color: var(--text-3);
 margin-left: 5px;
 }

 /* ========== RESPONSIVE - Mobile Support ========== */
 @media screen and (max-width: 768px) {
 /* Sidebar más angosto */
 .sidebar {
 width: 260px;
 }
 
 /* Quick tools abajo y scroll horizontal */
 .quick-tools {
 left: 10px;
 right: 10px;
 top: auto;
 bottom: 15px;
 transform: none;
 flex-wrap: nowrap;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 justify-content: flex-start;
 padding: 8px 12px;
 max-width: calc(100% - 20px);
 }
 .quick-tools::-webkit-scrollbar { display: none; }
 .quick-btn, .undo-btn {
 min-width: 40px;
 width: 40px;
 height: 40px;
 }

 /* Paneles flotantes más pequeños */
 .float-panel {
 max-width: 90vw !important;
 max-height: 60vh !important;
 left: 5% !important;
 right: 5% !important;
 }

 /* Panel potreros ajustado */
 .potreros-panel {
 right: 10px !important;
 top: 70px !important;
 width: 220px !important;
 max-height: 40vh !important;
 }

 /* Badge potrero activo */
 .active-potrero-badge {
 left: 280px;
 right: auto;
 transform: none;
 max-width: 150px;
 font-size: 10px;
 }

 /* Coordenadas ocultas en móvil */
 .coords-display {
 display: none;
 }

 /* Controles del mapa */
 .leaflet-control-zoom {
 margin-top: 10px !important;
 }
 }

 @media screen and (max-width: 480px) {
 .sidebar {
 width: 100%;
 }
 .active-potrero-badge {
 display: none;
 }
 .potreros-panel {
 width: 180px !important;
 max-height: 35vh !important;
 }
 .float-panel {
 max-height: 50vh !important;
 }
 .quick-btn, .undo-btn {
 min-width: 36px;
 width: 36px;
 height: 36px;
 font-size: 14px;
 }
 }

 /* ========== WIN-TEL CHATBOT FLOTANTE ========== */
 @keyframes chatbotPulse {
 0%, 100% { box-shadow: 0 4px 20px rgba(0, 212, 255, 0.5); }
 50% { box-shadow: 0 4px 35px rgba(0, 212, 255, 0.8); }
 }
 @keyframes badgePulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.2); }
 }

 @keyframes chatSlideUp {
 from { opacity: 0; transform: translateY(20px) scale(0.95); }
 to { opacity: 1; transform: translateY(0) scale(1); }
 }

 @keyframes statusPulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }


 .chat-msg {
 max-width: 85%;
 padding: 12px 16px;
 border-radius: 16px;
 font-size: 13px;
 line-height: 1.5;
 animation: messageIn 0.3s ease;
 }
 @keyframes messageIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .chat-msg.bot {
 align-self: flex-start;
 background: #ffffff;
 border: 1px solid #e2e8f0;
 border-bottom-left-radius: 4px;
 color: #1e293b;
 }
 .chat-msg.user {
 align-self: flex-end;
 background: linear-gradient(135deg, #00d4ff, #00b8e6);
 border-bottom-right-radius: 4px;
 color: #fff;
 }
 .chat-msg.bot p { margin-bottom: 8px; }
 .chat-msg.bot p:last-child { margin-bottom: 0; }

 .chat-opts {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 12px;
 }
 .chat-opt {
 padding: 10px 14px;
 background: rgba(0, 212, 255, 0.1);
 border: 1px solid rgba(0, 212, 255, 0.3);
 border-radius: 10px;
 color: #1e293b;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .chat-opt:hover {
 background: #00d4ff;
 color: #fff;
 border-color: #00d4ff;
 transform: translateX(5px);
 }
 .chat-opt i { font-size: 14px; }

 .wa-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 padding: 14px 20px;
 background: linear-gradient(135deg, #25D366, #128C7E);
 border: none;
 border-radius: 12px;
 color: #fff;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 margin-top: 12px;
 transition: all 0.2s;
 text-decoration: none;
 box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
 }
 .wa-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
 }
 .wa-btn i { font-size: 18px; }


 .typing-dots {
 display: flex;
 gap: 4px;
 padding: 12px 16px;
 background: #ffffff;
 border: 1px solid #e2e8f0;
 border-radius: 16px;
 border-bottom-left-radius: 4px;
 align-self: flex-start;
 max-width: 70px;
 }
 .typing-dots span {
 width: 8px;
 height: 8px;
 background: #00d4ff;
 border-radius: 50%;
 animation: typingAnim 1.4s ease-in-out infinite;
 }
 .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
 .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
 @keyframes typingAnim {
 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
 30% { transform: translateY(-6px); opacity: 1; }
 }

 @media (max-width: 768px) {
 }

 @media print {
 }

 /* ========================================
 PRV DASHBOARD - TerraCut Integration
 ======================================== */
 .prv-dashboard {
 position: fixed;
 top: 60px;
 right: 20px;
 width: 380px;
 max-height: calc(100vh - 100px);
 background: white;
 border-radius: 16px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.2);
 z-index: 1500;
 display: none;
 flex-direction: column;
 overflow: hidden;
 border: 2px solid #10b981;
 }
 .prv-dashboard.active {
 display: flex;
 animation: slideInDashboard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 @keyframes slideInDashboard {
 from { transform: translateX(100px) scale(0.9); opacity: 0; }
 to { transform: translateX(0) scale(1); opacity: 1; }
 }
 .prv-dashboard-header {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 padding: 16px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .prv-dashboard-title {
 font-size: 16px;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .prv-dashboard-close {
 background: rgba(255,255,255,0.2);
 border: none;
 color: white;
 width: 32px;
 height: 32px;
 border-radius: 8px;
 cursor: pointer;
 font-size: 18px;
 transition: all 0.2s;
 }
 .prv-dashboard-close:hover { background: rgba(255,255,255,0.3); }
 .prv-dashboard-body { padding: 16px; overflow-y: auto; flex: 1; }
 .prv-status-card {
 background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
 border-radius: 12px;
 padding: 16px;
 margin-bottom: 12px;
 border: 1px solid #a7f3d0;
 }
 .prv-status-card.warning {
 background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
 border-color: #fcd34d;
 }
 .prv-current-label {
 font-size: 10px;
 font-weight: 700;
 color: #065f46;
 text-transform: uppercase;
 margin-bottom: 4px;
 }
 .prv-current-value {
 font-size: 24px;
 font-weight: 800;
 color: #047857;
 }
 .prv-potrero-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
 gap: 8px;
 margin-top: 12px;
 }
 .prv-potrero-item {
 background: white;
 border-radius: 8px;
 padding: 8px;
 text-align: center;
 border: 2px solid #e5e7eb;
 cursor: pointer;
 transition: all 0.2s;
 position: relative;
 }
 .prv-potrero-item:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
 .prv-potrero-item.active { border-color: #10b981; background: #ecfdf5; }
 .prv-potrero-item.resting { border-color: #3b82f6; background: #eff6ff; }
 .prv-potrero-item.ready { border-color: #22c55e; background: #f0fdf4; }
 .prv-potrero-item.warning { border-color: #f59e0b; background: #fffbeb; }
 .prv-potrero-name { font-size: 11px; font-weight: 700; color: #374151; }
 .prv-potrero-days { font-size: 10px; color: #6b7280; margin-top: 2px; }
 .prv-potrero-status {
 position: absolute;
 top: -4px;
 right: -4px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 2px solid white;
 }
 .prv-potrero-status.active { background: #10b981; }
 .prv-potrero-status.resting { background: #3b82f6; }
 .prv-potrero-status.ready { background: #22c55e; animation: pulse-ready 1.5s infinite; }
 .prv-potrero-status.warning { background: #f59e0b; }
 @keyframes pulse-ready {
 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
 }

 /* ========================================
 SIMULADOR DE ROTACIÓN
 ======================================== */
 .simulation-overlay {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0,0,0,0.8);
 z-index: 2000;
 display: none;
 align-items: center;
 justify-content: center;
 }
 .simulation-overlay.active { display: flex; }
 .simulation-panel {
 background: white;
 border-radius: 20px;
 width: 90%;
 max-width: 900px;
 max-height: 90vh;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 }
 .simulation-header {
 background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
 color: white;
 padding: 20px 24px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .simulation-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
 .simulation-body {
 display: grid;
 grid-template-columns: 1fr 280px;
 flex: 1;
 overflow: hidden;
 }
 .simulation-map-container { position: relative; background: #f1f5f9; }
 .simulation-map { width: 100%; height: 100%; min-height: 400px; }
 .simulation-controls { padding: 20px; background: #f9fafb; overflow-y: auto; }
 .simulation-timeline { padding: 16px 24px; background: white; border-top: 1px solid #e5e7eb; }
 .simulation-progress {
 width: 100%;
 height: 8px;
 background: #e5e7eb;
 border-radius: 4px;
 overflow: hidden;
 margin-bottom: 12px;
 }
 .simulation-progress-bar {
 height: 100%;
 background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
 border-radius: 4px;
 transition: width 0.3s ease;
 }
 .simulation-play-controls { display: flex; justify-content: center; gap: 12px; align-items: center; }
 .sim-btn {
 width: 44px; height: 44px;
 border-radius: 50%;
 border: none;
 cursor: pointer;
 font-size: 18px;
 transition: all 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .sim-btn:hover { transform: scale(1.1); }
 .sim-btn-play {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 width: 56px; height: 56px;
 font-size: 24px;
 }
 .sim-btn-secondary { background: #f3f4f6; color: #374151; }

 /* ========================================
 RUTA OPTIMA DE PASTOREO
 ======================================== */
 .route-line {
 stroke: #8b5cf6;
 stroke-width: 4;
 stroke-dasharray: 15, 10;
 animation: route-flow 1s linear infinite;
 }
 @keyframes route-flow {
 from { stroke-dashoffset: 0; }
 to { stroke-dashoffset: -25; }
 }
 .route-marker {
 background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
 color: white;
 border-radius: 50%;
 width: 28px; height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 12px;
 border: 3px solid white;
 box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
 }

 /* ========================================
 COMPOSITOR DE IMPRESION PROFESIONAL
 ======================================== */
 .composer-overlay {
 position: fixed;
 top: 0; left: 0;
 width: 100vw; height: 100vh;
 background: rgba(30, 41, 59, 0.95);
 z-index: 10000;
 display: none;
 justify-content: center;
 align-items: center;
 }
 .composer-overlay.active { display: flex; }
 .composer-container {
 width: 95vw;
 height: 95vh;
 background: #1e293b;
 border-radius: 16px;
 overflow: hidden;
 display: grid;
 grid-template-columns: 280px 1fr 280px;
 grid-template-rows: 60px 1fr;
 box-shadow: 0 25px 80px rgba(0,0,0,0.5);
 }
 .composer-header {
 grid-column: 1 / -1;
 background: linear-gradient(135deg, #059669 0%, #047857 100%);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 20px;
 color: white;
 }
 .composer-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
 .composer-actions { display: flex; gap: 10px; }
 .composer-btn {
 padding: 10px 18px;
 border: none;
 border-radius: 8px;
 font-weight: 600;
 font-size: 12px;
 cursor: pointer;
 transition: all 0.2s;
 display: flex;
 align-items: center;
 gap: 6px;
 }
 .composer-btn:hover { transform: translateY(-1px); }
 .composer-btn-primary { background: white; color: #059669; }
 .composer-btn-secondary { background: rgba(255,255,255,0.2); color: white; }
 .composer-btn-close { background: rgba(255,255,255,0.1); color: white; font-size: 18px; padding: 8px 14px; }
 .composer-sidebar {
 background: #0f172a;
 padding: 20px;
 overflow-y: auto;
 color: white;
 }
 .composer-sidebar h3 {
 font-size: 12px;
 font-weight: 700;
 color: #94a3b8;
 text-transform: uppercase;
 margin: 20px 0 12px 0;
 letter-spacing: 0.5px;
 }
 .composer-sidebar h3:first-child { margin-top: 0; }
 .composer-group { margin-bottom: 16px; }
 .composer-input-group { margin-bottom: 12px; }
 .composer-input-group label {
 display: block;
 font-size: 11px;
 color: #64748b;
 margin-bottom: 6px;
 }
 .composer-select, .composer-input {
 width: 100%;
 padding: 10px 12px;
 background: #1e293b;
 border: 1px solid #334155;
 border-radius: 6px;
 color: white;
 font-size: 12px;
 }
 .composer-select:focus, .composer-input:focus {
 outline: none;
 border-color: #10b981;
 }
 .composer-checkbox {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 8px 0;
 cursor: pointer;
 font-size: 12px;
 }
 .composer-checkbox input { accent-color: #10b981; }
 .composer-canvas-area {
 background: #334155;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: auto;
 position: relative;
 padding: 40px;
 }
 .composer-page {
 background: white;
 box-shadow: 0 10px 40px rgba(0,0,0,0.3);
 position: relative;
 transform-origin: center center;
 }
 .composer-page-a4-h { width: 1122px; height: 793px; }
 .composer-page-a4 { width: 793px; height: 1122px; }
 .composer-page-a3-h { width: 1587px; height: 1122px; }
 .composer-page-a3 { width: 1122px; height: 1587px; }
 .composer-zoom {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 background: #1e293b;
 padding: 8px 16px;
 border-radius: 30px;
 display: flex;
 align-items: center;
 gap: 12px;
 }
 .composer-zoom button {
 background: #334155;
 border: none;
 color: white;
 width: 32px; height: 32px;
 border-radius: 50%;
 cursor: pointer;
 font-size: 16px;
 }
 .composer-zoom span { color: white; font-size: 12px; font-weight: 600; }
 .layout-map {
 position: absolute;
 border: 1px solid #0f172a;
 overflow: hidden;
 }
 .layout-grid { position: absolute; pointer-events: none; }
 .layout-north-arrow {
 position: absolute;
 width: 50px;
 height: 70px;
 }
 .layout-scale-bar {
 position: absolute;
 background: white;
 padding: 8px 12px;
 border-radius: 4px;
 border: 1px solid #e5e7eb;
 }
 .scale-bar-graphic {
 display: flex;
 height: 8px;
 border: 1px solid #0f172a;
 }
 .scale-bar-segment {
 flex: 1;
 background: #0f172a;
 }
 .scale-bar-segment:nth-child(even) { background: white; }
 .layout-legend {
 position: absolute;
 background: white;
 border: 1px solid #e5e7eb;
 border-radius: 4px;
 padding: 12px;
 font-size: 10px;
 }
 .layout-legend-title {
 font-weight: 700;
 font-size: 11px;
 margin-bottom: 10px;
 padding-bottom: 6px;
 border-bottom: 1px solid #e5e7eb;
 }
 .layout-legend-item {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 6px;
 }
 .layout-title-box {
 position: absolute;
 background: white;
 border: 1px solid #e5e7eb;
 border-radius: 4px;
 padding: 12px;
 }
 .layout-table {
 position: absolute;
 background: white;
 border: 1px solid #e5e7eb;
 border-radius: 4px;
 overflow: hidden;
 }
 .layout-table table {
 width: 100%;
 border-collapse: collapse;
 font-size: 9px;
 }
 .layout-table th, .layout-table td {
 padding: 4px 6px;
 border: 1px solid #e5e7eb;
 text-align: left;
 }
 .layout-table th {
 background: #f1f5f9;
 font-weight: 700;
 }
 .layout-cajetin {
 position: absolute;
 background: white;
 border: 2px solid #0f172a;
 display: grid;
 }
 .cajetin-cell {
 border: 1px solid #0f172a;
 padding: 6px 10px;
 display: flex;
 align-items: center;
 }
 .cajetin-header {
 font-weight: 800;
 font-size: 12px;
 text-transform: uppercase;
 justify-content: center;
 }
 .cajetin-label {
 font-size: 8px;
 color: #64748b;
 text-transform: uppercase;
 }
 .cajetin-value {
 font-size: 10px;
 font-weight: 600;
 }

 /* ========================================
 LINE ELEVATION PROFILE - Nueva Función
 Perfil de Elevación para Líneas/Rutas
 ======================================== */
 .line-profile-panel {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 height: 280px;
 background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.99) 100%);
 backdrop-filter: blur(20px);
 border-top: 2px solid #8b5cf6;
 z-index: 2500;
 display: none;
 flex-direction: column;
 box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .line-profile-panel.active {
 display: flex;
 transform: translateY(0);
 }
 .line-profile-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 20px;
 background: linear-gradient(90deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
 border-bottom: 1px solid rgba(139, 92, 246, 0.3);
 }
 .line-profile-title {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 14px;
 font-weight: 700;
 color: white;
 }
 .line-profile-title i {
 color: #8b5cf6;
 font-size: 18px;
 }
 .line-profile-stats {
 display: flex;
 gap: 24px;
 }
 .line-profile-stat {
 text-align: center;
 }
 .line-profile-stat-value {
 font-size: 16px;
 font-weight: 800;
 color: #10b981;
 font-family: 'Monaco', monospace;
 }
 .line-profile-stat-label {
 font-size: 9px;
 color: #94a3b8;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }
 .line-profile-actions {
 display: flex;
 gap: 8px;
 }
 .line-profile-btn {
 padding: 8px 14px;
 border: none;
 border-radius: 6px;
 font-size: 11px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s;
 display: flex;
 align-items: center;
 gap: 6px;
 }
 .line-profile-btn-primary {
 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 color: white;
 }
 .line-profile-btn-secondary {
 background: rgba(255, 255, 255, 0.1);
 color: white;
 border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .line-profile-btn:hover {
 transform: translateY(-1px);
 filter: brightness(1.1);
 }
 .line-profile-btn-close {
 background: rgba(239, 68, 68, 0.2);
 color: #f87171;
 border: 1px solid rgba(239, 68, 68, 0.3);
 }
 .line-profile-body {
 flex: 1;
 display: flex;
 padding: 16px 20px;
 gap: 20px;
 overflow: hidden;
 }
 .line-profile-chart-container {
 flex: 1;
 position: relative;
 background: rgba(0, 0, 0, 0.3);
 border-radius: 12px;
 border: 1px solid rgba(139, 92, 246, 0.2);
 overflow: hidden;
 }
 .line-profile-chart {
 width: 100%;
 height: 100%;
 cursor: crosshair;
 }
 .line-profile-tooltip {
 position: absolute;
 background: rgba(15, 23, 42, 0.95);
 border: 2px solid #8b5cf6;
 border-radius: 10px;
 padding: 12px 16px;
 pointer-events: auto;
 z-index: 100;
 display: none;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
 min-width: 180px;
 max-width: 220px;
 }
 .line-profile-tooltip.active {
 display: block;
 }
 .line-profile-tooltip-elev {
 font-size: 22px;
 font-weight: 800;
 color: #10b981;
 }
 .line-profile-tooltip-dist {
 font-size: 11px;
 color: #94a3b8;
 margin-top: 4px;
 }
 .line-profile-tooltip-grade {
 font-size: 11px;
 color: #f59e0b;
 margin-top: 2px;
 }
 .line-profile-cursor {
 position: absolute;
 width: 2px;
 background: #8b5cf6;
 top: 0;
 bottom: 0;
 pointer-events: none;
 display: none;
 box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
 }
 .line-profile-cursor.active {
 display: block;
 }
 .line-profile-cursor-dot {
 position: absolute;
 width: 12px;
 height: 12px;
 background: #8b5cf6;
 border: 3px solid white;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 .line-profile-info-panel {
 width: 200px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 }
 .line-profile-info-card {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 8px;
 padding: 12px;
 }
 .line-profile-info-title {
 font-size: 10px;
 color: #64748b;
 text-transform: uppercase;
 margin-bottom: 8px;
 font-weight: 600;
 }
 .line-profile-info-row {
 display: flex;
 justify-content: space-between;
 font-size: 12px;
 margin-bottom: 4px;
 }
 .line-profile-info-label {
 color: #94a3b8;
 }
 .line-profile-info-value {
 color: white;
 font-weight: 600;
 font-family: monospace;
 }
 .line-profile-info-value.positive {
 color: #10b981;
 }
 .line-profile-info-value.negative {
 color: #ef4444;
 }

 /* Botón flotante para activar modo línea */
 .line-profile-fab {
 position: fixed;
 top: 80px;
 left: 70px;
 width: 48px;
 height: 48px;
 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 border: none;
 border-radius: 10px;
 color: white;
 font-size: 20px;
 cursor: pointer;
 z-index: 2500;
 box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
 transition: all 0.3s;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .line-profile-fab:hover {
 transform: scale(1.1);
 box-shadow: 0 6px 30px rgba(139, 92, 246, 0.7);
 }
 .line-profile-fab.active {
 background: linear-gradient(135deg, #ef4444, #dc2626);
 animation: pulse-fab 1.5s infinite;
 }
 @keyframes pulse-fab {
 0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5); }
 50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.8); }
 }
 .line-profile-fab[data-tooltip]:hover::after {
 content: attr(data-tooltip);
 position: absolute;
 left: 100%;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(15, 23, 42, 0.95);
 color: white;
 padding: 8px 12px;
 border-radius: 6px;
 font-size: 12px;
 white-space: nowrap;
 margin-left: 10px;
 border: 1px solid rgba(139, 92, 246, 0.3);
 }

 /* Indicador de modo dibujo */
 .line-draw-indicator {
 position: fixed;
 top: 80px;
 left: 50%;
 transform: translateX(-50%);
 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 color: white;
 padding: 12px 24px;
 border-radius: 30px;
 font-size: 13px;
 font-weight: 600;
 z-index: 2000;
 display: none;
 align-items: center;
 gap: 10px;
 box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
 animation: pulse-indicator 2s infinite;
 }
 .line-draw-indicator.active {
 display: flex;
 }
 @keyframes pulse-indicator {
 0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); }
 50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.7); }
 }

 /* Marcador en el mapa */
 .line-profile-map-marker {
 width: 16px;
 height: 16px;
 background: #8b5cf6;
 border: 3px solid white;
 border-radius: 50%;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }