/* CSS PERSONALIZADO GENERADO AUTOMÁTICAMENTE - test */
:root {
    --color-primario: #333333;
    --color-secundario: #6c757d;
    --fuente-principal: 'Roboto', sans-serif;
    --tamano-fuente: 16px;
}

body { font-size: var(--tamano-fuente); }

/* El bloque del logo (arriba a la izquierda) traia un rojo fijo #b11a02 en
   main.css, dentro de un @media (min-width:768px) que le da mas peso: de ahi
   el !important y que se repita la regla dentro del mismo media query. */
.app-header { background-color: #333333 !important; }
.app-header__logo { background-color: #333333 !important; }
@media (min-width: 768px) {
    .app-header__logo { background-color: #333333 !important; }
}

/* Cabeceras de los modales de alta y edicion: mismo rojo fijo en style.css. */
.headerRegister,
.headerUpdate {
    background-color: #333333 !important;
    color: #fff !important;
}

/* El pie de pagina traia #333 fijo en style.css y quedaba de un gris distinto
   al de la barra superior. Son las dos franjas que enmarcan la pantalla. */
footer { background-color: #333333 !important; }

/* Acciones secundarias de los modales: contorno, pero con el color del gym. */
.btn-outline-primary {
    color: #333333 !important;
    border-color: #333333 !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
}

.bg-primary, .btn-primary, .navbar-brand, .sidebar-brand {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.text-primary, .nav-link.active { color: var(--color-primario) !important; }

.bg-secondary, .btn-secondary {
    background-color: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
}

body, h1, h2, h3, h4, h5, h6, p, div, span, a,
.card-title, .form-label, .form-control, .btn,
.table th, .table td, .nav-link, .dropdown-item, .modal-title {
    font-family: var(--fuente-principal) !important;
}

.logo-empresa {
    font-family: var(--fuente-principal) !important;
    color: var(--color-primario) !important;
}

/* Botones hover */
.btn-primary:hover {
    background-color: #1f1f1f !important;
    border-color: #1f1f1f !important;
}

/* Pantalla de Login: las dos mitades.
   main.css trae la franja superior fija en #e74a31, y ese archivo es
   COMPARTIDO por todos los gimnasios, asi que ahi no se puede personalizar
   sin cambiarselo a todos. Aqui, en el CSS por gimnasio, cada uno pone los
   suyos. */
/* Boton Entrar del login: traia el mismo rojo fijo (#e74a31) en style.css. */
.btn-entrar { background-color: #333333 !important; border-color: #333333 !important; }

.material-half-bg { background-color: #ffffff !important; }
.material-half-bg .cover { background-color: #333333 !important; }

/* ===== NAV-TABS: nunca heredar el color primario como fondo ===== */
.nav-tabs .nav-link { background-color: transparent !important; color: #555 !important; }
.nav-tabs .nav-link:hover { background-color: #e9ecef !important; color: #333 !important; }
.nav-tabs .nav-link.active { background-color: #fff !important; color: var(--color-primario) !important; border-bottom-color: #fff !important; }

/* ===== Acciones de la tabla de precios de membresía ===== */
.acciones-precio { display: flex; gap: 8px; align-items: center; }
.acciones-precio .btn { border-radius: 4px; }