/**
 * ============================================================================
 * Estilos del Formulario de Perfil de Usuario
 * ============================================================================
 * 
 * @file        univalle_default_form.css
 * @description Estilos CSS para el formulario de perfil de usuario de Univalle
 * @version     1.0.1
 * @date        2026-03-26
 * @author      Univalle
 * @website     https://moveon4.com
 * 
 * @architecture
 * Este archivo sigue una arquitectura CSS modular organizada en las siguientes secciones:
 * 
 * 1. RESET & BASE        - Estilos base y normalización
 * 2. LAYOUT              - Estructura principal de la página
 * 3. TYPOGRAPHY          - Estilos de texto y tipografía
 * 4. FORM COMPONENTS     - Elementos del formulario
 * 5. NAVIGATION          - Menú y navegación
 * 6. BUTTONS             - Botones y acciones
 * 7. UTILITIES           - Utilidades y modificadores
 * 
 * ============================================================================
 */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* ==========================================================================
   1. RESET & BASE
   Estilos fundamentales que normalizan el comportamiento del navegador
   ========================================================================== */

/**
 * Body - Estilos base del documento
 * Sobreescribe estilos por defecto para garantizar consistencia visual
 */
body {
  font-size: 15px;
  font-family: "Open Sans", Arial, sans-serif;
}

/**
 * Label Row - Etiquetas de campos del formulario
 * Estilo uniforme para todas las etiquetas de los campos
 */
label.rowLabel {
  font-size: 13px;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: normal;
  color: #636363;
}

/* ==========================================================================
   2. LAYOUT
   Estructura principal y contenedores de la página
   ========================================================================== */

/**
 * Page Cover - Portada del formulario
 * Imagen de fondo con logo institucional de Univalle
 */
.mainContainerForm .pageCover {
  position: relative;
  background: url(https://univalle.adv-pub.moveonca.com/files/univalle/2026/03/logo_univalle_largo_proc-scaled.jpg)
    no-repeat scroll 0 0px rgba(0, 0, 0, 0);
  background-size: 300px auto;
  padding-top: 50px;
}

/**
 * Wizard Container - Contenedor principal del asistente
 * Espaciado superior para acomodar la portada
 */
.wizardContainer {
  padding-top: 100px;
}

/**
 * Page Container - Contenedor de página
 * Ancho máximo para mejor legibilidad
 */
.pageContainer {
  max-width: 100%;
}

/**
 * Main Container Form - Contenedor principal del formulario
 * Estilos para el contenido de la página dentro del formulario
 */
.mainContainerForm .pageContent {
  padding: 10px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   Estilos de texto, títulos y encabezados
   ========================================================================== */

div.wizardTitleBar {
  background-color: #c20e1a;
  color: white;
}

.wizardTitle {
  font-family: "Open Sans", sans-serif;
}

.formHeader {
  color: #c20e1a;
  border-bottom: 1pt solid #c20e1a;
  margin-bottom: 1rem;
}

/* Textos sueltos */
.plainText {
  font:
    13px "Open Sans",
    Arial,
    sans-serif;
  font-weight: normal;
  color: black;
}

/* Campos desplegables */
.rowControl > select {
  font:
    13px "Open Sans",
    Arial,
    sans-serif;
  font-weight: normal;
  color: black;
}

/* Campos abiertos */
.rowControl > input[type="text"],
.rowControl > input[type="password"],
.genericControl {
  font:
    13px "Open Sans",
    Arial,
    sans-serif;
  font-weight: normal;
  color: black;
}

/* Marcas de campos obligatorios */
span.validationMark {
  color: #c20e1a;
  margin-left: 0.2rem;
}

/* ==========================================================================
   4. FORM COMPONENTS
   Elementos del formulario: fieldsets, legends, inputs
   ========================================================================== */

/**
 * Fieldset Legend & Search Header
 * Encabezados de secciones del formulario y cajas de búsqueda
 */
.formContainer fieldset > legend,
.searchBox .searchHeader {
  background: #636363;
  color: white;
}

/**
 * Fieldset Legend - Variante secundaria
 * Color de fondo alternativo para legends
 */
.formContainer fieldset > legend,
.searchBox .searchHeader {
  background: #636363;
}

/**
 * Set Container Legend - Legend específico del FormBuilder
 * Sobreescribe estilos del contenedor principal del formulario
 */
.mainContainerForm [data-kind="FormBuilderForm"] .setContainer legend {
  background: #636363;
}

/**
 * Blue Span - Elemento span azul
 * Fondo oscuro para elementos destacados
 */
.blue span {
  background-color: #636363;
}

/**
 * File Box - Carga de archivos
 * Espaciado interno para la caja de archivos
 */
div.fileBox {
  padding: 10px 8px 0px 4px;
}

div.fileBox a {
  color: #c20e1a;
}

input[type="file"]:before {
  color: #c20e1a;
  border: 1px solid #c20e1a;
}
/* ==========================================================================
   5. NAVIGATION
   Menú vertical y elementos de navegación
   ========================================================================== */

/**
 * Vertical Menu - Menú de navegación lateral
 * Estilo base con color rojo institucional
 */
.vMenu > a > li {
  background-color: #c20e1a;
  border-bottom: 1px solid #c20e1a;
  color: white;
}

/**
 * Vertical Menu - Estado completado
 * Indicador visual de secciones completadas con icono
 */
.vMenu > a > li.complete {
  background: url(https://static.moveon4.com/default/icons/completed_icon.png)
    no-repeat 188px 8px #ececec;
  color: #2f0900;
  border-color: #c20e1a;
}

/**
 * Vertical Menu - Estado activo
 * Resaltado de la sección actualmente seleccionada
 */
.vMenu > a > li.active {
  background-color: #ececec;
  color: #310f0e;
  border-color: #c20e1a;
}

/**
 * Vertical Menu - Estado hover
 * Efecto al pasar el cursor sobre elementos del menú
 */
.vMenu > a > li:hover {
  background-color: #f5f5f5;
  color: #310f0e;
}

/**
 * Current Language - Idioma seleccionado
 * Indicador visual del idioma actual activo
 */
li.currentLanguage {
  background: #c20e1a;
  border-radius: 4px;
}

/* ==========================================================================
   6. BUTTONS
   Botones de acción y navegación del formulario
   ========================================================================== */

/**
 * Button Base - Estilo base de todos los botones
 * Color rojo institucional con texto blanco
 */
button {
  background: #c20e1a;
  color: white;
}

/**
 * Next Button - Botón de siguiente
 * Icono de flecha a la derecha
 */
button[kind="next_button"] {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
  padding-right: 20px;
  color: #fff;
}

/**
 * Next Button - Estado hover
 * Efecto al pasar el cursor sobre el botón siguiente
 */
button[kind="next_button"]:hover {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #57595b;
}

/**
 * Previous Button - Botón de anterior
 * Icono de flecha a la izquierda
 */
button[kind="previous_button"] {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
  padding-right: 20px;
  color: #fff;
}

/**
 * Previous Button - Estado hover
 * Efecto al pasar el cursor sobre el botón anterior
 */
button[kind="previous_button"]:hover {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
}

/**
 * Save Button - Botón de guardar
 * Icono de guardado
 */
button[kind="save_button"] {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
  padding-right: 20px;
  color: #fff;
}

/**
 * Save Button - Estado hover
 * Efecto al pasar el cursor sobre el botón guardar
 */
button[kind="save_button"]:hover {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
}

/**
 * Submit Button - Botón de envío
 * Icono de envío
 */
button[kind="submit_button"] {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
  padding-right: 20px;
  color: #fff;
}

/**
 * Submit Button - Estado hover
 * Efecto al pasar el cursor sobre el botón de envío
 */
button[kind="submit_button"]:hover {
  background: url(https://static.moveon4.com/default/icons/next_button_icon.png)
    no-repeat right center #636363;
}

/* ==========================================================================
   7. UTILITIES
   Clases de utilidad y modificadores
   ========================================================================== */

/**
 * Add Section - Botón de agregar sección
 * Icono de más (+)
 */
.addSection {
  background: url(https://static.moveon4.com/default/icons/add_icon.png)
    no-repeat 5px 4px #636363;
}

/**
 * Add Section & Add Button Tabular - Estado hover
 * Efecto hover para botones de agregar sección y agregar en tablas
 */
.addSection:hover,
.addButtonTabular:hover {
  background: url(https://static.moveon4.com/default/icons/add_icon.png)
    no-repeat 5px 4px #636363;
}