:root{
--seletor-cor-bg:#f0f8f5;
--seletor-cor-text:#1f2937;
--seletor-cor-border:#d1f0e5;
--seletor-btn-border-radius:5px;
}
[data-theme="dark"]{
--seletor-cor-bg: #181818;
--seletor-cor-text: #e0e0e0;
--seletor-cor-border: #333;
}
.seletor-cor-container{max-width:800px;margin:0 auto;background:var(--white);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow);overflow:hidden;position:relative;}
[data-theme="dark"] .seletor-cor-container{background:var(--white);}
.seletor-cor-main{padding:var(--spacing-xl);}
.color-pickers-container{position:relative;margin-bottom:var(--spacing-lg);}
.picker-sv{width:100%;height:280px;cursor:crosshair;border-radius:var(--border-radius-md);margin-bottom:var(--spacing-md);touch-action:none;box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:box-shadow var(--transition-normal);display:block;}
.picker-sv:hover{box-shadow:0 6px 25px rgba(0,0,0,0.15);}
.picker-hue{width:100%;height:20px;cursor:pointer;border-radius:var(--border-radius-sm);touch-action:none;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:box-shadow var(--transition-normal);display:block;}
.picker-hue:hover{box-shadow:0 3px 12px rgba(0,0,0,0.15);}
.picker-pointer{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.5);pointer-events:none;transform:translate(-50%,-50%);transition:transform 0.1s ease;z-index:10;}
.picker-pointer.sv-pointer{background:transparent;}
.picker-pointer.hue-pointer{background:#fff;width:12px;height:12px;border:2px solid #000;border-radius:50%;}
.picker-wrapper{position:relative;display:inline-block;width:100%;}
.picker-wrapper.sv-wrapper{margin-bottom:var(--spacing-md);}
.seletor-cor-codigos{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);}
.codigo-group{background:var(--off-white);border-radius:var(--border-radius-md);padding:var(--spacing-md);border:2px solid transparent;transition:all var(--transition-fast);min-width:0;}
.codigo-group:hover{border-color:var(--primary-green);background:#f0f8f5;}
.codigo-label{font-weight:600;color:var(--dark-gray);margin-bottom:var(--spacing-xs);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;}
.codigo-input-group{display:flex;gap:var(--spacing-sm);min-width:0;}
.codigo-input{flex:1;min-width:0;padding:var(--spacing-md);border:2px solid var(--light-gray);border-radius:var(--border-radius-sm);font-family:'Courier New',monospace;font-weight:600;font-size:1rem;background:var(--white);color:var(--dark-gray);transition:border-color var(--transition-fast);}
.codigo-input:focus{outline:none;border-color:var(--primary-green);}
[class*="seletor-btn"]{border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-buscar,.seletor-btn-copiar{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;font-size:0.9rem;}
.seletor-btn-salvar{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:1.1rem;border-radius:var(--seletor-btn-border-radius);}
.seletor-cor-busca{background:var(--off-white);border-radius:var(--border-radius-md);padding:0;margin-bottom:var(--spacing-lg);border:2px solid var(--light-gray);overflow:hidden;}
.busca-header{padding:var(--spacing-md);cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:var(--off-white);border-bottom:1px solid transparent;transition:all var(--transition-fast);}
.busca-header:hover{background:#f0f8f5;border-bottom-color:var(--light-gray);}
.busca-content{padding:var(--spacing-md);max-height:200px;opacity:1;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease,padding 0.3s ease;}
.seletor-cor-busca.collapsed .busca-content{max-height:0;opacity:0;padding:0 var(--spacing-md);}
.busca-toggle-icon{width:20px;height:20px;fill:var(--primary-blue);transition:transform var(--transition-fast);}
.seletor-cor-busca.collapsed .busca-toggle-icon{transform:rotate(-90deg);}
.busca-titulo{font-size:1rem;font-weight:600;color:var(--dark-gray);margin-bottom:0;display:flex;align-items:center;gap:var(--spacing-xs);}
.busca-titulo svg{width:16px;height:16px;fill:var(--primary-blue);}
.busca-select{width:100%;padding:var(--spacing-sm);border:2px solid var(--light-gray);border-radius:var(--border-radius-sm);font-weight:600;font-size:0.9rem;background:var(--white);color:var(--dark-gray);transition:border-color var(--transition-fast);cursor:pointer;}
.busca-select:focus{outline:none;border-color:var(--primary-blue);}
.busca-input-group{display:flex;gap:var(--spacing-sm);align-items:end;}
.busca-field{flex:1;}
.busca-label{display:block;font-weight:500;color:var(--dark-gray);margin-bottom:4px;font-size:0.85rem;}
.busca-input{width:100%;padding:var(--spacing-sm);border:2px solid var(--light-gray);border-radius:var(--border-radius-sm);font-family:'Courier New',monospace;font-weight:600;font-size:0.9rem;background:var(--white);color:var(--dark-gray);transition:border-color var(--transition-fast);}
.busca-input:focus{outline:none;border-color:var(--primary-blue);}
.observacao-input{width:100%;padding:var(--spacing-md);border:2px solid var(--light-gray);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-md);font-family:inherit;resize:vertical;min-height:80px;transition:border-color var(--transition-fast);}
.observacao-input:focus{outline:none;border-color:var(--primary-green);}
.seletor-cor-salvas{background:var(--off-white);border-radius:var(--border-radius-md);padding:var(--spacing-lg);border:2px solid var(--light-gray);}
.salvas-titulo{font-size:1.3rem;font-weight:700;color:var(--dark-gray);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);}
.salvas-titulo svg{width:20px;height:20px;fill:var(--primary-green);}
.lista-cores-empty{text-align:center;color:var(--medium-gray);font-style:italic;padding:var(--spacing-xl);}
.seletor-cor-item{display:flex;align-items:center;padding:var(--spacing-md);border:2px solid var(--light-gray);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-md);background-color:var(--white);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;}
.seletor-cor-item::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:var(--primary-green);transform:scaleY(0);transition:transform var(--transition-fast);}
.seletor-cor-item:hover{border-color:var(--primary-green);transform:translateX(4px);box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.seletor-cor-item:hover::before{transform:scaleY(1);}
.seletor-cor-preview{width:50px;height:50px;border-radius:var(--border-radius-sm);margin-right:var(--spacing-md);border:3px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,0.2);flex-shrink:0;}
.seletor-cor-info{flex:1;min-width:0;}
.cor-codigos{font-family:'Courier New',monospace;font-weight:600;font-size:0.95rem;color:var(--dark-gray);margin-bottom:var(--spacing-xs);}
.cor-observacao{color:var(--medium-gray);font-size:0.9rem;word-wrap:break-word;}
.seletor-cor-botoes{display:flex;flex-direction:column;gap:var(--spacing-xs);flex-shrink:0;min-width:120px;}
.cor-botoes-linha{display:flex;gap:var(--spacing-xs);}
.btn-acao{padding:var(--spacing-sm) var(--spacing-md);font-weight:500;cursor:pointer;font-size:0.85rem;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-copiar-hex,.seletor-btn-copiar-rgb{flex:1;text-align:center;justify-content:center;min-width:0;padding:var(--spacing-xs) var(--spacing-sm);font-size:0.8rem;gap:4px;display:flex;align-items:center;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-editar{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;min-width:0;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-excluir{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;min-width:0;border-radius:var(--seletor-btn-border-radius);}
.cor-atual-container{display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--off-white);border-radius:var(--border-radius-md);border:2px solid var(--light-gray);}
.cor-atual-preview{width:60px;height:60px;border-radius:var(--border-radius-md);border:3px solid var(--white);box-shadow:0 4px 15px rgba(0,0,0,0.2);margin-right:var(--spacing-md);transition:all var(--transition-fast);background-color:#ff0000;}
.cor-atual-info{flex:1;}
.cor-atual-titulo{font-weight:600;color:var(--dark-gray);margin-bottom:var(--spacing-xs);font-size:1rem;}
.cor-atual-codigos{font-family:'Courier New',monospace;font-weight:500;font-size:0.9rem;color:var(--medium-gray);line-height:1.4;}
[data-theme="dark"] .codigo-group{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .codigo-group:hover{border-color:var(--primary-green);background:rgba(0,166,81,0.1);}
[data-theme="dark"] .codigo-label{color:var(--seletor-cor-text);}
[data-theme="dark"] .codigo-input{background:var(--white);color:var(--dark-gray);border-color:var(--light-gray);}
[data-theme="dark"] .codigo-input:focus{border-color:var(--primary-green);}
[data-theme="dark"] .seletor-cor-busca{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .busca-header{background:var(--seletor-cor-bg);border-bottom-color:var(--seletor-cor-border);}
[data-theme="dark"] .busca-header:hover{background:rgba(0,166,81,0.1);border-bottom-color:var(--seletor-cor-border);}
[data-theme="dark"] .busca-titulo{color:var(--seletor-cor-text);}
[data-theme="dark"] .busca-select{background:var(--white);color:var(--dark-gray);border-color:var(--light-gray);}
[data-theme="dark"] .busca-select:focus{border-color:var(--primary-blue);}
[data-theme="dark"] .busca-label{color:var(--seletor-cor-text);}
[data-theme="dark"] .busca-input{background:var(--white);color:var(--dark-gray);border-color:var(--light-gray);}
[data-theme="dark"] .busca-input:focus{border-color:var(--primary-blue);}
[data-theme="dark"] .observacao-input{background:var(--white);color:var(--dark-gray);border-color:var(--light-gray);}
[data-theme="dark"] .observacao-input:focus{border-color:var(--primary-green);}
[data-theme="dark"] .seletor-cor-salvas{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .salvas-titulo{color:var(--seletor-cor-text);}
[data-theme="dark"] .lista-cores-empty{color:var(--medium-gray);}
[data-theme="dark"] .seletor-cor-item{background:var(--white);border-color:var(--light-gray);}
[data-theme="dark"] .seletor-cor-item:hover{border-color:var(--primary-green);box-shadow:0 4px 15px rgba(0,166,81,0.15);}
[data-theme="dark"] .cor-codigos{color:var(--dark-gray);}
[data-theme="dark"] .cor-observacao{color:var(--medium-gray);}
[data-theme="dark"] .cor-atual-container{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .cor-atual-container:hover{border-color:var(--primary-green);background:rgba(0,166,81,0.08);}
[data-theme="dark"] .cor-atual-titulo{color:var(--seletor-cor-text);}
[data-theme="dark"] .cor-atual-codigos{color:var(--medium-gray);}
[data-theme="dark"] .cor-preview-rapido{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .cor-preview-rapido:hover{border-color:var(--primary-green);background:rgba(0,166,81,0.08);}
[data-theme="dark"] .cor-preview-titulo{color:var(--seletor-cor-text);}
[data-theme="dark"] .cor-preview-codigos{color:var(--medium-gray);}
[data-theme="dark"] .precision-sliders{background:var(--seletor-cor-bg);border-color:var(--seletor-cor-border);}
[data-theme="dark"] .slider-label{color:var(--seletor-cor-text);}
[data-theme="dark"] .slider-value-editable:hover{background:rgba(0,166,81,0.3);}
[data-theme="dark"] .precision-slider{background:#555;}
[data-theme="dark"] .precision-slider::-webkit-slider-thumb{background:var(--primary-green);border-color:#333;}
[data-theme="dark"] .precision-slider::-moz-range-thumb{background:var(--primary-green);border-color:#333;}
@media (max-width:768px){
.seletor-cor-main{padding:var(--spacing-lg);}
.picker-sv{height:220px;}
.picker-hue{height:18px;}
.codigo-input-group{flex-direction:column;gap:var(--spacing-sm);}
.seletor-btn-copiar{justify-content:center;padding:var(--spacing-md);font-size:1rem;border-radius:var(--seletor-btn-border-radius);}
.busca-content{max-height:280px;}
.busca-input-group{flex-direction:column;gap:var(--spacing-md);align-items:stretch;}
.busca-field{flex:none;width:100%;}
.busca-select{padding:var(--spacing-md);font-size:1rem;}
.seletor-btn-buscar{width:100%;justify-content:center;align-self:stretch;margin-top:0;border-radius:var(--seletor-btn-border-radius);}
.seletor-cor-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-md);}
.seletor-cor-preview{width:40px;height:40px;margin-right:0;}
.seletor-cor-botoes{align-self:stretch;flex-direction:column;gap:var(--spacing-sm);min-width:auto;width:100%;}
.cor-botoes-linha{width:100%;gap:var(--spacing-sm);}
.btn-acao{flex:1;text-align:center;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.8rem;min-width:0;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-copiar-hex{flex:1;text-align:center;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.8rem;min-width:0;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-copiar-rgb{flex:1;text-align:center;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.8rem;min-width:0;border-radius:var(--seletor-btn-border-radius);}
}
@media (max-width:480px){
.seletor-cor-main{padding:var(--spacing-md);}
.picker-sv{height:200px;}
.picker-hue{height:16px;}
.busca-select{padding:var(--spacing-md);font-size:1rem;}
.salvas-titulo{font-size:1.1rem;}
.seletor-cor-botoes{flex-direction:column;gap:var(--spacing-sm);width:100%;}
.cor-botoes-linha{flex-direction:row;gap:var(--spacing-xs);width:100%;}
.btn-acao{flex:1;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.75rem;min-width:0;white-space:nowrap;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-copiar-hex{flex:1;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.75rem;min-width:0;white-space:nowrap;border-radius:var(--seletor-btn-border-radius);}
.seletor-btn-copiar-rgb{flex:1;padding:var(--spacing-sm) var(--spacing-xs);font-size:0.75rem;min-width:0;white-space:nowrap;border-radius:var(--seletor-btn-border-radius);}
}
.cor-preview-rapido{display:flex;align-items:center;padding:var(--spacing-md);background:var(--off-white);border-radius:var(--border-radius-md);border:2px solid var(--light-gray);margin-bottom:var(--spacing-lg);transition:all var(--transition-fast);}
.cor-preview-rapido:hover{border-color:var(--primary-green);background:#f0f8f5;}
.cor-preview-rapido-visual{width:50px;height:50px;border-radius:var(--border-radius-md);border:3px solid var(--white);box-shadow:0 4px 15px rgba(0,0,0,0.2);margin-right:var(--spacing-md);transition:all var(--transition-fast);background-color:#fff;flex-shrink:0;}
.cor-preview-rapido-info{flex:1;min-width:0;}
.cor-preview-titulo{font-weight:600;color:var(--dark-gray);margin-bottom:var(--spacing-xs);font-size:1rem;}
.cor-preview-codigos{font-family:'Courier New',monospace;font-weight:500;font-size:0.95rem;color:var(--medium-gray);line-height:1.4;}
@media (max-width:480px){
.cor-preview-rapido-visual{width:40px;height:40px;}
.cor-preview-titulo{font-size:0.9rem;}
.cor-preview-codigos{font-size:0.85rem;}
}
.precision-sliders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-md);margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--off-white);border-radius:var(--border-radius-md);border:2px solid var(--light-gray);}
.slider-group{display:flex;flex-direction:column;gap:var(--spacing-xs);}
.slider-label{font-weight:600;color:var(--dark-gray);font-size:0.9rem;text-align:center;}
.slider-label span{font-weight:700;color:var(--primary-green);}
.slider-value-editable{cursor:pointer;padding:0 4px;border-radius:3px;transition:all var(--transition-fast);}
.slider-value-editable:hover{background:rgba(0,166,81,0.2);outline:1px solid var(--primary-green);}
.precision-slider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
.precision-slider::-webkit-slider-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary-green);cursor:pointer;-webkit-appearance:none;appearance:none;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.precision-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary-green);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.precision-slider::-webkit-slider-thumb:hover{background:#00a651;}
.precision-slider::-moz-range-thumb:hover{background:#00a651;}
@media (max-width:768px){
.precision-sliders{grid-template-columns:1fr;gap:var(--spacing-sm);}
.slider-label{font-size:0.85rem;}
}
@media (max-width:480px){
.precision-sliders{padding:var(--spacing-sm);gap:var(--spacing-sm);}
.slider-label{font-size:0.8rem;}
.precision-slider{height:5px;}
.precision-slider::-webkit-slider-thumb{width:16px;height:16px;}
.precision-slider::-moz-range-thumb{width:16px;height:16px;}
}