body{margin:0;padding:0;font-family:Arial,sans-serif;background:#0f172a;display:flex;justify-content:center;align-items:center;height:100vh}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.login-card{background:#141f37;padding:40px;border-radius:10px;box-shadow:0 4px 8px #0000001a;width:100%;max-width:400px;text-align:center}.login-card h2{margin-bottom:20px;color:#fff}.login-card input{width:90%;padding:10px 15px;margin:10px 0;border:1px solid #141f37;border-radius:5px;font-size:16px}.login-card input:focus{border-color:#007bff;outline:none;box-shadow:0 0 5px #007bff80}.login-card button{width:100%;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;margin-top:10px;transition:background-color .3s}.login-card button:hover{background:#0056b3}.error-message{color:#e74c3c;font-size:14px;margin-top:10px}@media (max-width: 480px){.login-card{padding:20px}.login-card h2{font-size:18px}.login-card input,.login-card button{font-size:14px}}body{font-family:Inter,sans-serif;margin:0;padding:0;background-color:red;color:#f8fafc;display:flex;justify-content:center;align-items:center;min-height:100vh}.form-builder-creation{background-color:#121c33fd;padding:20px;border-radius:.5rem;width:850px;max-width:90%;height:calc(89vh - 10px);display:flex;flex-direction:column;box-shadow:0 10px 20px #0000004d;overflow-y:auto}.header-section-creation{display:flex;justify-content:space-between;align-items:center}.main-title{font-size:2rem;margin-bottom:1.5rem}.toggle-button-creation{padding:5px;background-color:#3b82f6;color:#fff;border:none;border-radius:5px;cursor:pointer;align-self:flex-start;margin-top:-15px}.error-message-creation{background-color:#dc2626;padding:10px;border-radius:5px;text-align:center;margin-bottom:20px}.section-title-creation{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.formularios-list-creation{margin-bottom:2rem}.formularios-container-creation{display:flex;flex-direction:column;gap:0rem;max-height:450px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2563eb #1e293b}.formularios-container-creation::-webkit-scrollbar{width:8px}.formularios-container-creation::-webkit-scrollbar-track{background:#1e293b}.formularios-container-creation::-webkit-scrollbar-thumb{background-color:#2563eb;border-radius:4px;border:2px solid #1e293b}.no-formularios-message{text-align:center;color:#94a3b8}.formulario-item-creation{background:#1e293b;border-radius:8px;transition:all .2s;padding:.1rem;margin-top:10px;gap:.1rem}.formulario-header-creation{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:1rem;gap:1rem}.formulario-body-creation{padding:.2rem;border-top:1px solid #475569;display:flex;flex-direction:column;gap:.3rem}.formulario-input-creation{width:90%;padding:12px;border-radius:8px;border:1px solid #475569;background-color:#334155;color:#f8fafc;font-size:1rem}.formulario-buttons-creation{display:flex;gap:.5rem}.formulario-button-creation{padding:10px;background-color:#2563eb;color:#fff;border:none;border-radius:8px;margin-top:14px}.Cancel-button-edit{padding:10px;background-color:#dc2626;color:#fff;border:none;font-size:1rem;cursor:pointer;text-align:center;width:auto;flex:none;transition:background-color .3s ease;border-radius:8px;margin-top:14px}.Cancel-button-edit:hover{background-color:#4b5563}.crear-formulario-creation{margin-top:2rem}.crear-input-creation{width:98%;padding:10px;border-radius:8px;background-color:#334155;border:1px solid #475569;color:#fff;margin-bottom:1rem}.crear-button-creation{width:100%;padding:10px;background-color:#2563eb;border:none;border-radius:8px;color:#fff;cursor:pointer}.formulario-descripcion-title-creation{font-size:1.25rem;font-weight:700;gap:5rem;margin-bottom:10px}.loader-container{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000;z-index:9999}.loader{width:100px;height:100px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:linear-gradient(0deg,#fff 50%,#ff5c35);animation:spin 1s linear infinite}.inner-circle{width:90%;height:90%;background-color:#141f37;border-radius:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background:#1e293b;padding:40px;border-radius:12px;box-shadow:0 10px 20px #0000004d;max-width:500px;width:90%;text-align:center;animation:fadeIn .3s ease-out}.popup-content h3{font-size:1.5rem;color:#f8fafc;margin-bottom:20px}.popup-content input,.popup-content textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #475569;background-color:#334155;color:#f8fafc;margin-bottom:16px;font-size:1rem}.popup-buttons{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.confirm-button{flex:1;background-color:#2563eb;color:#fff;border:none;border-radius:8px;padding:12px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.confirm-button:hover{background-color:#1d4ed8}.cancel-button{flex:1;background-color:#dc2626;color:#fff;border:none;border-radius:8px;padding:12px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.cancel-button:hover{background-color:#b91c1c}.logout-button{position:relative;right:5px;background-color:#ff4d4f;color:#fff;border:none;border-radius:5px;padding:10px 15px;font-size:16px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:background-color .3s ease}.logout-button:hover{background-color:#e43d3f}.popup-confirmacion-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1200}.popup-confirmacion-content{padding:20px 30px;border-radius:8px;text-align:center;max-width:400px;width:90%;box-shadow:0 4px 8px #0003;font-family:Arial,sans-serif;animation:fadeIn .3s ease}.popup-confirmacion-success,.popup-confirmacion-error{background-color:#475569;color:#f7fafc}.popup-confirmacion-button{margin-top:15px;background-color:#2d3748;color:#fff;border:none;border-radius:5px;padding:10px 20px;cursor:pointer;font-size:14px;font-weight:700;transition:background-color .3s ease}.popup-confirmacion-button:hover{background-color:#4a5568}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.header-section-creation{display:flex;justify-content:space-between;align-items:center;gap:1rem}.form-builder-creation{width:100%;padding:15px;height:50%}.formularios-container-creation{max-height:300px}.popup-content{padding:20px}.logout-button{font-size:14px;padding:8px 10px}}@media (max-width: 480px){.header-section-creation{display:flex;justify-content:space-between;align-items:center;gap:1rem}.logout-button{font-size:10px;padding:4px 8px;padding-inline:10px;gap:.5rem;margin-right:px}.form-builder-creation{padding:10px}.formularios-container-creation{max-height:250px}.crear-input-creation{width:100%}.crear-button-creation{font-size:14px;padding:8px}.popup-content{padding:15px}}body{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background:#0f172a}.container-question{max-width:1200px;margin:0 auto;padding:20px}.tittle-question{font-size:1.2rem;margin-bottom:1.5rem;display:absolute;margin-top:-30px}button{outline:none;border:none;cursor:pointer}button:disabled{background:#64748b;cursor:not-allowed}input:disabled,select:disabled{background:#2d3748;color:#a0aec0}.form-builder-wrapper{display:flex;gap:5px;height:99vh;flex:2;width:90%}.form-builder-question{background-color:#121c33fd;padding:50px;border-radius:.5rem;flex:2;display:flex;flex-direction:column;box-shadow:0 4px 6px #0006;margin-top:1px;width:580px;height:auto}.form-builder-question .scrollable-questions{flex:1;overflow-y:auto;margin-top:1px;max-height:350px;margin-bottom:20px}.form-builder-question .sortable-field-question{display:flex;align-items:center;gap:5px;padding:9px .5px;background:#334155;border:1px solid #475569;border-radius:7px;margin-bottom:9px;width:99%}.form-builder-question .sortable-field-question input,.form-builder-question .sortable-field-question select{flex:1;padding:3px;background:#1e293b;color:#f8fafc;border:1px solid #475569;border-radius:6px}.form-builder-question .sortable-field-question input:focus,.form-builder-question .sortable-field-question select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f666}.empty-message-question{font-size:16px;text-align:center;color:#a0aec0;margin-top:20px}.preview-column{flex:1;background-color:#1e293b;padding:50px;border-radius:8px;color:#f8fafc;box-shadow:0 4px 6px #0000001a;overflow-y:auto;height:82%;gap:10px}.preview-content{overflow-y:auto;overflow-x:hidden;height:calc(100% - 20px);padding-right:15px;margin-right:-15px;gap:10px;box-sizing:border-box}.preview-content::-webkit-scrollbar{width:8px}.preview-content::-webkit-scrollbar-thumb{background-color:#475569;border-radius:4px}.preview-content::-webkit-scrollbar-track{background:#1e293b}.preview-column h3{margin-bottom:20px}.preview-item input,.preview-item select{width:90%;padding:8px;margin-top:5px;border-radius:4px;border:1px solid #475569;background-color:#334155;color:#f8fafc}.option-item{display:flex;align-items:center;gap:10px}.add-button-question,.add-option-button,.option_text,.option_value{display:flex;align-items:center;gap:10px;padding:10px 15px;font-size:14px;font-weight:700;color:#fff;background:#4299e1;border:none;border-radius:4px;cursor:pointer;margin-bottom:20px;transition:background-color .2s ease-in-out}.remove-option-button{display:flex;align-items:center;gap:10px;padding:10px 15px;font-size:14px;font-weight:700;color:#fff;background:#e53e3e;border:none;border-radius:4px;cursor:pointer;margin-bottom:1px;transition:background-color .2s ease-in-out}.options-editor{display:flex;flex-direction:column;gap:10px}.edit-button-question{display:bottom;justify-content:center;align-items:center;padding:10px;background:#4299e1;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease-in-out;margin-left:auto}.save-order-question{padding:10px 15px;font-size:14px;font-weight:700;color:#fff;background:green;border:none;border-radius:4px;cursor:pointer;margin-bottom:-50px;width:20%}.add-button-question:hover,.save-order-question:hover,.option_text:hover,.option_value:hover{background:#3182ce}.save-button-question{background:#48bb78;width:100%;padding:10px;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease-in-out;text-align:center}.save-button-question:hover{background:#38a169}.cancel-button-question{background:#e53e3e;width:100%;padding:10px;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease-in-out;text-align:center}.cancel-button-question:hover{background:#c53030}.popup-overlay-question{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.validation-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000}.popup-content-question{background:#1a202c;color:#f7fafc;padding:40px;border-radius:12px;width:600px;box-shadow:0 6px 10px #0003;display:flex;flex-direction:column;gap:20px;max-height:80vh;overflow-y:auto;text-align:center;position:relative;z-index:1001}.validation-popup-content{background:#1a202c;color:#f7fafc;padding:40px;border-radius:12px;width:600px;box-shadow:0 6px 10px #0003;display:flex;flex-direction:column;gap:20px;text-align:center;position:relative;z-index:2001}.popup-content-question h3,.validation-popup-content h3{font-size:24px;font-weight:700;text-align:center;margin-bottom:20px}.popup-content-question input[type=text]{width:96%;padding:12px;font-size:16px;border:1px solid #475569;border-radius:8px;background:#2d3748;color:#f7fafc}.popup-content-question select{width:100%;padding:12px;font-size:16px;border:1px solid #475569;border-radius:8px;background:#2d3748;color:#f7fafc}.popup-content-question input[type=text]:focus,.popup-content-question select:focus{border-color:#4299e1;box-shadow:0 0 0 4px #4299e14d}.popup-content-question label{display:flex;align-items:center;gap:15px;font-size:16px}.validation-popup-content .popup-buttons{margin-top:15px}.validation-popup-content .confirm-button{background-color:#4caf50;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;z-index:2002}.validation-popup-content .cancel-button{background-color:#f44336;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;z-index:2002}.scrollable-questions::-webkit-scrollbar,.form-builder-question::-webkit-scrollbar,.preview-column::-webkit-scrollbar{width:8px}.scrollable-questions::-webkit-scrollbar-thumb,.form-builder-question::-webkit-scrollbar-thumb,.preview-column::-webkit-scrollbar-thumb{background-color:#475569;border-radius:4px}.scrollable-questions::-webkit-scrollbar-track,.form-builder-question::-webkit-scrollbar-track,.preview-column::-webkit-scrollbar-track{background:#1e293b}.back-button{position:absolute;top:20px;left:20px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background-color:#3182ce;border:none;cursor:pointer;border-radius:50%;transition:background-color .3s ease,transform .2s ease}.back-button:hover{background-color:#0000001a;transform:scale(1.1)}.back-button:active{transform:scale(.95)}.checkbox-group,.radio-group{display:flex;flex-direction:column;gap:5px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:.1px}.checkbox-option input,.radio-option input{margin:0;padding:0;width:30px}.logout-button-question{position:fixed;top:20px;right:10px;background-color:#ff4d4f;color:#fff;border:none;border-radius:5px;padding:10px 15px;font-size:16px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:background-color .3s ease;z-index:2000}.logout-button-question:hover{background-color:#e43d3f}.options-list-question{display:flex;flex-direction:column;gap:10px}@media (max-width: 768px){.form-builder-wrapper{flex-direction:column;width:600px;max-height:100%;gap:1rem;margin-top:30px;align-items:center}.tittle-question{font-size:1.5rem;margin-top:10px}.form-builder-question,.preview-column{width:100%;padding:1rem;max-height:45%;overflow-y:auto}.save-order-question{width:100%;text-align:center}.scrollable-questions{max-height:150px;overflow-y:auto}.sortable-field-question{flex-direction:row;align-items:center;gap:10px}}@media (max-width: 480px){.form-builder-wrapper{flex-direction:column;max-width:300px;gap:2rem;margin-top:60px;align-items:center}.form-builder-question,.preview-column{width:100%;padding:1rem;max-height:45%;overflow-y:auto}.tittle-question{font-size:1.25rem}.scrollable-questions{max-height:120px;overflow-y:auto}.sortable-field-question{flex-direction:column;align-items:flex-start;gap:5px;max-width:99%;max-height:79%}.save-order-question{font-size:.9rem;width:100%;padding:.75rem}}