/* ============================================
   MÓDULO: Configuración
   Archivo: css/modules/configuracion.css

   Estilos del módulo de configuración del sistema:
   página principal, cuentas bancarias, usuarios
   y permisos granulares.
   Responsive en: css/responsive/configuracion/
   ============================================ */

/* --------------------------------------------
   CONTENEDOR DE PÁGINA
   -------------------------------------------- */

/* Wrapper con padding y max-width */
.cfg-page-container {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Variante más ancha para cuentas bancarias */
.cfg-page-container--wide {
    padding: 24px;
    max-width: 960px;
    margin: 0 auto;
}

/* --------------------------------------------
   CABECERA DE SECCIÓN
   -------------------------------------------- */

/* Fila izquierda: botón atrás + título */
.cfg-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón volver */
.cfg-btn-back {
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 12px;
}

.cfg-btn-back:hover {
    background: #e5e7eb;
}

/* Título de sección (h2) */
.cfg-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

/* Título de página (h2, un poco más pequeño) */
.cfg-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

/* Ícono de título — variantes de color */
.cfg-icon--indigo { color: #6366f1; margin-right: 8px; }
.cfg-icon--green  { color: #10b981; margin-right: 8px; }
.cfg-icon--blue   { color: #0d2e7a; margin-right: 8px; }
.cfg-icon--amber  { color: #f59e0b; margin-right: 4px; }

/* Badge de conteo junto al título */
.cfg-count-badge {
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

/* Texto descriptivo bajo el encabezado */
.cfg-info-text {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 20px;
}

/* --------------------------------------------
   BOTÓN PRIMARIO (GRADIENTE)
   -------------------------------------------- */

/* Botón principal con gradiente indigo */
.cfg-btn-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: all 0.2s;
}

.cfg-btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

/* Botón verde (Nuevo Usuario) */
.cfg-btn-primary--green {
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cfg-btn-primary--green:hover {
    background: #059669;
}

/* --------------------------------------------
   GRID PRINCIPAL (NAVEGACIÓN)
   -------------------------------------------- */

/* Grid de tarjetas de navegación */
.cfg-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Enlace que envuelve la tarjeta */
.cfg-nav-link {
    text-decoration: none;
}

/* Tarjeta de navegación base */
.cfg-nav-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    border: 2px solid transparent;
    cursor: pointer;
}

/* Variante de hover: borde indigo */
.cfg-nav-card--indigo:hover {
    border-color: #6366f1;
}

/* Variante de hover: borde azul oscuro */
.cfg-nav-card--blue:hover {
    border-color: #0d2e7a;
}

/* Fila interna de la tarjeta: ícono + texto */
.cfg-card-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Ícono de la tarjeta de navegación */
.cfg-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Variantes de color del ícono */
.cfg-card-icon--indigo { background: #eef2ff; color: #6366f1; }
.cfg-card-icon--green  { background: #ecfdf5; color: #10b981; }
.cfg-card-icon--blue   { background: #eff6ff; color: #0d2e7a; }

/* Tamaño del ícono */
.cfg-card-icon i {
    font-size: 20px;
}

/* Título de la tarjeta */
.cfg-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

/* Subtítulo de la tarjeta */
.cfg-card-subtitle {
    font-size: 13px;
    color: #94a3b8;
}

/* --------------------------------------------
   ESTADO VACÍO
   -------------------------------------------- */

/* Contenedor de estado vacío */
.cfg-empty-state {
    text-align: center;
    padding: 60px 20px;
}

/* Ícono del estado vacío */
.cfg-empty-state__icon {
    font-size: 48px;
    color: #e2e8f0;
    margin-bottom: 16px;
}

/* Texto principal del estado vacío */
.cfg-empty-state__title {
    color: #94a3b8;
    font-size: 15px;
    margin-bottom: 4px;
}

/* Texto secundario del estado vacío */
.cfg-empty-state__hint {
    color: #cbd5e1;
    font-size: 13px;
}

/* --------------------------------------------
   TARJETAS DE CUENTA BANCARIA
   -------------------------------------------- */

/* Card base de cuenta (border-left dinámico vía inline) */
.cfg-cuenta-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
}

.cfg-cuenta-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Fila principal de la cuenta */
.cfg-cuenta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sección de información (izquierda) */
.cfg-cuenta-info {
    flex: 1;
    min-width: 200px;
}

/* Fila ícono + nombre del banco */
.cfg-cuenta-bank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Ícono del banco (fondo dinámico vía inline según estado activo) */
.cfg-cuenta-bank-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tamaño del ícono dentro */
.cfg-cuenta-bank-icon i {
    font-size: 16px;
}

/* Nombre del banco */
.cfg-cuenta-banco {
    color: #1e293b;
    font-size: 15px;
}

/* Badge de estado activo/inactivo (bg/color dinámico vía inline) */
.cfg-cuenta-status {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Grid de detalles de la cuenta */
.cfg-cuenta-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 16px;
    padding-left: 50px;
}

/* Etiqueta del detalle */
.cfg-detail-label {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Valor del detalle */
.cfg-detail-value {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* Valor monoespaciado (número de cuenta) */
.cfg-detail-value--mono {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Botones de acción de la cuenta */
.cfg-cuenta-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Botón editar */
.cfg-btn-edit {
    padding: 8px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    cursor: pointer;
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.cfg-btn-edit:hover {
    background: #dbeafe;
}

/* Botón eliminar */
.cfg-btn-delete {
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.cfg-btn-delete:hover {
    background: #fee2e2;
}

/* Botón pequeño editar (usuarios) */
.cfg-btn-edit-sm {
    padding: 6px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    color: #2563eb;
    font-size: 12px;
}

.cfg-btn-edit-sm:hover {
    background: #dbeafe;
}

/* Botón pequeño eliminar/toggle */
.cfg-btn-delete-sm {
    padding: 6px 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    color: #dc2626;
    font-size: 12px;
}

.cfg-btn-delete-sm:hover {
    background: #fee2e2;
}

/* --------------------------------------------
   FORMULARIO DE CUENTA BANCARIA
   -------------------------------------------- */

/* Panel blanco del formulario */
.cfg-form-panel {
    background: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 16px;
    border: 1px solid #e2e8f0;
}

/* Cabecera del formulario */
.cfg-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

/* Ícono cuadrado del header de formulario */
.cfg-form-icon {
    width: 36px;
    height: 36px;
    background: #eef2ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    font-size: 16px;
}

/* Título del panel de formulario */
.cfg-form-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

/* Asterisco requerido */
.cfg-required {
    color: #ef4444;
}

/* Grid de 2 columnas del formulario */
.cfg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Grid de 2 columnas con gap mayor (cuentas bancarias) */
.cfg-form-grid--lg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Etiqueta de formulario */
.cfg-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 2px;
}

/* Input de formulario */
.cfg-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 4px;
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cfg-form-input:focus {
    border-color: #6366f1;
}

/* Input más simple (usuarios) */
.cfg-form-input--sm {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

.cfg-form-input--sm:focus {
    outline: none;
    border-color: #6366f1;
}

/* Separador de sección dentro del formulario */
.cfg-section-divider {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Fila de sección: título + botón */
.cfg-section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Botón agregar (condominios) */
.cfg-btn-add {
    padding: 4px 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    cursor: pointer;
    color: #6366f1;
    font-size: 12px;
    font-weight: 600;
}

.cfg-btn-add:hover {
    background: #e0e7ff;
}

/* Lista de condominios */
.cfg-condos-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Fila de condominio */
.cfg-condo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Input de condominio */
.cfg-condo-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
}

/* Texto de hint/ayuda */
.cfg-hint-text {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
}

/* Fila de acciones del formulario */
.cfg-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* Fila de acciones simple (sin padding-top/border) */
.cfg-form-actions--simple {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* Botón cancelar */
.cfg-btn-cancel {
    padding: 8px 20px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

.cfg-btn-cancel:hover {
    background: #f9fafb;
}

/* Botón cancelar grande */
.cfg-btn-cancel--lg {
    padding: 10px 24px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    cursor: pointer;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.cfg-btn-cancel--lg:hover {
    background: #f9fafb;
}

/* Botón guardar (gradiente, grande) */
.cfg-btn-save {
    padding: 10px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: all 0.2s;
}

.cfg-btn-save:hover {
    opacity: 0.9;
}

/* Botón guardar verde (usuarios) */
.cfg-btn-save--green {
    padding: 8px 20px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.cfg-btn-save--green:hover {
    background: #059669;
}

/* --------------------------------------------
   TARJETAS DE USUARIO
   -------------------------------------------- */

/* Card de usuario en la lista */
.cfg-user-card {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nombre del usuario */
.cfg-user-name {
    color: #1e293b;
    font-weight: 600;
}

/* Metadatos del usuario */
.cfg-user-meta {
    color: #94a3b8;
    font-size: 13px;
}

/* Badge de rol (bg/color dinámico vía inline) */
.cfg-badge-rol {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* Badge de permisos custom */
.cfg-badge--custom {
    background: #fef3c7;
    color: #d97706;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

/* Badge de condominios */
.cfg-badge--condo {
    background: #ecfdf5;
    color: #10b981;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

/* Estado activo/inactivo del usuario (color dinámico vía inline) */
.cfg-user-status {
    font-size: 11px;
}

/* Acciones de usuario (botones) */
.cfg-user-actions {
    display: flex;
    gap: 8px;
}

/* Formulario de usuario */
.cfg-form-container {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-top: 16px;
}

/* Título del formulario de usuario */
.cfg-form-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1e293b;
}

/* Contenedor de árbol de permisos */
.cfg-permisos-wrap {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

/* --------------------------------------------
   ÁRBOL DE PERMISOS
   -------------------------------------------- */

/* Módulo en el árbol */
.cfg-permisos-modulo {
    margin-bottom: 8px;
}

/* Header de módulo */
.cfg-permisos-modulo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    user-select: none;
}

/* Chevron de colapso */
.cfg-permisos-chevron {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.2s;
    width: 12px;
}

/* Nombre del módulo */
.cfg-permisos-modulo-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    flex: 1;
}

/* Label de "Todos" del módulo */
.cfg-permisos-all-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
}

/* Cuerpo del módulo (colapsable) */
.cfg-permisos-modulo-body {
    padding: 6px 0 0 24px;
}

/* Fila de subpermisos */
.cfg-permisos-sub-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

/* Etiqueta de subpermiso */
.cfg-permisos-sub-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    min-width: 100px;
}

/* Label de permiso individual — estado desmarcado */
.cfg-permiso-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #374151;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: all 0.15s;
}

/* Label de permiso marcado */
.cfg-permiso-label--checked {
    background: #dcfce7;
    border-color: #bbf7d0;
}

/* Label de permiso desmarcado (redundante pero explícito) */
.cfg-permiso-label--unchecked {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* --------------------------------------------
   CABECERA DE MÓDULO (module-header variants)
   -------------------------------------------- */

/* Header de página simple con margen inferior */
.cfg-module-header {
    margin-bottom: 24px;
}

/* Header con acciones: wrap y gap */
.cfg-module-header--wide {
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

/* --------------------------------------------
   TARJETA DE CUENTA BANCARIA — MODIFICADORES
   -------------------------------------------- */

/* Borde izquierdo según estado de la cuenta */
.cfg-cuenta-card--active   { border-left: 4px solid #6366f1; }
.cfg-cuenta-card--inactive { border-left: 4px solid #cbd5e1; }

/* Fondo del ícono bancario según estado */
.cfg-cuenta-bank-icon--active   { background: #eef2ff; }
.cfg-cuenta-bank-icon--inactive { background: #f1f5f9; }

/* Color del ícono bancario según estado */
.cfg-cuenta-bank-icon--active   i { color: #6366f1; }
.cfg-cuenta-bank-icon--inactive i { color: #94a3b8; }

/* Badge activo/inactivo de la cuenta */
.cfg-cuenta-status--active   { background: #ecfdf5; color: #059669; }
.cfg-cuenta-status--inactive { background: #fef2f2; color: #dc2626; }

/* --------------------------------------------
   UTILIDADES
   -------------------------------------------- */

/* Guión placeholder (titular vacío) */
.cfg-placeholder { color: #cbd5e1; }

/* Ícono en botón primario con margen derecho */
.cfg-btn-primary i,
.cfg-btn-cancel--lg i,
.cfg-btn-save i { margin-right: 4px; }

/* Ícono en texto informativo */
.cfg-info-text i { margin-right: 4px; }

/* Select visible con cursor pointer */
.cfg-form-select {
    cursor: pointer;
    appearance: auto;
}

/* --------------------------------------------
   USUARIOS — MODIFICADORES
   -------------------------------------------- */

/* Mensaje de lista vacía */
.cfg-empty-users-msg {
    text-align: center;
    color: #94a3b8;
    padding: 40px;
}

/* Badge de rol por tipo */
.cfg-badge-rol--admin    { background: #eef2ff; color: #6366f1; }
.cfg-badge-rol--consultor { background: #fef3c7; color: #d97706; }
.cfg-badge-rol--default  { background: #ecfdf5; color: #10b981; }

/* Estado activo/inactivo del usuario */
.cfg-user-status--active   { color: #10b981; }
.cfg-user-status--inactive { color: #ef4444; }

/* Botón de toggle de usuario: desactivar (rojo) */
.cfg-btn-toggle--deactivate {
    padding: 6px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    color: #dc2626;
    font-size: 12px;
}

/* Botón de toggle de usuario: activar (verde) */
.cfg-btn-toggle--activate {
    padding: 6px 10px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    cursor: pointer;
    color: #16a34a;
    font-size: 12px;
}

/* Texto de hint de contraseña */
.cfg-pass-hint {
    font-weight: 400;
    color: #94a3b8;
    font-size: 11px;
}

/* Label del toggle de permisos personalizados */
.cfg-custom-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #475569;
}

/* Checkbox del toggle de permisos personalizados */
.cfg-custom-toggle-cb {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --------------------------------------------
   ÁRBOL DE PERMISOS — MODIFICADORES
   -------------------------------------------- */

/* Hint del árbol de permisos con margen */
.cfg-permisos-hint { margin: 0 0 8px 0; }

/* Estado activo (custom permisos activados) */
.cfg-permisos-hint--active   { color: #f59e0b; }

/* Estado inactivo (usando permisos del rol) */
.cfg-permisos-hint--inactive { color: #94a3b8; }

/* Ícono de módulo en el árbol */
.cfg-permisos-modulo-icon { font-size: 13px; }

/* Color de ícono por módulo */
.cfg-permisos-modulo-icon--dashboard     { color: #6366f1; }
.cfg-permisos-modulo-icon--alquiler      { color: #0a2463; }
.cfg-permisos-modulo-icon--directorio    { color: #10b981; }
.cfg-permisos-modulo-icon--configuracion { color: #f59e0b; }

/* Checkboxes con cursor pointer */
.cfg-permiso-modulo-all-cb { cursor: pointer; }
.cfg-permiso-cb-input      { cursor: pointer; }

/* Mensaje de condominios vacíos */
.cfg-condos-empty {
    text-align: center;
    padding: 8px;
}