.main{display:grid;gap:var(--spacing-xl)}@media (min-width:900px){.main{grid-template-columns:1fr 1fr;align-items:start}}.section-desc{color:var(--color-text-muted);font-size:.85rem;margin-bottom:var(--spacing-md)}.picker-row{display:flex;align-items:flex-end;gap:var(--spacing-lg);flex-wrap:wrap}.color-preview-wrapper{position:relative;flex-shrink:0}.color-preview{width:120px;height:120px;border-radius:var(--radius-md);border:2px solid var(--color-border);background:#06b6d4;transition:background-color .15s ease,box-shadow .2s;cursor:pointer;box-shadow:var(--shadow-md)}.color-preview:hover{box-shadow:var(--shadow-glow)}.native-picker{position:absolute;top:0;left:0;width:120px;height:120px;opacity:0;cursor:pointer;border:none}.hex-input-group{flex:1;min-width:180px}.hex-input-group label{display:block;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.btn-random{padding:var(--spacing-sm) var(--spacing-lg);background:var(--bg-card);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;align-self:flex-end}.btn-random:hover{border-color:var(--color-primary);background:var(--bg-card-hover);color:var(--color-primary)}.input-with-copy{display:flex;gap:var(--spacing-xs);align-items:center}.input-with-copy input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:Consolas,Monaco,'Courier New',monospace;font-size:.9rem;background:var(--bg-input);color:var(--color-text);transition:border-color .2s,box-shadow .2s}.input-with-copy input:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-primary-muted)}.input-with-copy input[readonly]{cursor:default}.btn-copy{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.btn-copy:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-copy.copied{background:var(--color-success);color:#fff;border-color:var(--color-success)}.conversion-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}@media (max-width:600px){.conversion-grid{grid-template-columns:1fr}}.conversion-item label{display:block;font-size:.8rem;font-weight:600;color:var(--color-text-muted);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm)}.palette-swatch{aspect-ratio:1;border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}.palette-swatch:hover{transform:scale(1.05);box-shadow:var(--shadow-lg);border-color:var(--color-primary);z-index:2}.palette-swatch .swatch-label{position:absolute;bottom:0;left:0;right:0;padding:3px 6px;font-size:.65rem;font-family:Consolas,Monaco,'Courier New',monospace;text-align:center;background:rgba(0,0,0,.55);color:#fff;opacity:0;transition:opacity .15s}.palette-swatch:hover .swatch-label{opacity:1}.palette-label-row{grid-column:1/-1;font-size:.75rem;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:var(--spacing-sm)}.palette-label-row:first-child{margin-top:0}.harmony-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}@media (max-width:600px){.harmony-section{grid-template-columns:1fr}}.harmony-group h3{font-size:.85rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.harmony-colors{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.harmony-swatch{width:50px;height:50px;border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;position:relative}.harmony-swatch:hover{transform:scale(1.1);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.harmony-swatch .swatch-hex{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.6rem;font-family:Consolas,Monaco,'Courier New',monospace;color:var(--color-text-muted);white-space:nowrap}.css-output-block{position:relative;margin-bottom:var(--spacing-md)}.css-output-block h3{font-size:.8rem;font-weight:600;color:var(--color-text-muted);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.code-block{background:#0d1117;border:1px solid #21262d;border-radius:var(--radius-md);padding:var(--spacing-md);font-family:Consolas,Monaco,'Courier New',monospace;font-size:.8rem;line-height:1.6;color:#c9d1d9;overflow-x:auto;white-space:pre}.css-output-block .btn-copy{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);font-size:.7rem;padding:3px 8px}.contrast-checker{display:flex;flex-direction:column;gap:var(--spacing-md)}.contrast-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}@media (max-width:600px){.contrast-inputs{grid-template-columns:1fr}}.color-input-row{display:flex;gap:var(--spacing-sm);align-items:center}.color-input-row input[type=text]{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:Consolas,Monaco,'Courier New',monospace;font-size:.85rem;background:var(--bg-input);color:var(--color-text);transition:border-color .2s}.color-input-row input[type=text]:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-primary-muted)}.small-picker{width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:2px;background:var(--bg-input);flex-shrink:0}.small-picker::-webkit-color-swatch-wrapper{padding:0}.small-picker::-webkit-color-swatch{border:none;border-radius:3px}.contrast-preview{padding:var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--color-border);text-align:center;font-size:1.5rem;font-weight:700;min-height:80px;display:flex;align-items:center;justify-content:center}.contrast-results{display:flex;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}.contrast-ratio{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.ratio-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;font-weight:600}.ratio-value{font-size:1.8rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums}.wcag-badges{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.wcag-badge{padding:4px 10px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;background:var(--bg-body);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all .2s}.wcag-badge.pass{background:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success)}.wcag-badge.fail{background:var(--color-danger-bg);border-color:var(--color-danger);color:var(--color-danger)}.color-history{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;min-height:40px;align-items:center}.history-empty{color:var(--color-text-muted);font-size:.85rem;font-style:italic}.history-swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-border);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s}.history-swatch:hover{transform:scale(1.15);box-shadow:var(--shadow-glow);border-color:var(--color-primary)}.btn-clear-history{margin-top:var(--spacing-sm);padding:4px 12px;background:0 0;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .2s}.btn-clear-history:hover{border-color:var(--color-danger);color:var(--color-danger)}.more-tools{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-border)}.more-tools h2{font-size:1.2rem;margin-bottom:var(--spacing-md)}.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}@media (max-width:700px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:400px){.tools-grid{grid-template-columns:1fr}}.tool-card{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;color:var(--color-text);transition:all .2s}.tool-card:hover{border-color:var(--color-primary);background:var(--bg-card-hover);transform:translateY(-1px)}.tool-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-muted);color:var(--color-primary);border-radius:var(--radius-sm);font-weight:700;font-size:.8rem;font-family:Consolas,Monaco,'Courier New',monospace;flex-shrink:0}.tool-name{font-size:.85rem;font-weight:500}@media (max-width:700px){.picker-row{flex-direction:column;align-items:stretch}.color-preview-wrapper{align-self:center}.btn-random{align-self:stretch;text-align:center}.harmony-section{grid-template-columns:1fr}.contrast-results{flex-direction:column;align-items:flex-start}}@media (max-width:400px){.palette-grid{grid-template-columns:repeat(3,1fr)}.contrast-inputs{grid-template-columns:1fr}}@media print{body{background:#fff;color:#000}.breadcrumb,.btn-clear-history,.btn-copy,.btn-random,.country-selector,.more-tools,.native-picker{display:none!important}.color-preview{border-color:#ccc;box-shadow:none}.code-block{background:#f5f5f5;border-color:#ccc;color:#333}.form-section,.formulario,.resultado{break-inside:avoid}a{color:#333;text-decoration:underline}}