/* --- custom.css para Form.io --- */

/* Variables “manuales” (no SASS) */
:root {
  --color-principal: #008c95;
  --color-principal-hover: #007b80;  /* un tono un poco más oscuro */
  --color-error: #dc3545;
  --color-fondo: #f8f9fa;
  --color-texto: #333333;
}

/* Cuerpo general */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  margin: 0;
  padding: 0;
}

/* Contenedor del formulario */
.formio-form {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Etiquetas (labels) */
.formio-form .control-label {
  font-weight: 600;
  color: var(--color-principal);
}

/* Inputs, selects, textareas */
.formio-form .form-control {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.formio-form .form-control:focus {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 0.2rem rgba(0, 140, 149, 0.25);
}

/* Botones primarios */
.formio-form .btn-primary {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: white;
  font-weight: 600;
  border-radius: 4px;
}

.formio-form .btn-primary:hover,
.formio-form .btn-primary:focus {
  background-color: var(--color-principal-hover);
  border-color: var(--color-principal-hover);
}

/* Botones secundarios / default */
.formio-form .btn {
  border-radius: 4px;
}

/* Mensajes de error / validación */
.has-error .form-control {
  border-color: var(--color-error);
}

.has-error .control-label {
  color: var(--color-error);
}

/* Mensajes de ayuda / descripción */
.formio-form .help-block {
  color: #6c757d;
  font-size: 0.875rem;
}

/* Paneles / contenedores (si hace falta diferencias) */
.panel-body {
  background-color: #fff;
}

/* Separadores / márgenes internos */
.form-group {
  margin-bottom: 1rem;
}

/* Encabezado del formulario (si usas título) */
.formio-form .formio-component-formheader {
  margin-bottom: 1.5rem;
  color: var(--color-principal);
  font-size: 1.5rem;
  font-weight: bold;
}

/* Inputs deshabilitados / readonly */
.formio-form .form-control[readonly],
.formio-form .form-control[disabled] {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}

/* Placeholder */
.formio-form ::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* Checkbox / radio (labels) */
.formio-form .form-check-label {
  color: var(--color-texto);
}

/* Bordes de grupos (panels) */
fieldset {
  border: 1px solid #dee2e6;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

legend {
  font-weight: 600;
  color: var(--color-principal);
  padding: 0 0.5rem;
}

/* Tablas / listados (si usas DataGrid o componentes tipo tabla) */
.formio-form table {
  width: 100%;
  border-collapse: collapse;
}

.formio-form table th,
.formio-form table td {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
}

.formio-form table th {
  background-color: var(--color-principal);
  color: white;
}

/* Paginación / navegación si usas formularios multipágina */
.formio-pagination .page-item .page-link {
  color: var(--color-principal);
  border-color: var(--color-principal);
}

.formio-pagination .page-item.active .page-link {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: white;
}

/* Animaciones suaves (opcional) */
.formio-form .form-control,
.formio-form .btn {
  transition: all 0.15s ease-in-out;
}