> For the complete documentation index, see [llms.txt](https://doc.velneo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.velneo.com/38/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/proceso/interfaz/control/ejemplo-de-css.md).

# Ejemplos de CSS

En este capítulo vamos a explicar de forma práctica cómo personalizar la interfaz de nuestras aplicaciones usando hojas de estilo dinámicas (CSS).

## Ejemplo documentado de personalización de objetos visuales y controles

En el ejemplo siguiente podemos ver documentados y personalizados los objetos visuales y controles de una aplicación Velneo. Esta CSS es un buen recurso formativo sobre la personalización de objetos y controles de aplicaciones Velneo.

Este y el resto de los ejemplos de este capítulo son aplicables a los comandos de instrucción de proceso [interfaz: establecer hoja de estilo CSS](/38/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/proceso/interfaz/control.md#interfaz-establecer-hoja-de-estilo-css), [interfaz: establecer hoja de estilo CSS filescript](/38/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/proceso/interfaz/control.md#interfaz-establecer-hoja-de-estilo-filescript) y a la [creación de CSS para aplicar a objetos en edición](/38/velneo-vdevelop/proyectos-objetos-y-editores/proyecto-de-aplicacion-1/crear-css-para-aplicar-a-objetos-en-edicion.md).

```css
/*  --------------------------------------------------------------------------------
    INDICE
        - QCalendarWidget       CALENDARIO
        - QCheckBox             BOTON CHECK
        - QComboBox             COMBOBOX
        - QDateEdit             CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
        - QDateTime             CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
        - QDateTimeEdit         CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
        - QDialog               VENTANA EN CUADRO DE DIÁLOGO
        - QDockWidget           DOCK
        - QDoubleSpinBox        CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
        - QFrame                MARCO
        - QGroupBox             CAJA DE GRUPO
        - QHeaderView           CABECERA DE REJILLAS Y ÁRBOLES
        - QLabel                ETIQUETA DE TEXTO
        - QLineEdit             CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
        - QMainWindow           VENTANA PRINCIPAL
        - QMenu                 MENU CONTEXTUAL
        - QMenuBar              BARRA DE MENU (Solo afecta a Windows)
        - QMessageBox           VENTANA DE MENSAJE
        - QNumberSpinBox        CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
        - QProgressBar          BARRA DE PROGRESO
        - QPushButton           BOTÓN
        - QRadioButton          BOTÓN DE RADIO
        - QScrollBar            BARRA DE SCROLL VERTICAL Y HORIZONTAL
        - QSlider               DESLIZADOR
        - QSpinBox              CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
        - QSplitter             SPLITTER
        - QStatusBar            BARRA DE ESTADO
        - QTabWidget            SEPARADOR DE FORMULARIOS (PESTAÑAS)
        - QTableView            REJILLA
        - VCMapRejillaTableView     REJILLA ESTÁNDAR: CELDAS, FILAS Y CONTADOR DE GRUPOS
        - VCRejillaHeaderView       REJILLA ESTÁNDAR: CABECERA DE COLUMNAS, FILTRO Y ORDENACIÓN
        - VCMapRejillaHeader        REJILLA ESTÁNDAR: SELECCIÓN DE FILAS Y ESQUINA
        - VCRejillaConfigPanel      PANEL DE CONFIGURACIÓN DE REJILLAS
        - VCMenuRejillaConfigTotales    MENÚ DE TOTALES DE UNA COLUMNA
        - VCRejillaColumnFilterPopup    POPUP DE FILTRO POR COLUMNA
        - VCSpinner                 INDICADOR DE CARGA
        - QTextEdit             CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
        - QTimeEdit             CAJA DE EDICIÓN DE HORA
        - QTitanGrid            REJILLA AVANZADA
        - QToolBar              BARRA DE HERRAMIENTAS
        - QTooltip              TOOLTIP
        - QTreeView             QTREEVIEW - ARBOL VISOR Y MENU ARBOLADO
        - QWidget#qt_calendar   CALENDARIO
        - VCAsistenteNaveganteDlg   ASISTENTE "NAVEGANTE"
        - VBoundFieldEdit       CAJA DE EDICIÓN DE CAMPO PUNTERO A MAESTRO
        - VDateLineEdit         CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
        - VCFootView            PIE DE REJILLA
        - VImageWidget          CONTROL EDICIÓN CAMPO OBJETO DIBUJO
        - VListBox              LISTBOX
        - VCModificarCampoDlg   ASISTENTE "MODIFICAR CAMPO"
        - VCPVControlCasillero  CASILLERO
        - VCOverlayShadow       OVERLAY
        - VSwith                CONTROL SWITCH
    -------------------------------------------------------------------------------- */

/*  --------------------------------------------------------------------------------
    QCheckBox - BOTÓN CHECK
    QRadioButton - BOTÓN DE RADIO
    -------------------------------------------------------------------------------- */

QCheckBox, QRadioButton {
    color: #212121; }

QCheckBox:hover, QRadioButton:hover {
    color: #039BE5; }

QCheckBox:focus, QRadioButton:focus {
    color: #039BE5; }

QCheckBox:disabled, QRadioButton:disabled {
    color: #808080; }
        
/*  --------------------------------------------------------------------------------
    QComboBox - COMBOBOX
    QDateEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
    QDateTime - CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
    QDateTimeEdit - CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
    QDoubleSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
    QNumberSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
    QSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
    QTimeEdit - CAJA DE EDICIÓN DE HORA
    VBoundFieldEdit - CAJA DE EDICION DE CAMPO PUNTERO A MAESTRO
    VDateLineEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
    VListBox - LISTBOX
    -------------------------------------------------------------------------------- */
    
VDataCatcherEdit, QComboBox, QDateEdit, VDateLineEdit, QDateTime, QDateTimeEdit, QDoubleSpinBox, QNumberSpinBox, QSpinBox, QTimeEdit, VBoundFieldEdit, vBoundFieldEditBrowser, VDateLineEdit,VListBox {
    background-color: #F1F3F2;
    border: 0px solid #F1F3F2;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    selection-background-color: #01579B;
    selection-color: #FFFFFF; }

VDataCatcherEdit:hover, QComboBox:hover, QDateEdit:hover, VDateLineEdit:hover, QDateTime:hover, QDateTimeEdit:hover, QDoubleSpinBox:hover, QNumberSpinBox:hover, QSpinBox:hover, QTimeEdit:hover, VBoundFieldEditBrowser:hover,VBoundFieldEdit:hover, VListBox:hover {
    background-color: #E0E0E0;
    border: 0px 1px 0px 0px solid #01579B; }

VDataCatcherEdit:focus, QComboBox:focus, QDateEdit:focus, VDateLineEdit:focus, QDateTime:focus, QDateTimeEdit:focus, QDoubleSpinBox:focus, QNumberSpinBox:focus, QSpinBox:focus, QTimeEdit:focus, VBoundFieldEditBrowser:focus, VBoundFieldEdit:focus, VListBox:focus {
    border-bottom: 1px solid #01579B; }

VDataCatcherEdit:disabled, QComboBox:disabled, QDateEdit:disabled, VDateLineEdit:disabled, QDateTime:disabled, QDateTimeEdit:disabled, QDoubleSpinBox:disabled, QNumberSpinBox:disabled, QSpinBox:disabled, QTimeEdit:disabled, VBoundFieldEditBrowser:disabled,VBoundFieldEdit:disabled, VListBox:disabled {
    background-color: #FAFAFA;
    color: #808080; }

QDateEdit::up-button, VDateLineEdit::up-button, QDateTime::up-button, QDateTimeEdit::up-button, QTimeEdit::up-button, VBoundFieldEditBrowser::up-arrow, VBoundFieldEdit::up-arrow {
    border: none;
    image: url(":/Resources/tg_moverarriba.png");
    width: 16px;	}

QDateEdit::down-button, VDateLineEdit::down-button, QDateTime::down-button, QDateTimeEdit::down-button, QTimeEdit::down-button, VBoundFieldEditBrowser::down-arrow, VBoundFieldEdit::down-arrow {
    border: none;
    image: url(":/Resources/tg_moverabajo.png");
    width: 16px;	}

VDataCatcherEdit::drop-down, QComboBox::drop-down, QDateEdit::drop-down, VDateLineEdit::drop-down, QDateTime::drop-down, QDateTimeEdit::drop-down, VBoundFieldEditBrowser::drop-down, VBoundFieldEdit::drop-down, QTimeEdit::drop-down {
    border: none;
    image: url(":/Resources/tg_moverabajo.png");
    width: 16px; }

/* EN PRINCIPIO NO AFECTAN */

QNumberSpinBox:up-button, QDoubleSpinBox:up-button, QSpinBox:up-button {
    border: none;
    image: url(":/Resources/tg_moverarriba.png"); }

QNumberSpinBox:down-button, QDoubleSpinBox:down-button, QSpinBox:down-button {
    border: none;
    image: url(":/Resources/tg_moverabajo.png"); }

VBoundFieldEditBrowser QToolButton {
    background-color: #F5F5F5; }

VBoundFieldEditBrowser QToolButton:hover {
    background-color: #E0E0E0; }
    
 /*  --------------------------------------------------------------------------------
    VImageWidget - Control edición campo objeto dibujo
    -------------------------------------------------------------------------------- */   

VImageWidget {
 border: 1px solid #CECECE;
}

/*  --------------------------------------------------------------------------------
    QDialog - Cuadro de diálogo
    -------------------------------------------------------------------------------- */

QDialog QPushButton {
    min-width: 120;
    text-transform: none;
    }

/*  --------------------------------------------------------------------------------
    QDockWidget - DOCK
    -------------------------------------------------------------------------------- */
    
QDockWidget {
    color: transparent;
    font-size: 10px;
    min-width:10px;
    width: 210px; }

QDockWidget::title {
    background: #FFFFFF;
    color: #212121;
    margin: 0px;
    padding: 0px;
    text-align: center; }

QDockWidget::close-button {
    image: none;
    position: absolute;
    subcontrol-origin: margin;
    subcontrol-position: top right;
    top: 0px; left: 0px; bottom: 0px;
    width: 0px; }

QDockWidget::float-button {
    image: none;
    position: absolute;
    subcontrol-origin: margin;
    subcontrol-position: top right;
    top: 0px; left: 0px; bottom: 0px;
    width: 0px; }
        
/*  --------------------------------------------------------------------------------
    QFrame - MARCO
    -------------------------------------------------------------------------------- */
        
QFrame {
    background: rgba(255, 255, 255, 100%);
    border: 0px; }
        
/*  --------------------------------------------------------------------------------
    QGroupBox - CAJA DE GRUPO
    -------------------------------------------------------------------------------- */

QGroupBox {
    background: #FAFAFA;
    border: 0px solid #212121;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    margin-top: 20px;
    padding: 5px; }

QGroupBox::title {
    color: #212121;
    padding-top: -5px;
    padding-left: 5px;
    subcontrol-origin: margin; }
        
/*  --------------------------------------------------------------------------------
    QHeaderView - CABECERA DE REJILLAS Y ARBOLES
    -------------------------------------------------------------------------------- */
    
QHeaderView::section:horizontal {
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0;
    border-right: 5px solid transparent;
    color: #01579B;
    font-weight: bold;
    margin-top: 10px;
    min-height: 20px; }

QHeaderView::section:vertical {
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0;
    border-right: 5px solid transparent;
    color: #01579B;
    font-weight: bold;
    margin-top: 10px;
    min-height: 20px; }
    
/*  --------------------------------------------------------------------------------
    La clase siguiente hace que no se destaquen las cabeceras horizontal y vertical al ganar el foco
    -------------------------------------------------------------------------------- */
QHeaderView{
    qproperty-highlightSections: false;
}
    
/*  --------------------------------------------------------------------------------
    QLabel - ETIQUETA DE TEXTO
    -------------------------------------------------------------------------------- */

QLabel {
    background-color: transparent;
    color: #808080;
    font-size: 12px;
    text-transform: uppercase; }

/* TITULOS DE LOS FORMULARIOS Y MENUS */

QLabel#TXT_TIT {
    color: #01579B;
    font-size: 32px;
    text-transform: none; }

QLabel#TXT_SUB_TIT, QLabel#TXT_SUB_TIT_2 {
    color: #01579B;
    font-size: 16px;
    text-transform: none; }

QLabel#TXT_CAS {
    font-size: 10px;
    text-transform: none; }
    
QLabel#EMP {
    font-size: 16px; }

QLabel#USR {
    font-size: 12px; }

/* MENSAJE ERROR */

QLabel#NAME_VAC, QLabel#EML_ERR {
    alignement: right;
    background: transparent;
    color: #E27249;
    font-size: 10px;
    text-transform: uppercase;
    padding-left: -1px;
    padding-top: 1px; }

/* MENSAJE DUPLICADO*/

QLabel#NAME_DUP, QLabel#EML_DUP {
    alignement: right;
    background: transparent;
    color: #6388C1;
    font-size: 10px;
    padding-top: 1px;
    text-transform: uppercase; }

/*  --------------------------------------------------------------------------------
    QLineEdit - CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
    QTextEdit - CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
    -------------------------------------------------------------------------------- */

QLineEdit, QTextEdit {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    selection-background-color: #01579B;
    selection-color: #FFFFFF; }

QLineEdit:hover, QTextEdit:hover {
    background-color: #F1F3F2;
    border: 0px solid #01579B; }

QLineEdit:focus, QTextEdit:focus {
    background-color: #F1F3F2;
    border-bottom: 1px solid #01579B; }

QLineEdit:disabled, QTextEdit:disabled {
    background-color: #FAFAFA;
    color: #808080; }

/* CONTROL DE EDICIÓN DE TEXTOS A BUSCAR EN MENUS */

QLineEdit#TXT_BUS {
        qproperty-placeholderText: 'Texto a buscar'; }
        
/* FORMULARIO ALTA CONTACTO > TEXTO EDIT NOMBRE Y NOMBRE COMERCIAL */

QLineEdit#NAME_CON  {
        qproperty-placeholderText: 'Nombre contacto';
        qproperty-text: 'Nombre contacto'; }

QLineEdit#NOM_COM {
        margin-left: 10px; }

QTextEdit#MOTIVO {
        height: 36px; }
        
/*  --------------------------------------------------------------------------------
    QMainWindow - VENTANA PRINCIPAL
    -------------------------------------------------------------------------------- */

QMainWindow {
    background: #FFFFFF;
    border: 0px; }

QMainWindow::separator {
    background: #FFF;
    border-left: 1px solid #CECECE;
    border-right: 1px solid #CECECE;
    height: 5px;
    width: 5px; }

QMainWindow::separator:hover {
    background: #CECECE; }
        
/*  --------------------------------------------------------------------------------
    QMenu - MENU CONTEXTUAL
    -------------------------------------------------------------------------------- */

QMenu {
        background-color: #FFF;
        border: 1px solid #CECECE;
        color: #333333;
        margin: 0px;
        padding: 5px; }

QMenu::item {
        border: 1px solid transparent;
        margin: 1px;
        padding: 5px 30px 5px 20px; }

QMenu::item:selected {
        background-color: #E1F5FE;
        color:#000; }

QMenu::separator {
        background-color: #CECECE;
        height: 1px;
        margin: 0px; }
        
/*  --------------------------------------------------------------------------------
    QMenuBar - BARRA DE MENU (Solo afecta a Windows)
    -------------------------------------------------------------------------------- */

QMenuBar {
        background-color: #FFF;
        border-bottom: 1px solid #CECECE;
        min-height:20px; }

QMenuBar::item:selected {
        background-color: #CECECE;
        color: #000; }

QMenuBar::item:hover {
        background: #333333;
        color: #FFF; }
        
/*  --------------------------------------------------------------------------------
    QMessageBox - VENTANA DE MENSAJE
    QDialog - VENTANA EN CUADRO DE DIÁLOGO
    -------------------------------------------------------------------------------- */

QMessageBox, QDialog {
        background-color: #FFF; }

QMessageBox QPushButton {
        min-width: 120;
        text-transform: none; }
        
/*  --------------------------------------------------------------------------------
    QProgressBar - BARRA DE PROGRESO
    -------------------------------------------------------------------------------- */

QProgressBar {
        background-color: #FFF;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        color: #212121;
        height: 30px;
        text-align: center; }

QProgressBar::chunk {
        background-color: #C5CAE9; }
        
/*  --------------------------------------------------------------------------------
    QPushButton - BOTÓN
    -------------------------------------------------------------------------------- */

QPushButton {
    background-color: #FFFFFF;
    border: 1px solid #01579B;
    border-radius: 3px ;
    color: #01579B;
    font-size: 14px;
    font-weight: medium;
    height: 36px;
    text-align: center;
    width: 120px;
    qproperty-iconSize: 18px; }

QPushButton:hover {
    background-color: #F5F5F5; }
    
QPushButton:focus {
    background-color: #F5F5F5;
    border: 2px solid #01579B; }

QPushButton:pressed {
    background-color: #F5F5F5;
    border: 2px solid #01579B; }

QPushButton:disabled {
    background-color: #FFFFFF;
    border: 0px solid #C1C1C1;
    color: #C1C1C1; }

QPushButton::menu-indicator {
    image: none;
    width: 0px; }

/* BOTÓN ACEPTAR */

QPushButton#BTN_ACE, QPushButton#BTN_ALT_BUS {
    background-color: #01579B;
    color: #FFFFFF; }

QPushButton:hover#BTN_ACE, QPushButton:hover#BTN_ALT_BUS {
    background-color: #01579B;
    color: #E1F5FE; }

QPushButton:focus#BTN_ACE, QPushButton:focus#BTN_ALT_BUS {
    border: 2px solid #212121; }

QPushButton:pressed#BTN_ACE, QPushButton:pressed#BTN_ALT_BUS {
    border: 2px solid #212121; }

QPushButton:disabled#BTN_ACE, QPushButton:disabled#BTN_ALT_BUS {
    background-color: #C1C1C1;
    border: 0px;
    color: #FFFFFF; }

/* BOTÓN BUSCAR */

QPushButton#BTN_ALT_BUS {
    background-color: #01579B;
    color: #FFFFFF;
    radius: 3px; }

QPushButton#BTN_ALT_CHG_BUS {
    background-color: #FFFFFF;
    border: 1px solid #01579B;
    color: #01579B;
    font-size: 14px;
    height: 36px;
    radius: 3px;
    width: 240px; }

QPushButton#BTN_CNC, QPushButton#BTN_CNC_2, QPushButton#BTN_DUP, QPushButton#BTN_SUP {
    background-color: #FFFFFF;
    border: 1px solid #01579B;
    color: #01579B;
    font-size: 18px;
    height: 48px;
    radius: 3px; }

QPushButton#BTN_BUS_MEN {
    background-color: #FFFFFF;
    border: 1px solid #01579B;
    color: #01579B;
    height: 36px;
    radius: 3px; }

/* BOTÓN AMPLIAR, BOTÓN BUSCAR, BOTÓN MENU y BOTÓN REDUCIR */

QPushButton#BTN_AMP, QPushButton#BTN_AYU, QPushButton#BTN_BUS, QPushButton#BTN_MEN, QPushButton#BTN_RED {
    border-radius: 0px;
    qproperty-iconSize: 18px; }
        
/*  --------------------------------------------------------------------------------
    QScrollBar - BARRA DE SCROLL VERTICAL Y HORIZONTAL
    -------------------------------------------------------------------------------- */

QScrollBar:vertical {
    background: #FFFFFF;
    border-radius: 6px;
    padding-left: 2px;
    padding-right: 2px;
    width: 12px; }

QScrollBar:horizontal {
    background: #FFFFFF;
    border-radius: 6px;
    padding-bottom: 2px;
    padding-top: 2px;
    height: 12px;  }

QScrollBar:vertical:hover {
    background: #F5F5F5; }

QScrollBar:horizontal:hover {
    background: #F5F5F5; }

QScrollBar::handle:vertical {
    background: #C1C1C1;
    border: 2px solid transparent;
    border-radius: 4px;
    min-height: 90px; }

QScrollBar::handle:horizontal {
    background: #C1C1C1;
    border: 2px solid transparent;
    border-radius: 4px;
    min-width: 90px; }

QScrollBar::handle:hover {
    background: #808080;
    border: 2px solid transparent; }

QScrollBar::add-line:vertical {
    background: none;
    border: none; }

QScrollBar::sub-line:vertical {
    background: none;
    border: none; }

QScrollBar::add-line:horizontal {
    background: none;
    border: none; }

QScrollBar::sub-line:horizontal {
    background: none;
    border: none; }

/*  --------------------------------------------------------------------------------
    QScrollBar - Recuadro de intersección entre las scrollbar horizontal y vertical
    -------------------------------------------------------------------------------- */

QAbstractScrollArea::corner {
    background: transparent;
    border: transparent; }
        
/*  --------------------------------------------------------------------------------
    QSlider - DESLIZADOR
    -------------------------------------------------------------------------------- */

QSlider {
    background: transparent; }
        
/*  --------------------------------------------------------------------------------
    QSplitter - SPLITTER
    -------------------------------------------------------------------------------- */

QSplitter {
    background: transparent; }
        
/*  --------------------------------------------------------------------------------
    QStatusBar - BARRA DE ESTADO
    -------------------------------------------------------------------------------- */

QStatusBar {
    background-color: #FFFFFF;
    border-top: 1px solid #212121;
    qproperty-visible: false; }
        
/*  --------------------------------------------------------------------------------
    QTabWidget - SEPARADOR DE FORMULARIOS (Pestañas)
    -------------------------------------------------------------------------------- */

QTabWidget::pane {
    border-top: 1px solid #E0E0E0;
    margin:0px;
    top: 10px; }

QTabWidget::tab-bar {
    left: 10px;
    min-width: 10px;
    right: 10px;
    top: 10px; }

QTabBar::tab {
    background-color: #FFFFFF;
    color: #212121;
    font-weight: normal;
    margin-left: 5px;
    margin-right: 10px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px; }

QTabBar::tab:hover {
    border-top: 1px solid #E1F5FE; }

QTabBar::tab:focus {
    background-color: #01579B;
    color: #FFFFFF; }

QTabBar::tab:selected {
    border-bottom: 2px solid #039BE5; }

QTabBar::close-button {
    image: url(":/Resources/td_borrartodospuntos.png");
    width: 32px;
    height: 32px;
    margin: 3px; }
        
QTabBar::scroller {
    padding-top: 10px;
    width: 64px;}

QTabBar QToolButton::left-arrow {
    image: url(":/Resources/tg_buscar_ant.png");
    width: 32px;}

QTabBar QToolButton::right-arrow {
    image: url(":/Resources/tg_buscar_sig.png");
    width: 32px;}
        
/*  --------------------------------------------------------------------------------
    QTableView - REJILLA
    VCFootView - PIE DE REJILLA
    -------------------------------------------------------------------------------- */

QTableView {
    alternate-background-color: transparent;
    background-color: white;
    border: none;
    border-radius: 5px;
    color: #212121;
    font-weight: normal;
    gridline-color: transparent;
    min-height: 30px;
    selection-background-color: #E1F5FE;
    selection-color: #01579B;
    qproperty-showGrid: false; }

QTableView QTableCornerButton::section {
    background-color: transparent;
    border: 0px; }

QTableView::item:hover {
    background-color: #E1F5FE; }

QTableView::item:focus {
    border: 1px solid #F5F5F5;
    selection-background-color: #E1F5FE;
    selection-color: #01579B; }
    
/* PIE DE REJILLA */

VCFootView {
    background: transparent;
    border: none;
    border-right: 5px solid transparent;
    color: #212121;
    min-height: 30px; }

VCFootView::section:active {
    background: transparent;
    border: none;
    border-right: 5px solid transparent; }

VCFootView::section:!active {
    background: transparent;
    border: none;
    border-right: 5px solid transparent; }

/* SECCIÓN DEL PIE CON EL RATÓN ENCIMA
   Solo se aplica con hoja de estilo. Sin ella, el pie se ve como siempre. */
VCFootView::section:hover {
    background: #F5F5F5; }
        
/*  --------------------------------------------------------------------------------
    VCMapRejillaTableView - REJILLA ESTÁNDAR: CELDAS, FILAS Y CONTADOR DE GRUPOS
    El nombre de la clase de la rejilla estándar sirve como selector de tipo.
    La selección es siempre por fila completa.
    -------------------------------------------------------------------------------- */

/* MARCO Y FONDO DE LA REJILLA */
VCMapRejillaTableView {
    alternate-background-color: #F5F5F5;      /* Fondo de las filas alternas */
    background-color: #FFFFFF;                  /* Fondo de la rejilla */
    border: none;                               /* Borde del marco de la rejilla */
    color: #212121;                             /* Color del texto de las celdas */
    gridline-color: #E0E0E0;                    /* Color de las líneas de la cuadrícula */
    selection-background-color: #E1F5FE;        /* Fondo de la fila seleccionada */
    selection-color: #01579B;                   /* Color del texto de la fila seleccionada */
    qproperty-showGrid: false; }                /* Quita la cuadrícula. Se combina con ::item { border-bottom } para dejar solo la línea entre filas */

/* CELDA */
VCMapRejillaTableView::item {
    border-bottom: 1px solid #E0E0E0;           /* Línea que separa una fila de la siguiente */
    padding: 0px 6px; }                         /* Espacio interior de la celda */

/* CELDA EN HOVER
   Con selección por filas, se aplica a toda la fila bajo el ratón, incluida la sección de su cabecera vertical.
   Se mantiene al hacer scroll y al expandir o colapsar grupos. */
VCMapRejillaTableView::item:hover {
    background-color: #F5F5F5; }

/* FILA SELECCIONADA */
VCMapRejillaTableView::item:selected {
    background-color: #E1F5FE;
    color: #01579B; }

/* FILA SELECCIONADA CON EL RATÓN ENCIMA */
VCMapRejillaTableView::item:selected:hover {
    background-color: #B3E5FC;
    color: #01579B; }

/* FILAS DE GRUPO
   Las filas de grupo usan las mismas reglas ::item que las filas de datos, con el texto en negrita.
   No tienen un fondo propio configurable por CSS. */

/* CONTADOR (N) DE LAS FILAS DE GRUPO
   Pinta el contador aparte del texto «Columna: Valor» de la fila de grupo, con su propio estilo.
   Admite lo mismo que una etiqueta: color, font-family, font-size, font-weight,
   text-transform, letter-spacing y margin-left (separación respecto al texto).
   Sin esta regla, el contador se pinta junto al texto, como siempre. */
VCMapRejillaTableView QLabel#groupCount {
    color: #78909C;
    font-size: 11px;
    font-weight: normal;
    margin-left: 4px; }

/*  --------------------------------------------------------------------------------
    VCRejillaHeaderView - REJILLA ESTÁNDAR: CABECERA DE COLUMNAS, FILTRO Y ORDENACIÓN
    -------------------------------------------------------------------------------- */

/* SECCIÓN DE LA CABECERA (UNA POR COLUMNA)
   Admite fondo, color, fuente, min-height, padding y bordes.
   También text-transform y letter-spacing para el título. */
VCRejillaHeaderView::section {
    background-color: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0;
    color: #01579B;
    font-weight: bold;
    min-height: 30px;
    padding: 0px 8px; }

/* SECCIÓN CON EL RATÓN ENCIMA */
VCRejillaHeaderView::section:hover {
    background-color: #F5F5F5; }

/* SECCIÓN PULSADA */
VCRejillaHeaderView::section:pressed {
    background-color: #E1F5FE; }

/* COLUMNA CON UN FILTRO APLICADO
   Con hoja de estilo, la sección de cada columna con un filtro se marca como checked.
   Admite fondo, color de texto, fuente y bordes.
   A cambio, con hoja de estilo ya no se marcan como checked las secciones de las celdas seleccionadas. */
VCRejillaHeaderView::section:checked {
    background-color: #E1F5FE;
    color: #01579B; }

/* COLUMNA FILTRADA CON EL RATÓN ENCIMA O PULSADA */
VCRejillaHeaderView::section:checked:hover {
    background-color: #B3E5FC; }

VCRejillaHeaderView::section:checked:pressed {
    background-color: #81D4FA; }

/* COLUMNA POR LA QUE SE ORDENA
   Con hoja de estilo, la sección de la columna ordenada se marca como selected.
   Admite fondo, color y bordes. */
VCRejillaHeaderView::section:horizontal:selected {
    background-color: #FFFFFF;
    border-bottom: 2px solid #039BE5;
    color: #01579B; }

/* COLUMNA ORDENADA Y PULSADA
   :horizontal:selected tiene más especificidad que :pressed, y por eso gana.
   Para que la columna ordenada también cambie al pulsarla hace falta esta regla. */
VCRejillaHeaderView::section:horizontal:selected:pressed {
    background-color: #E1F5FE; }

/* COLUMNA ORDENADA Y CON UN FILTRO APLICADO
   :horizontal:selected tiene más especificidad que :checked. */
VCRejillaHeaderView::section:horizontal:selected:checked {
    background-color: #E1F5FE;
    border-bottom: 2px solid #039BE5; }

/* FLECHA DE ORDENACIÓN
   ::up-arrow es la ordenación ascendente y ::down-arrow la descendente.
   Admiten image, width, height y margin-right.
   La flecha y el icono de filtro van siempre al lado contrario de la alineación del texto
   de la columna, y no se puede cambiar por CSS: no uses subcontrol-position en estas reglas. */
VCRejillaHeaderView::up-arrow,
VCRejillaHeaderView::down-arrow {
    /* image: url(RUTA_IMAGENES/flecha.svg); */
    height: 10px;
    margin-right: 6px;
    width: 10px; }

/* BOTÓN DE FILTRO DE LA COLUMNA
   Se estiliza como un botón más. Admite background, border, border-radius,
   color (tiñe el icono, también el puesto con qproperty-icon, que se ve como una silueta
   de ese color), icon-size y qproperty-icon.
   Con una regla propia para este botón no se pinta el círculo del icono ni se tiñe la sección.
   Sin ella, el icono se ve como siempre, con las propiedades qproperty-filtro* de más abajo. */
QToolButton#columnFilter {
    background-color: transparent;
    border: none;
    border-radius: 9px;
    color: #808080;
    icon-size: 18px; }

/* RATÓN SOBRE EL ICONO DE FILTRO */
QToolButton#columnFilter:hover {
    background-color: #E1F5FE;
    color: #01579B; }

/* COLUMNA CON UN FILTRO APLICADO */
QToolButton#columnFilter:checked {
    background-color: #039BE5;
    color: #FFFFFF; }

/* PROPIEDADES PROPIAS DE LA CABECERA
   Las propiedades qproperty-filtro* se aplican cuando no se define QToolButton#columnFilter. */
VCRejillaHeaderView {
    qproperty-filtroColorActivo: #039BE5;       /* Color del círculo del icono con filtro activo; también tiñe la sección en hover */
    qproperty-filtroColorHover: #81D4FA;        /* Color del círculo del icono sin filtro, con el ratón encima */
    qproperty-filtroMargenDerecho: 6;           /* Margen del icono respecto al borde, en píxeles (6 por defecto) */
    qproperty-filtroTamanoIcono: 18;            /* Tamaño del icono de filtro en píxeles (18 por defecto) */
    /* qproperty-filtroIcono: url(RUTA_IMAGENES/filtro.svg); */   /* Icono de filtro propio, se pinta tal cual, sin recolorear */
    qproperty-redimensionAncho: 1;              /* Ancho de la marca de la zona de redimensionado de columna (0 por defecto: desactivada) */
    qproperty-redimensionColor: #E0E0E0; }      /* Color de esa marca */

/*  --------------------------------------------------------------------------------
    VCMapRejillaHeader - REJILLA ESTÁNDAR: SELECCIÓN DE FILAS Y ESQUINA
    Es la cabecera vertical de la rejilla estándar: la columna de la izquierda,
    con el checkbox de selección de cada fila y el botón de la esquina.
    -------------------------------------------------------------------------------- */

/* PROPIEDADES PROPIAS DE LA CABECERA VERTICAL */
VCMapRejillaHeader {
    qproperty-checkboxNativo: true;             /* Activa el checkbox de selección en cada fila y en la esquina (seleccionar todo) */
    qproperty-colorCheck: #FFFFFF;              /* Color de la marca del checkbox de la fila marcada (blanco por defecto) */
    /* qproperty-iconoChecked: url(RUTA_IMAGENES/check-on.svg); */      /* Icono propio del checkbox marcado */
    /* qproperty-iconoUnchecked: url(RUTA_IMAGENES/check-off.svg); */   /* Icono propio del checkbox sin marcar */
}

/* SECCIÓN DE LA CABECERA DE FILA */
VCMapRejillaHeader::section:vertical {
    background-color: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0; }

/* FILA MARCADA (requiere qproperty-checkboxNativo) */
VCMapRejillaHeader::section:vertical:selected {
    background-color: #E1F5FE; }

/* FILA BAJO EL RATÓN (hover de fila completa) */
VCMapRejillaHeader::section:vertical:hover {
    background-color: #F5F5F5; }

/* FILA MARCADA CON EL RATÓN ENCIMA */
VCMapRejillaHeader::section:vertical:selected:hover {
    background-color: #B3E5FC; }

/* RECUADRO DEL CHECKBOX DE CADA FILA */
VCMapRejillaHeader QCheckBox::indicator {
    background-color: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 3px;
    height: 16px;
    width: 16px; }

/* CHECKBOX DE LA FILA MARCADA */
VCMapRejillaHeader QCheckBox::indicator:checked {
    background-color: #039BE5;
    border: 1px solid #039BE5; }

/* CHECKBOX CON EL RATÓN SOBRE SU SECCIÓN */
VCMapRejillaHeader QCheckBox::indicator:hover {
    border: 1px solid #039BE5; }

/* BOTÓN DE LA ESQUINA SUPERIOR IZQUIERDA */
VCPVControlRejilla QTableCornerButton::section {
    background-color: #FFFFFF;                  /* Fondo de la esquina */
    border: none;
    border-bottom: 1px solid #E0E0E0; }

/* CHECKBOX DE LA ESQUINA (seleccionar todo)
   Es un checkbox normal: su marca sale de la propiedad image. */
VCMapRejillaTableView QTableCornerButton QCheckBox::indicator {
    background-color: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 3px;
    height: 16px;
    width: 16px; }

VCMapRejillaTableView QTableCornerButton QCheckBox::indicator:checked {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    /* image: url(RUTA_IMAGENES/check-on.svg); */ }

/*  --------------------------------------------------------------------------------
    VCPVControlRejilla QScrollBar - BARRAS DE DESPLAZAMIENTO DE LA REJILLA
    Admite los subcontroles ::handle, ::add-line, ::sub-line, ::add-page y ::sub-page.
    El panel de configuración tiene las suyas, con el selector VCRejillaConfigPanel QScrollBar.
    -------------------------------------------------------------------------------- */

VCPVControlRejilla QScrollBar:vertical {
    background: #F5F5F5;
    width: 10px; }

VCPVControlRejilla QScrollBar::handle:vertical {
    background: #BDBDBD;
    border-radius: 5px;
    min-height: 24px; }


/*  --------------------------------------------------------------------------------
    QTitanGrid - REJILLA AVANZADA
    -------------------------------------------------------------------------------- */
    
/* MARCO DE LA REJILLA */
    
Qtitan--Grid {            
    padding: 1px;
    margin: 1px;
    border: 1px solid #FFFFFF;  
    border-style: none;
    gridline-color: #F5F5F5;
    
/* COLOR DE FONDO Y FONDO PAR DE FILAS */
    background-color: #FFFFFF;                        /* Fondo de la rejilla */
    alternate-background-color: #FFFFFF;              /* Color de las líneas impares */

/* COLOR DE LA FILA SELECCIONADA */
    selection-color: #212121;                /* Color del texto del registro seleccionado */
    selection-background-color: #F5F5F5;                /* Background del registro seleccionado */

/* AERA DE LOS AGRUPAMIENTOS */
    qproperty-headerHeight: 30;                                    /* Altura de la cabecera de agrupación */  
    qproperty-headerTextColor: #212121;       /* Texto informativo de la cabecera de agrupamiento */
    qproperty-headerBrush: #FFFFFF;                   /* Color de la franja de agrupamiento */
    qproperty-headerBorderColor: #FFFFFF     ;        /* Color del borde */
    qproperty-headerBorderSize: 0;                                 /* Tamaño del borde */
    qproperty-headerBorderStyle: dot-dash;
    /* La fuente se puede establecer de dos formas. Con headerTextFont que requiere un formato concreto
    o indicando la familia y el tamaño en dos propiedades*/
    /*qproperty-headerTextFont: "Verdana,-1,20,5,0,0,0,0,0,0";*/ 
    qproperty-headerTextFontSize: 12;                              /* Tamaño de la fuente */
    qproperty-headerTextFontFamily: "Verdana";
    
/* AGRUPAMIENTOS */
    qproperty-groupColorLevel0: #E1F5FE; /* Color de fondo según el nivel de agrupamiento */
    qproperty-groupColorLevel1: #FFFFFF;
    qproperty-groupColorLevel2: #F5F5F5;
    qproperty-groupColorLevel3: #E0E0E0;
    qproperty-groupColorLevel4: magenta; 
    qproperty-groupColorLevel5: white; 
    qproperty-groupColorLevel6: white; 
    qproperty-groupColorLevel7: white;
             
/* NIVEL DE DESPLIEGUE DE AGRUPAMIENTOS */
    qproperty-keepGroupLevelExpanded: 3;
  
/* PIES DE GRUPO */
    qproperty-summaryGroupItemTextColor: red;                      /* No está operativo en la versión 26 */
    qproperty-summaryGroupItemBackgroundColor: #FFFFFF;
    qproperty-summaryGroupItemHeight: 30;
    qproperty-summaryGroupItemBorderColor: #E0E0E0;
    qproperty-summaryGroupItemBorderSize: 1;
    qproperty-summaryGroupItemBorderStyle: native;

/* PIES DE REJILLA */
    qproperty-summaryItemTextColor: blue;                          /* No está operativo en la versión 26 */
    qproperty-summaryItemBackgroundColor: #FFFFFF;
    qproperty-summaryItemHeight: 30;
    qproperty-summaryItemBorderColor: #FFFFFF;
    qproperty-summaryItemBorderSize: 1;
    qproperty-summaryItemBorderStyle: native;

/* ICONOS */
    qproperty-sortAscendingIcon: url(":/Resources/tg_moverarriba.png");
    qproperty-sortDescendingIcon: url(":/Resources/tg_moverabajo.png");
    qproperty-focusRowIndicatorIcon: url(":/Resources/tg_buscar_sig.png");
    qproperty-columnFilterToolIcon: url(":/Resources/mo_tuboficha.png");
    qproperty-columnFilterToolBoldIcon: url(":/Resources/mo_tubolista.png");
    qproperty-filterCheckBoxOnIcon: url(":/Resources/tg_moverarriba.png");
    qproperty-filterCheckBoxOffIcon: url(":/Resources/tg_moverarriba.png");
    qproperty-editorPopupOkIcon: url(":/Resources/tg_moverarriba.png");
    qproperty-editorPopupCancelIcon: url(":/Resources/td_borrartodospuntos.png");
    qproperty-editorPopupCrossIcon: url(":/Resources/tg_moverarriba.png");    

/* LÍNEA DE COLUMNAS INMOVILIZADAS */
    qproperty-fixedSeparatorWidth: 3;
    qproperty-fixedSeparatorColor: #FFFFFF;
    qproperty-fixedSeparatorStyle: dot-dash; }

/* CABECERA Y BANDA */
Qtitan--Grid::section {
    color: #01579B;
    font-weight: bold;
    border: none;
    background-color: #FFFFFF; }

/* CABECERA CON FOCO */
Qtitan--Grid::section:focus {
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF; }

/* CELDAS */
Qtitan--Grid::item {
   /*background-color: red;*/                               /*Se aplica sobre los posibles colores asignados genéricamente en la rejilla al fondo o fondo par*/ 
   }

/* CELDA CON FOCO */
Qtitan--Grid::item:focus {
    background-color: #F5F5F5;                   /*Se aplica sobre los posibles colores asignados genéricamente en la rejilla al fondo o fondo par*/
    border: 1px solid #FFFFFF; }

/* MARCO DEL FOCO Y CABECERA SELECCIONADA DE AGRUPACIÓN */
Qtitan--Grid:focus {
   outline: 1px dotted #FFFFFF; }


/* FILTRO RÁPIDO */
Qtitan--Grid > Qtitan--GridColumnFilterPopup, Qtitan--Grid > Qtitan--GridColumnFilterPopup *
{
    background-color: #FFFFFF;
    color: #01579B ;
    font: 12pt "Verdana"; }

/* SELECCIÓN DE CAMPOS */
Qtitan--Grid > Qtitan--GridColumnsQuickCustomization, Qtitan--Grid > Qtitan--GridColumnsQuickCustomization *
{
    background-color: #FFFFFF;
    color: #01579B;
    font: 12pt "Verdana"; }
       
/*  --------------------------------------------------------------------------------
    QToolBar - BARRA DE HERRAMIENTAS
    -------------------------------------------------------------------------------- */

QToolBar {
    background-color: transparent;
    border: 0px;
    padding: 3px;
    spacing: 10px;
    qproperty-iconSize: 18px; }

QToolButton {
    background-color: transparent;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080;
    font-size: 14px;
    margin-right: 0px;
    min-height: 32px;
    min-width: 32px;
    padding: 3px;
    qproperty-iconSize: 18px; }

QToolButton:hover {
    background-color: transparent;
    border: 0px solid #01579B; }

QToolButton:focus {
    border: 0px solid #039BE5; }

QToolButton:pressed {
    border: 0px solid #039BE5; }
        
QToolButton:disabled {
    background-color: #FFFFFF;
    border: 0px solid #F5F5F5;
    color: #F5F5F5; }

QToolButton::menu-indicator {
    background-color: transparent;
    color: transparent; }

QToolBar#TOOL_PRINCIPAL {
    background-color: #F1F3F2;
    border: 0px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    spacing: 10px;
    qproperty-iconSize: 32px; }

QToolBar#TOOL_PRINCIPAL QToolButton {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080;
    font-size: 14px;
    margin-right: 0px;
    min-height: 48px;
    min-width: 48px;
    padding: 12px;
    qproperty-iconSize: 32px; }

/*  --------------------------------------------------------------------------------
    QTooltip - TOOLTIP
    -------------------------------------------------------------------------------- */

QToolTip {
    align: center;
    background-color: #F5F5F5;
    border: 1px solid #212121;
    border-radius: 5px;
    color: #212121;
    vertical-align:center; }
        
/*  --------------------------------------------------------------------------------
    QTreeView - ARBOL VISOR Y MENU ARBOLADO
    -------------------------------------------------------------------------------- */

QTreeView {
    outline: 0;
    background-color: #FFFFFF;
    selection-background-color: transparent;
           selection-color: #FFFFFF;
    show-decoration-selected: 1; }

QTreeView::item {
    border-right: 0;
    color: #212121;
    margin-bottom:2px;
    margin-right:10px;
    margin-top: 1px;
    padding-bottom:2px;
    padding-top:1px; }

QTreeView::item:hover {
    border-color: transparent;
    color: #039BE5; }

QTreeView::item:selected {
    color: #01579B; }

/*  --------------------------------------------------------------------------------
    VCPVControlCasillero - CASILLERO
    -------------------------------------------------------------------------------- */

VCPVControlCasillero VCDragTableView {
	border: 0px solid #F5F5F5;
	background-color: #E1F5FE;
	selection-background-color: #E1F5FE;
	selection-color: #212121;}
    
VCPVControlCasillero VCDragTableView:item {
    background-color: #FFFFFF;
    border: 1px solid #F5F5F5;
    border-radius: 3px; }

VCPVControlCasillero VCDragTableView:item:hover {
    border: 1px solid #CCCCCC; }
    
VCPVControlCasillero VCDragTableView:item:focus {
    border: 1px solid #01579B;
    selection-background-color: #FFFFFF; }

VCPVControlCasillero QFrame {
	background-color: #FFFFFF; }

/*  --------------------------------------------------------------------------------
    QCalendarWidget - CALENDARIO
    QWidget#qt_calendar - CALENDARIO
    -------------------------------------------------------------------------------- */

QWidget#qt_calendar_navigationbar {
    background-color: transparent;
    border: 2px solid #F5F5F5;
    qproperty-gridVisible: true; }
    
QWidget#qt_calendar_nextmonth {
    background: transparent;
    border: 0px solid #FFFFFF;
    qproperty-icon: url(":/Resources/tg_buscar_sig.png"); }

QWidget#qt_calendar_prevmonth {
    background: transparent;
    border: 0px solid #FFFFFF;
    qproperty-icon: url(":/Resources/tg_buscar_ant.png"); }

QWidget#qt_calendar_monthbutton, QWidget#qt_calendar_yearbutton {
    background: transparent;
    border: 0px solid #FFFFFF; }

QWidget#qt_calendar_calendarview {
    background-color: #FFFFFF;
    border: 2px solid #F5F5F5; }

QCalendarWidget {
    color: #212121;
    min-width: 300px;
    min-height: 260px; }

QCalendarWidget QSpinBox {
    background-color: #FFFFFF;
    color: #212121;
    font-size:12px;
    width: 35px; }

QCalendarWidget QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right;
    width:30px; }

QCalendarWidget QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
    width:30px; }

/*  --------------------------------------------------------------------------------
	VCOverlayShadow - OVERLAY 
	-------------------------------------------------------------------------------- */
	
VCOverlayShadow {
background-color: rgba(255, 255, 255, 5%); }

VCOverlayShadowGui {
background-color: rgba(255, 255, 255, 5%); }

/*--------------------------------------------------------------------------------
VSwitch - Interruptor
--------------------------------------------------------------------------------*/

VSwitch {
	max-height: 24px;
	min-height: 24px;
	max-width: 36px;
	min-width: 36px;

	/* Fondo: Off, Normal */
	qproperty-backgroundColorOff: #D1D1DB;
	qproperty-borderColorOff: #D1D1DB;
	qproperty-borderSizeOff: 1;

	/* Botón: Off, Normal */
	qproperty-buttonColorOff: #FFFFFF;
	qproperty-buttonBorderColorOff: #FFFFFF;
	qproperty-buttonBorderSizeOff: 1;

	/* Fondo: On, Normal */
	qproperty-backgroundColorOn: #00ACFF;
	qproperty-borderColorOn: #00ACFF;
	qproperty-borderSizeOn: 1;

	/* Botón: On, Normal */
	qproperty-buttonColorOn: #FFFFFF;
	qproperty-buttonBorderColorOn: #FFFFFF;
	qproperty-buttonBorderSizeOn: 1;

	/* Fondo: Off, Focus */
	qproperty-backgroundColorOffFocus: #D1D1DB;
	qproperty-borderColorOffFocus: #D1D1DB;
	qproperty-borderSizeOffFocus: 1;

	/* Botón: Off, Focus */
	qproperty-buttonColorOffFocus: #FFFFFF;
	qproperty-buttonBorderColorOffFocus: #00ACFF;
	qproperty-buttonBorderSizeOffFocus: 1;

	/* Fondo: On, Focus */
	qproperty-backgroundColorOnFocus: #00ACFF;
	qproperty-borderColorOnFocus: #00ACFF;
	qproperty-borderSizeOnFocus: 1;

	/* Botón: On, Focus */
	qproperty-buttonColorOnFocus: #70D1FF;
	qproperty-buttonBorderColorOnFocus: #F0FAFF;
	qproperty-buttonBorderSizeOnFocus: 1;

	/* Fondo: Off, Hover */
	qproperty-backgroundColorOffHover: #D1D1DB;
	qproperty-borderColorOffHover: #D1D1DB;
	qproperty-borderSizeOffHover: 1;

	/* Botón: Off, Hover */
	qproperty-buttonColorOffHover: #EBEBEF;
	qproperty-buttonBorderColorOffHover: #EBEBEF;
	qproperty-buttonBorderSizeOffHover: 1;

	/* Fondo: On, Hover */
	qproperty-backgroundColorOnHover: #00ACFF;
	qproperty-borderColorOnHover: #00ACFF;
	qproperty-borderSizeOnHover: 1;

	/* Botón: On, Hover */
	qproperty-buttonColorOnHover: #DBF3FF;
	qproperty-buttonBorderColorOnHover: #DBF3FF;
	qproperty-buttonBorderSizeOnHover: 1;

	/* Fondo: Off, Disabled */
	qproperty-backgroundColorOffDisabled: #EBEBEF;
	qproperty-borderColorOffDisabled: #EBEBEF;
	qproperty-borderSizeOffDisabled: 1;

	/* Botón: Off, Disabled */
	qproperty-buttonColorOffDisabled: #EBEBEF;
	qproperty-buttonBorderColorOffDisabled: #EBEBEF;
	qproperty-buttonBorderSizeOffDisabled: 1;

	/* Fondo: On, Disabled */
	qproperty-backgroundColorOnDisabled: #EBEBEF;
	qproperty-borderColorOnDisabled: #EBEBEF;
	qproperty-borderSizeOnDisabled: 1;

	/* Botón: On, Disabled */
	qproperty-buttonColorOnDisabled: #EBEBEF;
	qproperty-buttonBorderColorOnDisabled: #EBEBEF;
	qproperty-buttonBorderSizeOnDisabled: 1;
}

/*--------------------------------------------------------------------------------
Asistente navegante

#define OBJ_NAME_TITLE "title" -> Título -> QLabel
#define OBJ_NAME_CANCEL "cancel" -> Botón cancelar -> QPushButton
#define OBJ_NAME_CALCULE "calcule" -> Botón calcular -> QPushButton
#define OBJ_NAME_SHOW "show" -> Botón mostrar -> QPushButton
--------------------------------------------------------------------------------*/

VCAsistenteNaveganteDlg {
	background-color: #F7F7F8;
	height: 600px;
	width: 800px;
}

VCAsistenteNaveganteDlg[cssClass="wizard"]>QFrame {
	padding: 24px;
}

VCAsistenteNaveganteDlg QLabel {
	border: none;
	height: 0px;
	margin: 0px;
	margin-bottom: 12px;
	padding: 0px;
	width: 0;
}

VCAsistenteNaveganteDlg QLabel#title {
	border: none;
	margin: 0px;
	max-height: 0px;
	max-width: 0px;
	padding: 0px;
}

VCAsistenteNaveganteDlg VCBuscadorView {
	background-color: #F7F7F8;
	border: none;
	margin: 0px;
	padding: 0px;
}

VCAsistenteNaveganteDlg VCBuscadorView QPushButton {
	border: 0px;
	min-width: 0px;
	max-width: 0px;
	min-height: 0px;
	max-height: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
	qproperty-iconSize: 0px;
}

VCAsistenteNaveganteDlg VCBuscadorView QLineEdit {
	background-color: #F7F7F8;
	border: 1px solid #D1D1DB;
	color: #282833;
	height: 36px;
	margin-bottom: 12px;
}

VCAsistenteNaveganteDlg VCBuscadorView QLineEdit:hover {
	background-color: #F7F7F8;
	border: 1px solid #00ACFF;
	color: #282833;
}

VCAsistenteNaveganteDlg VCBuscadorView QLineEdit:focus {
	background-color: #F7F7F8;
	border: 2px solid #00ACFF;
	color: #282833;
}

VCAsistenteNaveganteDlg QTableView {
	margin-top: 24px;
	margin-bottom: 24px;
}

VCAsistenteNaveganteDlg QHeaderView::section:vertical {
	border: none;
	padding-right: 6px;
}

VCAsistenteNaveganteDlg QHeaderView::section:horizontal {
	border: none;
}

VCAsistenteNaveganteDlg VCVerticalHeaderCheckbox {
	border: none;
	color: #282833;
}

VCAsistenteNaveganteDlg QPushButton#calcule {
	margin-left: 12px;
}

VCAsistenteNaveganteDlg QPushButton#show {
	background-color: #00ACFF;
	border: 1px solid #00ACFF;
	color: #FFFFFF;
	margin-left: 12px;
}

VCAsistenteNaveganteDlg QPushButton#show:hover {
	background-color: #0090D6;
	border: none;
	color: #FFFFFF;
}

VCAsistenteNaveganteDlg QPushButton#show:focus {
	background-color: #0090D6;
	border: 2px solid #00ACFF;
	color: #FFFFFF;
}

VCAsistenteNaveganteDlg QPushButton#show:pressed {
	background-color: #0090D6;
	border: 1px solid #00ACFF;
	color: #FFFFFF;
}

VCAsistenteNaveganteDlg QPushButton#show:disabled {
	background-color: #F7F7F8;
	border: 1px solid #D1D1DB;
	color: #D1D1DB;
} 

/*--------------------------------------------------------------------------------
Asistente modificar campo

Controles:
#define OBJ_NAME_SUMMARY "summary" -> Ventana resumen (segunda) -> QFrame
#define OBJ_NAME_TITLE "title" -> Título -> QLabel
#define OBJ_NAME_MAIN "main" -> Ventana principal (primera) -> QFrame
#define OBJ_NAME_REGISTERS "registers" -> Registros -> QLabel y QComboBox
#define OBJ_NAME_TOTAL_REGISTERS "total-registers" -> Total registros -> QLabel y QLineEdit
#define OBJ_NAME_FIELD "field" -> Campo -> QLabel y QComboBox
#define OBJ_NAME_FILTER "filter" -> Filtro -> QLabel y VFormulaEditBrowser
#define OBJ_NAME_NEW_VALUE "new-value" -> Nuevo valor -> QLabel y QComboBox
#define OBJ_NAME_CONSTANT_VALUE "constant-value" -> Valor constante -> QLabel y QLineEdit, VBoundFieldEdit, VDateEdit, VTimeEdit, VDateTimeEdit, VComboBox, QDoubleSpinBox, VImageEdit, VCEditBrowserTexto, VFormulaEditBrowser
#define OBJ_NAME_FORMULE_VALUE "formule-value" -> Valor fórmula -> QLabel y VFormulaEditBrowser
#define OBJ_NAME_CANCEL "cancel" -> Botón cancelar -> QPushButton
#define OBJ_NAME_NEXT "next" -> Botón siguiente -> QPushButton
#define OBJ_NAME_BACK "back" -> Botón atrás -> QPushButton
#define OBJ_NAME_MODIFY "modify" -> Botón modificar -> QPushButton
--------------------------------------------------------------------------------*/

VCModificarCampoDlg {
	background-color: #F7F7F8;
}

VCModificarCampoDlg[cssClass="wizard"]>QFrame {
	padding: 24px;
}

VCModificarCampoDlg QLabel {
	border: none;
	height: 0px;
	margin: 0px;
	margin-top: 12px;
	padding: 0px;
	width: 0;
}

VCModificarCampoDlg QLabel#title,
VCModificarCampoDlg QLabel#summary {
	border: none;
	margin: 0px;
	margin: 0px;
	max-height: 0px;
	max-width: 0px;
	padding: 0px;
}

VCModificarCampoDlg QLabel[cssClass="warning"] {
	color: #F3164E;
	margin-bottom: 6px;
	text-transform: none;
}

VCModificarCampoDlg QFrame#main QLabel#total-registers,
VCModificarCampoDlg QFrame#main QLineEdit#total-registers {
	margin-left: 12px;
}

VCModificarCampoDlg QPushButton#next,
VCModificarCampoDlg QPushButton#modify {
	background-color: #00ACFF;
	border: 1px solid #00ACFF;
	color: #FFFFFF;
	margin-left: 12px;
}

VCModificarCampoDlg QPushButton#next:hover,
VCModificarCampoDlg QPushButton#modify:hover {
	background-color: #0090D6;
	border: none;
	color: #FFFFFF;
}

VCModificarCampoDlg QPushButton#next:focus,
VCModificarCampoDlg QPushButton#modify:focus {
	background-color: #0090D6;
	border: 2px solid #00ACFF;
	color: #FFFFFF;
}

VCModificarCampoDlg QPushButton#next:pressed,
VCModificarCampoDlg QPushButton#modify:pressed {
	background-color: #0090D6;
	border: 1px solid #00ACFF;
	color: #FFFFFF;
}

VCModificarCampoDlg QPushButton#next:disabled,
VCModificarCampoDlg QPushButton#modify:disabled {
	background-color: #F7F7F8;
	border: 1px solid #D1D1DB;
	color: #D1D1DB;
}

/*  --------------------------------------------------------------------------------
    VCRejillaConfigPanel - PANEL DE CONFIGURACIÓN DE REJILLAS
    -------------------------------------------------------------------------------- */

VCRejillaConfigPanel {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0; }

/* BARRA DE TÍTULO */
VCRejillaConfigPanel QWidget#header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    color: #212121; }

/* BOTÓN ACOPLAR/FLOTAR */
VCRejillaConfigPanel QToolButton#floatBtn {
    background-color: transparent;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080; }

VCRejillaConfigPanel QToolButton#floatBtn:hover {
    border: 0px solid #01579B; }

/* CAMPO DE BÚSQUEDA DE COLUMNAS */
VCRejillaConfigPanel QLineEdit#search {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    qproperty-placeholderText: 'Buscar columna'; }

VCRejillaConfigPanel QLineEdit#search:focus {
    border-bottom: 1px solid #01579B; }

/* LISTA DE COLUMNAS */
VCRejillaConfigPanel QListWidget#list {
    background-color: #FFFFFF;
    border: none;
    color: #212121; }

VCRejillaConfigPanel QListWidget#list::item:hover {
    background-color: #E1F5FE; }

VCRejillaConfigPanel QListWidget#list::item:selected {
    background-color: #E1F5FE;
    color: #01579B; }

/* BOTONES MOSTRAR TODO / OCULTAR TODO / AÑADIR COLUMNA */
VCRejillaConfigPanel QToolButton#showAll,
VCRejillaConfigPanel QToolButton#hideAll,
VCRejillaConfigPanel QToolButton#addColumn {
    background-color: transparent;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080;
    font-size: 14px;
    qproperty-iconSize: 18px; }

VCRejillaConfigPanel QToolButton#showAll:hover,
VCRejillaConfigPanel QToolButton#hideAll:hover,
VCRejillaConfigPanel QToolButton#addColumn:hover {
    border: 0px solid #01579B; }

VCRejillaConfigPanel QToolButton#showAll:disabled,
VCRejillaConfigPanel QToolButton#hideAll:disabled,
VCRejillaConfigPanel QToolButton#addColumn:disabled {
    background-color: #FFFFFF;
    border: 0px solid #F5F5F5;
    color: #F5F5F5; }

/* PANEL OVERLAY DE SELECCIÓN DE CAMPOS */
VCRejillaConfigPanel QWidget#fieldPickerPanel {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0; }

/* BÚSQUEDA DENTRO DEL SELECTOR DE CAMPOS */
VCRejillaConfigPanel QWidget#fieldPickerPanel QLineEdit#fieldSearch {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    qproperty-placeholderText: 'Buscar campo'; }

VCRejillaConfigPanel QWidget#fieldPickerPanel QLineEdit#fieldSearch:focus {
    border-bottom: 1px solid #01579B; }

/* ÁRBOL DE CAMPOS DISPONIBLES */
VCRejillaConfigPanel QWidget#fieldPickerPanel QTreeView#fieldTree {
    background-color: #FFFFFF;
    outline: 0;
    selection-background-color: transparent;
    selection-color: #FFFFFF; }

VCRejillaConfigPanel QWidget#fieldPickerPanel QTreeView#fieldTree::item {
    color: #212121; }

VCRejillaConfigPanel QWidget#fieldPickerPanel QTreeView#fieldTree::item:hover {
    color: #039BE5; }

VCRejillaConfigPanel QWidget#fieldPickerPanel QTreeView#fieldTree::item:selected {
    color: #01579B; }

/*  --------------------------------------------------------------------------------
    VCRejillaConfigPanel - PANEL DE CONFIGURACIÓN DE REJILLAS (CONTINUACIÓN)
    Los elementos del panel se seleccionan por su nombre de objeto (objectName).
    Las cuatro páginas del panel cuelgan de un QStackedWidget: para fijar el fondo de todo
    el panel hay que estilizar también el QStackedWidget y sus páginas.
    -------------------------------------------------------------------------------- */

/* FONDO DE TODO EL PANEL Y DE SUS PÁGINAS */
VCRejillaConfigPanel QStackedWidget,
VCRejillaConfigPanel QStackedWidget > QWidget {
    background-color: #FFFFFF; }

/* COLOR DE RESALTADO DEL PANEL
   selection-background-color es el color de resaltado que usan los chips de agrupación y la columna agrupada.
   Si no se define, se usa el color de selección del sistema. */
VCRejillaConfigPanel {
    selection-background-color: #039BE5;
    selection-color: #FFFFFF; }

/* TÍTULO DE LA BARRA: NOMBRE DE LA CONFIGURACIÓN ACTIVA */
VCRejillaConfigPanel #title {
    background-color: transparent;
    color: #212121;
    font-size: 16px; }

/* BOTONES DE LA BARRA DE TÍTULO: FLOTAR O ACOPLAR EL PANEL, CERRARLO Y VOLVER DE UNA PÁGINA SECUNDARIA
   Son botones de icono (QToolButton). qproperty-icon les pone un icono propio y qproperty-iconSize fija su tamaño. */
VCRejillaConfigPanel QToolButton#floatBtn,
VCRejillaConfigPanel QToolButton#closeBtn,
VCRejillaConfigPanel QToolButton#backBtn {
    background-color: transparent;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080;
    qproperty-iconSize: 16px 16px; }

VCRejillaConfigPanel QToolButton#floatBtn:hover,
VCRejillaConfigPanel QToolButton#closeBtn:hover,
VCRejillaConfigPanel QToolButton#backBtn:hover {
    background-color: #E1F5FE;
    color: #01579B; }

/* BOTONES DE LA BARRA: GUARDAR COMO, QUITAR FILTROS, MENÚ DE LA CONFIGURACIÓN Y CONFIGURACIONES GUARDADAS
   - saveAsConfig: «Guardar como…»
   - clearFilters: «Quitar filtros» (solo es visible cuando hay filtros aplicados)
   - configMenu: botón «⋮» con el menú de la configuración
   - loadConfig: botón «☰» con las configuraciones guardadas
   En configMenu y loadConfig, qproperty-icon sustituye también al glifo de texto. */
VCRejillaConfigPanel QToolButton#saveAsConfig,
VCRejillaConfigPanel QToolButton#clearFilters,
VCRejillaConfigPanel QToolButton#configMenu,
VCRejillaConfigPanel QToolButton#loadConfig {
    background-color: transparent;
    border: 0px solid #212121;
    border-radius: 5px;
    color: #808080;
    qproperty-iconSize: 16px 16px; }

VCRejillaConfigPanel QToolButton#saveAsConfig:hover,
VCRejillaConfigPanel QToolButton#clearFilters:hover,
VCRejillaConfigPanel QToolButton#configMenu:hover,
VCRejillaConfigPanel QToolButton#loadConfig:hover {
    background-color: #E1F5FE;
    color: #01579B; }

/* BOTÓN «GUARDAR» */
VCRejillaConfigPanel #saveConfig {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    color: #FFFFFF; }

/* AGRUPAR POR: ETIQUETA DE LA ZONA */
VCRejillaConfigPanel #groupZoneTitle {
    background-color: transparent;
    color: #808080;
    font-size: 11px;
    font-weight: bold; }

/* AGRUPAR POR: ZONA DE ARRASTRE (VCRejillaGroupDropZone)
   Si la hoja de estilo le da fondo o borde propios, mandan background, border y border-radius.
   Si no, se pinta con su aspecto de siempre. */
VCRejillaConfigPanel VCRejillaGroupDropZone#groupDropZone {
    background-color: #F5F5F5;
    border: 1px dashed #BDBDBD;
    border-radius: 4px;
    min-height: 48px; }

/* AGRUPAR POR: TEXTO «ARRASTRA AQUÍ PARA AGRUPAR» */
VCRejillaConfigPanel #groupDropHint {
    color: #808080; }

/* AGRUPAR POR: CONTENEDOR DE LOS CHIPS
   El chip es un QFrame: una regla amplia de QFrame (por ejemplo, la de separadores) le pondría fondo.
   Conviene estilizarlo por su nombre de objeto, como aquí. */
VCRejillaConfigPanel #groupChipsContainer {
    background-color: transparent; }

/* AGRUPAR POR: CHIP DE UNA COLUMNA AGRUPADA (VCGroupChip)
   Si la hoja de estilo le da fondo o borde propios, mandan background, border y border-radius.
   La X del chip sigue el color de resaltado del panel (selection-background-color). */
VCRejillaConfigPanel VCGroupChip#groupChip {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    border-radius: 10px; }

/* AGRUPAR POR: TEXTO DEL CHIP
   Su color y su fuente se controlan con esta regla. */
VCRejillaConfigPanel QLabel#groupChipLabel {
    background-color: transparent;
    color: #FFFFFF;
    font-size: 12px; }

/* AGRUPAR POR: BOTÓN DE LIMPIAR LA AGRUPACIÓN */
VCRejillaConfigPanel #groupClearBtn {
    background-color: transparent;
    border: none;
    color: #808080; }

VCRejillaConfigPanel #groupClearBtn:hover {
    color: #01579B; }

/* LISTA DE COLUMNAS: CHECKBOX DE VISIBILIDAD DE CADA FILA
   El hover y el checkbox de cada fila se estilizan con ::item:hover y ::indicator.
   Si la hoja de estilo no define hover para la lista, se usa el resaltado de siempre. */
VCRejillaConfigPanel QListWidget#list::indicator {
    background-color: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 3px;
    height: 16px;
    width: 16px; }

VCRejillaConfigPanel QListWidget#list::indicator:checked {
    background-color: #039BE5;
    border: 1px solid #039BE5; }

/* LISTA DE COLUMNAS: BOTONES DE ACCIÓN DE CADA FILA
   QToolButton#columnAction define el aspecto de los botones de configurar total, editar y eliminar.
   - color tiñe el icono
   - icon-size fija su tamaño
   - :hover admite background-color, border, border-radius y color
   Sin regla propia, se ven como siempre. */
VCRejillaConfigPanel QToolButton#columnAction {
    color: #808080;
    icon-size: 16px; }

VCRejillaConfigPanel QToolButton#columnAction:hover {
    background-color: #E1F5FE;
    border-radius: 5px;
    color: #01579B; }

/* AÑADIR COLUMNA: ÁRBOL DE CAMPOS
   qproperty-mostrarIdCampo (true por defecto) decide si el árbol muestra el identificador del campo
   detrás de su nombre. La ruta de los resultados de búsqueda se muestra siempre. */
VCRejillaConfigPanel {
    qproperty-mostrarIdCampo: true; }

/* AÑADIR COLUMNA: TEXTO DE DETALLE TRAS EL NOMBRE DE CADA CAMPO
   QLabel#fieldDetail es una etiqueta oculta que solo aporta el estilo de ese texto.
   Admite fuente, color, text-transform, letter-spacing y margin-left.
   Sin regla propia, el detalle sigue a la fuente y al placeholder-text-color del árbol. */
VCRejillaConfigPanel QLabel#fieldDetail {
    color: #808080;
    font-size: 11px;
    margin-left: 6px; }

/* AÑADIR COLUMNA: CHECK DE CAMPO AÑADIDO */
VCRejillaConfigPanel QTreeView#fieldTree::indicator:checked {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    /* image: url(RUTA_IMAGENES/check-on.svg); */ }

/* AÑADIR COLUMNA: FLECHAS DE LAS RAMAS DEL ÁRBOL
   Con ::branch se puede usar image para las flechas. Al definir ::branch, Qt deja de pintar las
   flechas nativas, así que hay que dar las dos: la de rama cerrada y la de rama abierta.
   Si no necesitas cambiarlas, no definas ::branch y se verán las nativas. */
/* VCRejillaConfigPanel QTreeView#fieldTree::branch:has-children:closed { image: url(RUTA_IMAGENES/rama-cerrada.svg); }
   VCRejillaConfigPanel QTreeView#fieldTree::branch:has-children:open { image: url(RUTA_IMAGENES/rama-abierta.svg); } */

/* AÑADIR COLUMNA: INDICADOR DE CARGA DE LA BÚSQUEDA DE CAMPOS
   spinnerBusquedaCampos es un VCSpinner. Sus propiedades se describen más abajo, en VCSpinner. */

/* CONFIGURACIONES GUARDADAS: PÁGINA, BUSCADOR Y LISTA
   - viewsPanel: página de las configuraciones guardadas
   - viewsSearch: buscador de configuraciones
   - viewsList: lista de configuraciones */
VCRejillaConfigPanel #viewsPanel {
    background-color: #FFFFFF; }

VCRejillaConfigPanel #viewsSearch {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    color: #212121; }

VCRejillaConfigPanel #viewsList {
    background-color: #FFFFFF;
    border: none;
    color: #212121; }

/* CONFIGURACIONES GUARDADAS: DISTINTIVO «POR DEFECTO» */
VCRejillaConfigPanel #viewsItemBadge {
    background-color: #E1F5FE;
    border-radius: 8px;
    color: #01579B;
    font-size: 11px; }

/* EDITAR COLUMNA: PÁGINA Y SUS CAMPOS
   - editColumnPanel: página «Editar columna»
   - editColumnCaption: título de cada campo del formulario
   - editColumnField y editColumnLabel: campo vinculado y etiqueta de la columna
   - editColumnAlign, editColumnWidthType, editColumnWidth y editColumnSortAs:
     alineación, tipo de ancho, ancho y «Ordenar como»
   - saveColumnEdit: botón «Aplicar cambios» */
VCRejillaConfigPanel #editColumnPanel {
    background-color: #FFFFFF; }

VCRejillaConfigPanel #editColumnCaption {
    color: #808080;
    font-size: 11px; }

VCRejillaConfigPanel #editColumnField,
VCRejillaConfigPanel #editColumnLabel,
VCRejillaConfigPanel #editColumnAlign,
VCRejillaConfigPanel #editColumnWidthType,
VCRejillaConfigPanel #editColumnWidth,
VCRejillaConfigPanel #editColumnSortAs {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    color: #212121; }

VCRejillaConfigPanel #saveColumnEdit {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    color: #FFFFFF; }

/* BARRAS DE DESPLAZAMIENTO DEL PANEL
   Admite los mismos subcontroles que las de la rejilla. */
VCRejillaConfigPanel QScrollBar:vertical {
    background: #F5F5F5;
    width: 10px; }

VCRejillaConfigPanel QScrollBar::handle:vertical {
    background: #BDBDBD;
    border-radius: 5px;
    min-height: 24px; }

/*  --------------------------------------------------------------------------------
    VCMenuRejillaConfigTotales - MENÚ DE TOTALES DE UNA COLUMNA
    El menú que se abre desde el botón de configurar total de cada columna del panel.
    -------------------------------------------------------------------------------- */

VCMenuRejillaConfigTotales#totalMenu {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0; }

/* OPCIÓN DEL MENÚ */
VCMenuRejillaConfigTotales#totalMenu::item {
    color: #212121;
    padding: 6px 16px; }

/* OPCIÓN BAJO EL RATÓN */
VCMenuRejillaConfigTotales#totalMenu::item:selected {
    background-color: #E1F5FE;
    color: #01579B; }

/* SEPARADOR ENTRE SECCIONES */
VCMenuRejillaConfigTotales#totalMenu::separator {
    background-color: #E0E0E0;
    height: 1px; }

/* TÍTULO DE CADA SECCIÓN DEL MENÚ */
VCMenuRejillaConfigTotales QLabel#menuSection {
    color: #808080;
    font-size: 11px;
    font-weight: bold; }

/* COLOR DE LA OPCIÓN MARCADA */
VCMenuRejillaConfigTotales {
    qproperty-colorOpcionMarcada: #039BE5; }

/*  --------------------------------------------------------------------------------
    VCRejillaColumnFilterPopup - POPUP DE FILTRO POR COLUMNA
    El panel que se abre al pulsar el icono de filtro de una columna.
    Sus elementos se seleccionan por su nombre de objeto.
    -------------------------------------------------------------------------------- */

VCRejillaColumnFilterPopup {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #212121; }

/* ETIQUETA DEL TIPO DE FILTRO («Filtrar por…») */
VCRejillaColumnFilterPopup #filterByLbl {
    color: #808080;
    font-size: 11px;
    font-weight: bold; }

/* ETIQUETA DE LA COMBINACIÓN DE CONDICIONES (Y / O) */
VCRejillaColumnFilterPopup #combinatorLbl {
    color: #808080; }

/* BOTONES DE LA COMBINACIÓN DE CONDICIONES: Y Y O
   El botón marcado se estiliza con :checked o :pressed. */
VCRejillaColumnFilterPopup #combinatorAndBtn,
VCRejillaColumnFilterPopup #combinatorOrBtn {
    background-color: #F5F5F5;
    border: 1px solid #E0E0E0;
    color: #212121; }

VCRejillaColumnFilterPopup #combinatorAndBtn:checked,
VCRejillaColumnFilterPopup #combinatorOrBtn:checked,
VCRejillaColumnFilterPopup #combinatorAndBtn:pressed,
VCRejillaColumnFilterPopup #combinatorOrBtn:pressed {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    color: #FFFFFF; }

/* BOTONES PARA AÑADIR Y QUITAR UNA CONDICIÓN */
VCRejillaColumnFilterPopup #addConditionBtn,
VCRejillaColumnFilterPopup #removeConditionBtn {
    background-color: transparent;
    border: none;
    color: #808080; }

VCRejillaColumnFilterPopup #addConditionBtn:hover,
VCRejillaColumnFilterPopup #removeConditionBtn:hover {
    color: #01579B; }

/* BOTÓN DE QUITAR EL FILTRO DE LA COLUMNA */
VCRejillaColumnFilterPopup #clearBtn {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #212121; }

/* BOTÓN DE APLICAR EL FILTRO */
VCRejillaColumnFilterPopup #applyBtn {
    background-color: #039BE5;
    border: 1px solid #039BE5;
    color: #FFFFFF; }

/*  --------------------------------------------------------------------------------
    VCSpinner - INDICADOR DE CARGA
    Se usa, por ejemplo, en la búsqueda de campos del panel de configuración.
    Se configura solo con propiedades propias.
    -------------------------------------------------------------------------------- */

VCSpinner {
    qproperty-anguloArco: 90;                   /* Longitud del arco que gira */
    qproperty-colorArco: #039BE5;               /* Color del arco */
    qproperty-colorTexto: #808080;              /* Color del texto que acompaña al indicador */
    qproperty-grosorArco: 3;                    /* Grosor del arco, en píxeles */
    qproperty-intervaloAnimacion: 40;           /* Intervalo de la animación, en milisegundos */
    qproperty-tamanoArco: 24;                   /* Tamaño del arco, en píxeles */
    qproperty-texto: 'Buscando...'; }           /* Texto que acompaña al indicador */
    /* qproperty-posicionTexto: ...;  Posición del texto respecto al arco */

```

Utilizando la notación `[objectName^='FIL']` se consigue que se apliquen las etiquetas CSS a todos los controles cuyo nombre en v7 (objectName) empiece (^=) por la cadena indicada.

De esta, añadiendo objetos a los proyectos utilizando una nomenclatura correcta, ya se aplica correctamente la CSS sin modificarla.

## Personalizar con css el botón menú de un control de edición de formularios

Cuando en un control de edición le asignamos un menú en la propiedad **menú de botón** se añade al control un botón para desplegar dicho menú:

![](https://content.gitbook.com/content/SSuDG1WIgF9xPUK4NaFS/blobs/RHL3nFeDjyFVWydSWDU3/image.png)

En el caso de que queramos personalizar dicho botón por css debemos tener en cuenta que la clase que permite personalizar el botón *QToolButton*, pero debemos tener en cuenta que si usamos esa clase directamente, nos personalizará no solamente los botones incrustados en los controles de edición, sino también los de todas las toolbars del proyecto.

En el caso de que queramos personalizar solamente los botones de los controles de edición debemos saber que el control en el que se incrusta un botón menú se controla con la clase VAbstractBrowser, por lo tanto, lo que podrías hacer es aplicar por css un css a los QToolButton de esa clase solamente. Por ejemplo:

```css
"VAbstractBrowser QToolButton{
 min-width: 24px;
 min-height: 24px;
 padding: 1px;
 margin-right: 1px;
 border-radius: 2px;
 background:  qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE);
 border: 1px solid #CECECE;
 color: #727272;
}"
```