:root {--primary-color: #007bff;--primary-hover: #0056b3;--secondary-color: #6c757d;--secondary-hover: #545b62;--background-color: #f8f9fa;--surface-color: #ffffff;--text-color: #343a40;--border-color: #dee2e6;--danger-color: #dc3545;--capture-color: #c71585; /* Rosado oscuro */--capture-hover: #a0126d; /* Rosado oscuro más oscuro */--font-family: 'Inter', sans-serif;}* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: var(--font-family);background-color: var(--background-color);color: var(--text-color);line-height: 1.6;}#app {max-width: 1200px;margin: 0 auto;padding: 2rem;}header {text-align: center;margin-bottom: 2rem;}header h1 {font-weight: 700;margin-bottom: 0.5rem;}header p {color: var(--secondary-color);}.container {display: none;}.container.active {display: block;}#upload-container .upload-area {display: grid;grid-template-columns: 1fr;gap: 1.5rem;}@media (min-width: 768px) {#upload-container .upload-area {grid-template-columns: 1fr;max-width: 600px;margin: 0 auto;}}.upload-box, .signature-editor-box {background-color: var(--surface-color);border: 2px dashed var(--border-color);border-radius: 8px;padding: 2rem;text-align: center;transition: background-color 0.2s, border-color 0.2s;}.upload-box {cursor: pointer;}.upload-box:hover, .upload-box.dragover {background-color: #e9ecef;border-color: var(--primary-color);}.upload-box.loaded {border-style: solid;border-color: #198754;}.loaded-state {margin-top: 1rem;font-weight: 500;color: #198754;}.upload-box .icon {width: 60px;height: 60px;margin-bottom: 1rem;opacity: 0.7;}.upload-box p {color: var(--secondary-color);}/* Signature Editor Styles */.signature-editor-box {display: flex;flex-direction: column;gap: 1rem;}.editor-title {font-size: 1.2rem;font-weight: 500;}.editor-description {font-size: 0.9rem;color: var(--secondary-color);margin-bottom: 0.5rem;}.file-inputs {display: flex;gap: 0.75rem;justify-content: center;}.file-input {width: 100%;padding: 0.5rem;border: 1px solid var(--border-color);border-radius: 4px;font-size: 0.9rem;background-color: var(--surface-color);}.controls {display: flex;gap: 0.75rem;align-items: center;justify-content: center;flex-wrap: wrap;}.controls .control-icon {font-size: 1.5rem;padding: 0.25rem 0.75rem;line-height: 1;}.controls input[type="color"] {width: 40px;height: 40px;padding: 0;border: 1px solid var(--border-color);border-radius: 4px;cursor: pointer;background-color: transparent;}.canvas-container {width: 100%;min-height: 150px;background-color: #f8f9fa;border: 1px solid var(--border-color);border-radius: 4px;display: flex;align-items: center;justify-content: center;overflow: hidden;}#sig-canvas {max-width: 100%;max-height: 250px;height: auto;}/* New Separator Styles */.tool-separator {display: flex;align-items: center;text-align: center;margin: 3rem 0;color: var(--secondary-color);}.tool-separator hr {flex: 1;border: none;border-top: 1px solid var(--border-color);}.tool-separator span {padding: 0 1.5rem;font-size: 0.9rem;}/* New Container for Editor */.signature-editor-container {margin-top: 1.5rem;}#loader {text-align: center;margin-top: 2rem;}#loader.hidden { display: none; }.spinner {border: 4px solid rgba(0,0,0,0.1);width: 36px;height: 36px;border-radius: 50%;border-left-color: var(--primary-color);animation: spin 1s ease infinite;margin: 0 auto 1rem;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}#editor-toolbar {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;padding: 1rem;background-color: var(--surface-color);border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);margin-bottom: 1.5rem;gap: 1.5rem;}.toolbar-info p {font-size: 0.9rem;color: var(--secondary-color);}.toolbar-actions {display: flex;gap: 0.5rem;align-items: center;flex-wrap: wrap;justify-content: flex-end;}#saved-signatures-container {position: relative;display: inline-block;}#saved-signatures-container.hidden {display: none;}.dropdown-content {display: none;position: absolute;background-color: #f1f1f1;min-width: 200px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 100;right: 0;border-radius: 6px;overflow: hidden;max-height: 300px;overflow-y: auto;}.dropdown-content.visible {display: block;}.dropdown-content .dropdown-item {color: black;padding: 12px 16px;text-decoration: none;display: flex;justify-content: space-between;align-items: center;cursor: pointer;background-color: var(--surface-color);border-bottom: 1px solid var(--border-color);}.dropdown-content .dropdown-item:last-child {border-bottom: none;}.dropdown-content .dropdown-item:hover {background-color: #ddd;}.dropdown-item > span:first-child {white-space: normal;word-break: break-word;flex: 1;padding-right: 8px;}.dropdown-item .delete-saved-sig {color: var(--danger-color);font-weight: bold;padding: 0 8px;border-radius: 4px;flex-shrink: 0;}.dropdown-item .delete-saved-sig:hover {background-color: #e9ecef;}.button-primary, .button-secondary, .button-success, .button-capture {padding: 0.75rem 1.5rem;border-radius: 6px;border: none;font-weight: 500;cursor: pointer;transition: background-color 0.2s, color 0.2s;font-size: 0.9rem;display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;}.icon-button {padding: 0.75rem;}.icon-button .btn-icon {width: 20px;height: 20px;}.button-primary {background-color: var(--primary-color);color: white;}.button-primary:hover {background-color: var(--primary-hover);}.button-primary:disabled {background-color: var(--secondary-color);cursor: not-allowed;}.button-capture {background-color: var(--capture-color);color: white;}.button-capture:hover {background-color: var(--capture-hover);}#share-button {background-color: #b8860b;}#share-button:hover {background-color: #a0760a;}.button-secondary {background-color: #e9ecef;color: var(--text-color);border: 1px solid var(--border-color);}.button-secondary:hover {background-color: #d8dde2;}.button-success {background-color: #198754;color: white;}.button-success:hover {background-color: #157347;}#pdf-viewer-container {position: relative;background: var(--surface-color);border: 1px solid var(--border-color);border-radius: 8px;padding: 1rem;box-shadow: 0 4px 12px rgba(0,0,0,0.08);overflow: auto;max-height: 80vh;}#pdf-viewer {position: relative;display: flex;flex-direction: column;align-items: center;gap: 1rem;}#pdf-viewer .pdf-page {position: relative;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}#pdf-viewer canvas {display: block;max-width: 100%;height: auto;}.signature-wrapper {position: absolute;touch-action: none;user-select: none;min-width: 50px;border: 2px dashed var(--primary-color);box-sizing: border-box;}.signature-wrapper img {width: 100%;height: 100%;display: block;object-fit: contain;}.signature-wrapper.hidden { display: none; }#signature-img {width: 100%;height: 100%;display: block;object-fit: contain;}.delete-handle {position: absolute;top: -12px;right: -12px;width: 24px;height: 24px;background-color: var(--danger-color);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 1.2rem;line-height: 1;font-weight: bold;box-shadow: 0 1px 3px rgba(0,0,0,0.2);visibility: hidden;}.signature-wrapper:hover .delete-handle {visibility: visible;}.resize-handle {position: absolute;bottom: -10px;right: -10px;width: 20px;height: 20px;background-color: var(--primary-color);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: nwse-resize;font-size: 12px;font-weight: bold;box-shadow: 0 1px 3px rgba(0,0,0,0.2);visibility: hidden;}.signature-wrapper:hover .resize-handle {visibility: visible;}/* Mobile Adjustments */@media (max-width: 768px) {body {overflow: hidden;}#app {padding: 0;height: 100vh;display: flex;flex-direction: column;}main {flex: 1;display: flex;flex-direction: column;overflow: hidden;}header {padding: 1rem;flex-shrink: 0;}#upload-container.active {flex: 1;overflow-y: auto;}#upload-container {padding: 0 1rem;}#editor-container.active {flex: 1;display: flex;flex-direction: column;}#editor-toolbar {flex-direction: column;align-items: stretch;gap: 1rem;border-radius: 0;margin-bottom: 0;flex-shrink: 0;}.toolbar-info {text-align: center;}.toolbar-actions {justify-content: center;}#pdf-viewer-container {padding: 0;border: none;border-radius: 0;box-shadow: none;flex: 1;overflow: auto;-webkit-overflow-scrolling: touch;}#pdf-viewer {padding: 1rem 0;align-items: flex-start;}#pdf-viewer .pdf-page {margin: 0 auto;}.button-primary, .button-secondary, .button-success, .button-capture {padding: 0.6rem 1rem;font-size: 0.8rem;}.dropdown-content {min-width: 180px;}}