/* Caja contenedora principal */
.container {
  max-width: 1100px;
  margin: 32px auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px #0002;
  padding: 32px;
  position: relative;
  max-height: 600px;
  overflow-y: auto;
}

/* Layout y estructura general */
.form-row { display: flex; gap: 16px; margin-bottom: 12px; }
.form-col { display: flex; flex-direction: column; flex: 1; }
label { font-weight: 500; margin-bottom: 4px; font-size: 1em; }
input, select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; }
.company-section { background: #fafbfc; border-radius: 8px; box-shadow: 0 2px 8px #0001; border: 1px solid #e0e0e0; padding: 18px 20px 14px 20px; margin: 18px 0 24px 0; }
.company-section legend { font-weight: bold; font-size: 1.08em; margin-bottom: 12px; padding: 0 8px; }
.company-section .form-row { display: flex; flex-wrap: wrap; gap: 24px 18px; }
.company-section .form-col { display: flex; flex-direction: column; min-width: 220px; max-width: 320px; flex: 1; }
.company-section label { font-weight: 500; margin-bottom: 4px; font-size: 1em; }
.company-section input, .company-section select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; }
.company-section input[type="file"] { max-width: 260px; min-width: 200px; width: 100%; box-sizing: border-box; }
.company-section .photo-preview { margin-bottom: 8px; }
#main-content { transition: transform 0.7s cubic-bezier(.77,0,.18,1), opacity 0.7s cubic-bezier(.77,0,.18,1); will-change: transform, opacity; }
#main-content.hide { opacity: 0; pointer-events: none; }
#edit-panel { position: fixed; inset: 0; background: transparent; z-index: 101; box-shadow: none; display: none; }
#edit-panel.active { display: block; height: 100%; min-height: 0; }
#edit-panel .container { box-shadow: 0 2px 12px rgba(0,0,0,0.13); background: #ffffff; border-radius: 8px; padding: 32px; margin: 32px auto; max-width: 1100px; min-height: 0; height: auto; max-height: 600px; overflow-y: auto; }
#edit-panel form { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; min-height: 0; height: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 24px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #eee; }
th { background: #f0f0f0; }
tr:hover { background: #f9f9f9; }
.actions button { margin-right: 6px; }
table#users-table tbody td { font-size: 0.8em; }
table#users-table thead th { font-size: 1em; }
table#questions-table tbody td { font-size: 0.8em; }
table#questions-table thead th { font-size: 1em; }
table#questions-table th:nth-child(3),
table#questions-table td:nth-child(3) {
    width: 38%; /* Question aún más larga */
    max-width: 540px;
}
table#questions-table th:nth-child(4),
table#questions-table td:nth-child(4) {
    width: 24%; /* Options más larga */
    max-width: 340px;
}
/* Estructura específica de filas y columnas de formularios */
.form-row.status-role-row { gap: 16px !important; }
.form-row.status-role-row .form-col:nth-child(2), .form-row.status-role-row .form-col:nth-child(3) { margin-right: 0 !important; margin-left: 0 !important; }
#status, #role, #edit-status, #edit-role, select[name="status"], select[name="role"] { max-width: 140px; margin-right: 4px; margin-left: 0; }
#status, #edit-status { margin-right: 4px; }
#role, #edit-role { margin-left: 0px; }
.form-row.status-role-row .form-col:nth-child(2) { margin-right: 4px !important; }
.form-row.status-role-row .form-col:nth-child(3) { margin-left: -8px !important; }
#status, #role { max-width: 120px; }
.form-row.status-role-row .form-col:nth-child(2), .form-row.status-role-row .form-col:nth-child(3) { flex: initial !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
.form-row.status-role-row { gap: 16px !important; }
#status, #role { max-width: 120px; }
.form-row.status-role-row .form-col:first-child input[type="file"] { max-width: 240px; min-width: 160px; width: 100%; box-sizing: border-box; }
.form-row.status-role-row .form-col:first-child { max-width: 260px; flex: initial !important; }
.form-row.status-role-row .form-col:first-child { max-width: none; flex: 1 1 0%; }
.form-row.status-role-row .form-col:first-child input[type="file"] { max-width: 260px; min-width: 260px; width: 100%; }

/* Preview compacto para input file con imagen */
.company-section .form-col.profile-photo-col {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px;
}
.company-section .profile-photo-col input[type="file"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 6px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.company-section .profile-photo-col label {
  margin-bottom: 0px;
}
.company-section .profile-photo-preview {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  height: 32px;
  width: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 4px;
  box-shadow: 0 1px 4px #8882;
  background: #fff;
  object-fit: cover;
  padding: 0;
}
.company-section .profile-photo-col > div {
  display: flex;
  align-items: center;
}

.company-section .custom-file-text {
  display: none !important;
  text-align: left;
  max-width: 228px;
  min-width: 200px;
  width: 100%;
  box-sizing: border-box;
}
.company-section .profile-photo-col .upload-image-btn {
  display: inline-block !important;
  margin-right: 8px;
}

/* --- BLOQUE DE SUBIDA DE IMAGEN GLOBAL --- */
.upload-image-btn {
  font-size: 1em;
  padding: 7px 18px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0 1px 4px #1976d222;
  cursor: pointer;
  height: 32px;
  min-width: 90px;
  transition: background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  vertical-align: middle;
}
.upload-image-btn:hover {
  background: #115293;
  box-shadow: 0 2px 8px #1976d233;
}
.profile-photo-preview {
  margin-left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fafbfc;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}
.remove-preview-btn {
  display: none;
  margin-left: 1px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px #0002;
  cursor: pointer;
  font-size: 10px;
  line-height: 10px;
  color: #888;
  vertical-align: middle;
  position: relative;
  top: 7px;
  font-weight: 300;
}

/* Redondeo solo el borde superior del menú de edición de Quill */
.ql-toolbar.ql-snow {
  border-radius: 12px 12px 0 0;
}
/* --- FIN BLOQUE DE SUBIDA DE IMAGEN GLOBAL --- */

/* Ajusto la altura de los dropdowns de question type y user para que coincidan con los campos input */
select,
select.input-global {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  vertical-align: top;
}

textarea.input-global {
  border-radius: 4px;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 6px;
  font-family: inherit;
  box-sizing: border-box;
}

.company-section select.input-global {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1em;
  border-radius: 4px;
  background: #ffeedd !important;
  border: 2px solid #ff6600 !important;
}

#content, .ql-editor {
  font-size: 1em !important;
  font-family: inherit !important;
}

.answer-option-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}