/* /css/cotizador-style.css (Versión Profesional Corregida) */
#stl-cotizador-root { font-family: 'Inter', sans-serif; background-color: #fff; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); max-width: 800px; margin: 2rem auto; }
#viewer-controls-section { display: flex; flex-direction: column; } /* CAMBIO: Ahora es flex por defecto */
#viewer-container { min-height: 400px; height: 50vh; cursor: move; position: relative; background-color: #f3f4f6; border-radius: 0.5rem; overflow: hidden; margin-bottom: 1.5rem; }
#viewer-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af; font-style: italic; }
#loader-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(243, 244, 246, 0.8); z-index: 10; }
#loader-overlay div { border: 4px solid #e5e7eb; border-top-color: #4f46e5; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loader-overlay p { margin-top: 1rem; color: #4b5563; font-weight: 600; }

/* NUEVO: Estilos para la capa de subida */
#upload-section { position: absolute; inset: 0; z-index: 9; background-color: rgba(243, 244, 246, 0.95); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.drop-zone { width: 100%; height: 100%; border: 2px dashed #d1d5db; transition: all 0.2s ease-in-out; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.drop-zone:hover, .drop-zone.drag-over { background-color: #eef2ff; border-color: #4f46e5; }
.drop-zone h3 { font-size: 1.25rem; font-weight: 600; color: #111827; }
.drop-zone p { margin-top: 0.5rem; color: #6b7280; }
.drop-zone svg { width: 4rem; height: 4rem; color: #9ca3af; margin-bottom: 1rem; }

.controls-panel { text-align: center; }
.controls-panel button { font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: background-color 0.2s; border: none; font-size: 1rem; margin: 0.25rem; cursor: pointer; }
.controls-panel button:disabled { background-color: #9ca3af; cursor: not-allowed; }
.controls-panel button#quote-button, .controls-panel button#confirm-order-button, .controls-panel button#checkout-button { background-color: #4f46e5; color: #fff; }
.controls-panel button#quote-button:hover:not(:disabled), .controls-panel button#confirm-order-button:hover:not(:disabled), .controls-panel button#checkout-button:hover:not(:disabled) { background-color: #4338ca; }
.controls-panel button.secondary { background-color: #e5e7eb; color: #374151; }
.controls-panel button.secondary:hover { background-color: #d1d5db; }
#price-display, #info-display { font-size: 1rem; font-weight: 600; color: #111827; margin: 1rem 0; background-color: #f9fafb; padding: 1rem; border-radius: 0.5rem; }
#info-display { display: flex; justify-content: space-around; text-align: left; }
#price-display #price { font-size: 2rem; font-weight: 700; color: #4f46e5; margin-left: 0.5rem; }
#loader-spinner { display: inline-block; border: 4px solid #e5e7eb; border-top-color: #4f46e5; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 1rem auto; }
#confirmation-message { color: #059669; font-weight: 600; margin: 1rem 0; }
#status-text { margin-top: 1rem; padding: 0.5rem; font-size: 0.8rem; color: #4b5563; background-color: #f3f4f6; border-radius: 0.25rem; }
#viewer-buttons { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 5px; }
#viewer-buttons button { background-color: rgba(255,255,255,0.8); border: 1px solid #d1d5db; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5rem; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; }
#viewer-buttons button:hover:not(:disabled) { background-color: #fff; }
/* NUEVO: Estilo para los botones del visor cuando están deshabilitados */
#viewer-buttons button:disabled { background-color: rgba(229, 231, 235, 0.7); color: #9ca3af; cursor: not-allowed; }

.hidden { display: none !important; }