/* VERSÃO DO ARQUIVO: 1.3.24 - Adicionado flex-wrap aos controles de visualização no mobile */
/* Fonte JetBrains Mono hospedada localmente */
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/JetBrainsMono/JetBrainsMono-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/JetBrainsMono/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
:root{
--visualizador-svg-editor-bg:#f6f8fa;
--visualizador-svg-editor-text:#24292f;
--visualizador-svg-editor-border:#d0d7de;
--visualizador-svg-editor-line-numbers-bg:#ffffff;
--visualizador-svg-editor-line-numbers-text:#57606a;
--visualizador-svg-editor-focus:#0969da;
--visualizador-svg-editor-selection:rgba(9,105,218,0.15);
--visualizador-svg-container-bg:var(--white);
--visualizador-svg-container-border:var(--light-gray);
--visualizador-svg-checker-rgba:rgba(0,0,0,0.05);}
[data-theme="dark"]{
--visualizador-svg-editor-bg:#1e1e1e;
--visualizador-svg-editor-text:#d4d4d4;
--visualizador-svg-editor-border:#3c3c3c;
--visualizador-svg-editor-line-numbers-bg:#252526;
--visualizador-svg-editor-line-numbers-text:#858585;
--visualizador-svg-editor-focus:#007acc;
--visualizador-svg-editor-selection:rgba(38,79,120,0.4);
--visualizador-svg-container-bg:#2d2d2d;
--visualizador-svg-container-border:#495057;
--visualizador-svg-checker-rgba:rgba(255,255,255,0.05);}
.visualizador-svg-container{background:var(--white);border-radius:16px;padding:var(--spacing-xl);box-shadow:var(--box-shadow-sm);overflow:hidden;}
.visualizador-svg-editor-wrapper{position:relative;border-radius:var(--border-radius-md);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid var(--visualizador-svg-editor-border);background:var(--visualizador-svg-editor-bg);transition:all var(--transition-fast);margin-bottom: var(--spacing-lg);}
.visualizador-svg-editor-wrapper:focus-within{box-shadow:0 0 0 3px rgba(0,166,81,0.15),0 4px 12px rgba(0,0,0,0.2);border-color:var(--visualizador-svg-editor-focus);}
.visualizador-svg-editor-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--visualizador-svg-editor-line-numbers-bg);border-bottom:1px solid var(--visualizador-svg-editor-border);}
.visualizador-svg-editor-title{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--visualizador-svg-editor-line-numbers-text);font-family:'Segoe UI',Tahoma,sans-serif;}
.visualizador-svg-editor-title svg{width:14px;height:14px;opacity:0.8;}
.visualizador-svg-editor-dots{display:flex;gap:6px;}
.visualizador-svg-editor-dot{width:12px;height:12px;border-radius:50%;opacity:0.6;}
.visualizador-svg-editor-dot:nth-child(1){background:#ff5f56;}
.visualizador-svg-editor-dot:nth-child(2){background:#ffbd2e;}
.visualizador-svg-editor-dot:nth-child(3){background:#27c93f;}
.visualizador-svg-textarea{width:100%;height:300px;font-family:'JetBrains Mono',monospace;font-size:0.9rem;line-height:1.6;box-sizing:border-box;padding:16px;border:none;background:var(--visualizador-svg-editor-bg);color:var(--visualizador-svg-editor-text);resize:vertical;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:none;outline:none;display:block;white-space:pre-wrap;overflow-wrap:normal;word-wrap:normal;}
.visualizador-svg-textarea:focus{outline:none;border:none;box-shadow:none;}
.visualizador-svg-textarea.validacao-erro{border-left:4px solid #ef4444;background:rgba(239,68,68,0.05);}
[data-theme="dark"] .visualizador-svg-textarea.validacao-erro{background:rgba(239,68,68,0.1);}
.visualizador-svg-textarea.validacao-sucesso{border-left:4px solid #22c55e;background:rgba(34,197,94,0.05);}
[data-theme="dark"] .visualizador-svg-textarea.validacao-sucesso{background:rgba(34,197,94,0.1);}
.visualizador-svg-textarea.validacao-aviso{border-left:4px solid #f59e0b;background:rgba(245,158,11,0.05);}
[data-theme="dark"] .visualizador-svg-textarea.validacao-aviso{background:rgba(245,158,11,0.1);}
.visualizador-svg-textarea::placeholder{color:var(--visualizador-svg-editor-line-numbers-text);opacity:0.7;font-style:italic;}
.visualizador-svg-textarea::selection{background:var(--visualizador-svg-editor-selection);}
.visualizador-svg-editor-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--visualizador-svg-editor-line-numbers-bg);border-top:1px solid var(--visualizador-svg-editor-border);font-size:0.75rem;color:var(--visualizador-svg-editor-line-numbers-text);font-family:'Segoe UI',Tahoma,sans-serif;}
.visualizador-svg-editor-info{display:flex;gap:16px;}
.visualizador-svg-editor-info span{display:flex;align-items:center;gap:4px;}
.visualizador-svg-editor-footer-right{display:flex;align-items:center;gap:12px;}
.visualizador-svg-live-preview-indicator{display:flex;align-items:center;gap:6px;padding:2px 8px;background:rgba(34,197,94,0.15);border-radius:4px;color:#22c55e;font-weight:500;font-size:0.75rem;animation:pulse-live-preview 2s ease-in-out infinite;transition:all var(--transition-fast);}
.visualizador-svg-live-preview-indicator svg{animation:rotate-live-preview 2s linear infinite;}
[data-theme="dark"] .visualizador-svg-live-preview-indicator{background:rgba(34,197,94,0.2);color:#4ade80;}
.visualizador-svg-live-preview-indicator.processando{background:rgba(59,130,246,0.15);color:#3b82f6;animation:pulse-processando 1s ease-in-out infinite;}
[data-theme="dark"] .visualizador-svg-live-preview-indicator.processando{background:rgba(96,165,250,0.2);color:#60a5fa;}
.visualizador-svg-live-preview-indicator.processando svg{animation:rotate-processando 1s linear infinite;}
@keyframes pulse-live-preview{0%,100%{opacity:1;}50%{opacity:0.7;}}
@keyframes rotate-live-preview{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes pulse-processando{0%,100%{opacity:1;}50%{opacity:0.6;}}
@keyframes rotate-processando{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.visualizador-svg-editor-language{display:flex;align-items:center;gap:6px;padding:2px 8px;background:rgba(0,122,204,0.15);border-radius:4px;color:#007acc;font-weight:500;}
[data-theme="dark"] .visualizador-svg-editor-language{background:rgba(88,166,255,0.15);color:#58a6ff;}
.visualizador-svg-preview{margin-top:var(--spacing-lg);height:468px;display:flex;align-items:center;justify-content:center;border:2px solid var(--visualizador-svg-container-border);border-radius:var(--border-radius-md);padding:var(--spacing-xl);background:var(--visualizador-svg-container-bg);box-shadow:var(--box-shadow-sm);transition:all var(--transition-normal);position:relative;overflow:hidden;background-image:linear-gradient(45deg,var(--visualizador-svg-checker-rgba) 25%,transparent 25%),linear-gradient(-45deg,var(--visualizador-svg-checker-rgba) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--visualizador-svg-checker-rgba) 75%),linear-gradient(-45deg,transparent 75%,var(--visualizador-svg-checker-rgba) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;}
.visualizador-svg-preview.sem-svg::before{content:'Adicione um código SVG na área de texto acima e clique em "Visualizar" para ver a renderização aqui.';color:var(--color-text-secondary);font-style:normal;font-size:0.95rem;text-align:center;padding:var(--spacing-lg);line-height:1.6;display:block;}
.visualizador-svg-preview:empty::before{content:'Adicione um código SVG na área de texto acima e clique em "Visualizar" para ver a renderização aqui.';color:var(--color-text-secondary);font-style:normal;font-size:0.95rem;text-align:center;padding:var(--spacing-lg);line-height:1.6;display:block;}
.visualizador-svg-preview svg{max-width:100%;max-height:400px;width:auto;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.1));transition:transform var(--transition-normal);}
.visualizador-svg-preview svg:hover{transform:scale(1.05);}
.visualizador-svg-buttons{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);flex-wrap:wrap;}
.visualizador-svg-buttons-left{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;}
.visualizador-svg-buttons-right{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;margin-left:auto;}
@media (max-width:768px){
.visualizador-svg-container{padding:var(--spacing-lg);}
.visualizador-svg-textarea{height:250px;font-size:0.85rem;padding:14px;}
.visualizador-svg-editor-header{padding:6px 10px;}
.visualizador-svg-editor-title{font-size:0.8rem;}
.visualizador-svg-editor-dot{width:10px;height:10px;}
.visualizador-svg-editor-footer{padding:5px 10px;font-size:0.7rem;}
.visualizador-svg-preview{height:368px;padding:var(--spacing-lg);}
.visualizador-svg-preview svg{max-height:300px;}
.visualizador-svg-preview.modo-tamanho-real svg{max-width:300px;max-height:300px;}
    .visualizador-svg-buttons{width:100%;flex-direction:column;gap:var(--spacing-sm);}
    .visualizador-svg-buttons-left{width:100%;flex-direction:column;}
    .visualizador-svg-buttons-right{width:100%;margin-left:0;}
    .visualizador-svg-buttons .tool-btn{flex:1;justify-content:center;width:100%;}
    .visualizador-svg-preview-controls{flex-wrap: wrap;}}
@media (max-width:480px){
.visualizador-svg-textarea{height:220px;font-size:0.8rem;padding:12px;}
.visualizador-svg-editor-title{font-size:0.75rem;gap:6px;}
.visualizador-svg-editor-dots{gap:4px;}
.visualizador-svg-editor-info{gap:12px;}
.visualizador-svg-preview{height:318px;padding:var(--spacing-md);}
.visualizador-svg-preview svg{max-height:250px;}
.visualizador-svg-preview.modo-tamanho-real svg{max-width:250px;max-height:250px;}}
.visualizador-svg-preview-controls{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--visualizador-svg-editor-line-numbers-bg);border:1px solid var(--visualizador-svg-editor-border);border-radius:var(--border-radius-md);gap:var(--spacing-md);}
.visualizador-svg-view-mode{display:flex;align-items:center;gap:var(--spacing-sm);}
.visualizador-svg-view-mode-toggle{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;}
.visualizador-svg-view-mode-toggle input[type="checkbox"]{margin:0;}
.visualizador-svg-view-mode-text{font-size:0.9rem;font-weight:500;color:var(--visualizador-svg-editor-text);user-select:none;margin-left:4px;transition:color var(--transition-fast);}
.visualizador-svg-view-mode-toggle:hover .visualizador-svg-view-mode-text{color:var(--visualizador-svg-editor-focus);}
.visualizador-svg-zoom-controls{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--visualizador-svg-editor-bg);border:1px solid var(--visualizador-svg-editor-border);border-radius:var(--border-radius-sm);padding:4px;opacity:0.5;pointer-events:none;transition:opacity var(--transition-fast);cursor:not-allowed;}
.visualizador-svg-zoom-controls.ativo{opacity:1;pointer-events:auto;cursor:default;}
.visualizador-svg-zoom-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;color:var(--visualizador-svg-editor-text);cursor:pointer;border-radius:var(--border-radius-sm);transition:all var(--transition-fast);}
.visualizador-svg-zoom-btn:hover:not(:disabled){background:var(--visualizador-svg-editor-selection);color:var(--visualizador-svg-editor-focus);}
.visualizador-svg-zoom-btn:active:not(:disabled){transform:scale(0.95);}
.visualizador-svg-zoom-btn:disabled{opacity:0.5;cursor:not-allowed;}
.visualizador-svg-zoom-display{min-width:60px;text-align:center;font-size:0.85rem;font-weight:500;color:var(--visualizador-svg-editor-text);padding:0 var(--spacing-xs);user-select:none;}
.visualizador-svg-zoom-controls:not(.ativo) .visualizador-svg-zoom-display{cursor:not-allowed;}
.visualizador-svg-preview.modo-tamanho-real{overflow:auto;display:flex;align-items:center;justify-content:center;position:relative;}
.visualizador-svg-preview.modo-tamanho-real svg{max-width:400px;max-height:400px;width:auto;height:auto;min-width:50px;min-height:50px;flex-shrink:0;margin:auto;display:block;}
.visualizador-svg-preview svg[data-zoom]{transform-origin:center center;}