/*
 * CoreGym Components.
 * Un solo patrón visual por componente (botones, tablas, badges, modales,
 * paginación) para todo el producto. Se apoya en tokens.css y sobrescribe
 * las variables propias de Bootstrap 5.3 por componente (--bs-btn-*, etc.)
 * en vez de reescribir el marcado de cada vista.
 */

/* ===== Botones ===== */

.btn {
    border-radius: var(--cg-radius-sm);
    font-weight: 600;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cg-primary);
    --bs-btn-border-color: var(--cg-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cg-primary-hover);
    --bs-btn-hover-border-color: var(--cg-primary-hover);
    --bs-btn-active-bg: var(--cg-brand-700);
    --bs-btn-active-border-color: var(--cg-brand-700);
    --bs-btn-disabled-bg: var(--cg-brand-300);
    --bs-btn-disabled-border-color: var(--cg-brand-300);
    --bs-btn-focus-shadow-rgb: 50, 107, 168;
}

.btn-outline-primary {
    --bs-btn-color: var(--cg-primary);
    --bs-btn-border-color: var(--cg-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cg-primary);
    --bs-btn-hover-border-color: var(--cg-primary);
    --bs-btn-active-bg: var(--cg-primary);
    --bs-btn-active-border-color: var(--cg-primary);
    --bs-btn-disabled-color: var(--cg-primary);
    --bs-btn-focus-shadow-rgb: 50, 107, 168;
}

/* Botón secundario: acción de apoyo (ej. "Buscar"), no debe leerse como
   deshabilitado ni competir con el primario. */
.btn-secondary {
    --bs-btn-color: var(--cg-text);
    --bs-btn-bg: var(--cg-surface);
    --bs-btn-border-color: var(--cg-border);
    --bs-btn-hover-color: var(--cg-text);
    --bs-btn-hover-bg: var(--cg-surface-muted);
    --bs-btn-hover-border-color: var(--cg-gray-300);
    --bs-btn-active-color: var(--cg-text);
    --bs-btn-active-bg: var(--cg-gray-100);
    --bs-btn-active-border-color: var(--cg-gray-300);
    --bs-btn-disabled-color: var(--cg-text-muted);
    --bs-btn-disabled-bg: var(--cg-surface);
    --bs-btn-disabled-border-color: var(--cg-border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--cg-gray-600);
    --bs-btn-border-color: var(--cg-gray-300);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cg-gray-600);
    --bs-btn-hover-border-color: var(--cg-gray-600);
    --bs-btn-active-bg: var(--cg-gray-700);
    --bs-btn-active-border-color: var(--cg-gray-700);
}

/* ===== Tablas ===== */

.table thead th {
    background: var(--cg-surface-muted);
    color: var(--cg-text);
    font-weight: 600;
    font-size: var(--cg-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cg-border);
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: var(--cg-surface-muted);
}

/* ===== Botones de acción de tabla =====
   Un tono pastel por tipo de acción: el color identifica la operación aunque
   el icono se lea rápido de reojo, y evita la fila de contornos de colores
   saturados que competían con el contenido.

   El aspecto se comparte entre el componente nuevo (.cg-action-btn) y un
   respaldo para las pantallas cuyo JS todavía emite .btn-outline-* dentro de
   una celda, de modo que ninguna tabla quede a medio migrar. El respaldo está
   acotado a celdas de tabla para no tocar botones de formularios ni toolbars. */

.cg-action-btn,
:is(.table td, .table th) .btn-sm:is(.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--cg-space-2);
    border: 1px solid var(--cg-action-border, var(--cg-action-neutral-border));
    border-radius: var(--cg-radius-sm);
    background-color: var(--cg-action-bg, var(--cg-action-neutral-bg));
    color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    font-size: var(--cg-font-size-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--cg-transition-fast), border-color var(--cg-transition-fast), color var(--cg-transition-fast);
    /* Alinea también las variables de Bootstrap por si el botón conserva la
       clase .btn (estados :active y :disabled los pinta Bootstrap). */
    --bs-btn-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-bg: var(--cg-action-bg, var(--cg-action-neutral-bg));
    --bs-btn-border-color: var(--cg-action-border, var(--cg-action-neutral-border));
    --bs-btn-hover-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-hover-bg: var(--cg-action-hover, var(--cg-action-neutral-hover));
    --bs-btn-hover-border-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-active-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-active-bg: var(--cg-action-hover, var(--cg-action-neutral-hover));
    --bs-btn-active-border-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-disabled-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    --bs-btn-disabled-bg: var(--cg-action-bg, var(--cg-action-neutral-bg));
    --bs-btn-disabled-border-color: var(--cg-action-border, var(--cg-action-neutral-border));
}

.cg-action-btn:hover,
.cg-action-btn:focus-visible,
:is(.table td, .table th) .btn-sm:is(.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning):hover,
:is(.table td, .table th) .btn-sm:is(.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning):focus-visible {
    background-color: var(--cg-action-hover, var(--cg-action-neutral-hover));
    border-color: var(--cg-action-fg, var(--cg-action-neutral-fg));
    color: var(--cg-action-fg, var(--cg-action-neutral-fg));
}

.cg-action-btn:disabled,
.cg-action-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.cg-action-btn > .bi,
:is(.table td, .table th) .btn-sm:is(.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning) > .bi {
    font-size: 1rem;
    line-height: 1;
}

/* Familias de color: los modificadores explícitos y, con la misma paleta, el
   mapeo de respaldo desde las clases de Bootstrap que siguen en el JS. */

.cg-action-btn--view,
:is(.table td, .table th) .btn-sm.btn-outline-info {
    --cg-action-bg: var(--cg-action-view-bg);
    --cg-action-border: var(--cg-action-view-border);
    --cg-action-fg: var(--cg-action-view-fg);
    --cg-action-hover: var(--cg-action-view-hover);
}

.cg-action-btn--edit,
:is(.table td, .table th) .btn-sm.btn-outline-primary {
    --cg-action-bg: var(--cg-action-edit-bg);
    --cg-action-border: var(--cg-action-edit-border);
    --cg-action-fg: var(--cg-action-edit-fg);
    --cg-action-hover: var(--cg-action-edit-hover);
}

.cg-action-btn--key,
:is(.table td, .table th) .btn-sm.btn-outline-warning {
    --cg-action-bg: var(--cg-action-key-bg);
    --cg-action-border: var(--cg-action-key-border);
    --cg-action-fg: var(--cg-action-key-fg);
    --cg-action-hover: var(--cg-action-key-hover);
}

.cg-action-btn--danger,
:is(.table td, .table th) .btn-sm.btn-outline-danger {
    --cg-action-bg: var(--cg-action-danger-bg);
    --cg-action-border: var(--cg-action-danger-border);
    --cg-action-fg: var(--cg-action-danger-fg);
    --cg-action-hover: var(--cg-action-danger-hover);
}

.cg-action-btn--success,
:is(.table td, .table th) .btn-sm.btn-outline-success {
    --cg-action-bg: var(--cg-action-success-bg);
    --cg-action-border: var(--cg-action-success-border);
    --cg-action-fg: var(--cg-action-success-fg);
    --cg-action-hover: var(--cg-action-success-hover);
}

.cg-action-btn--neutral {
    --cg-action-bg: var(--cg-action-neutral-bg);
    --cg-action-border: var(--cg-action-neutral-border);
    --cg-action-fg: var(--cg-action-neutral-fg);
    --cg-action-hover: var(--cg-action-neutral-hover);
}

/* ===== Badges de estado =====
   Una sola píldora pastel para todos los estados del producto. Las clases
   heredadas (reportes y suscripción) comparten la misma base en vez de
   repetir el diseño; el color lo aportan los modificadores o, en el caso de
   la suscripción, las utilidades "subtle" de Bootstrap que ya trae la vista,
   por eso la base no fija color de fondo ni de texto. */

.cg-estado-badge,
.reportes-estado-badge,
.subscription-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    border-radius: var(--cg-radius-pill);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.25;
    /* Las mayúsculas forzadas hacían ilegibles los estados largos. */
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

/* Las dos tablas heredadas alinean la columna de estado por ancho fijo. */
.reportes-estado-badge,
.subscription-status-badge {
    min-width: 96px;
}

.cg-estado-badge--activo,
.reportes-estado--pagado {
    background-color: var(--cg-success-soft);
    color: var(--cg-success-text);
}

.cg-estado-badge--pendiente,
.reportes-estado--pendiente {
    background-color: var(--cg-warning-soft);
    color: var(--cg-warning-text);
}

.cg-estado-badge--vencido,
.reportes-estado--vencida {
    background-color: var(--cg-danger-soft);
    color: var(--cg-danger-text);
}

.cg-estado-badge--inactivo {
    background-color: var(--cg-gray-100);
    color: var(--cg-gray-700);
}

.cg-estado-badge--info {
    background-color: var(--cg-info-soft);
    color: var(--cg-info-text);
}

/* ===== Avatar de iniciales =====
   Cuando no hay foto cargada, una imagen genérica repetida no ayuda a distinguir
   una fila de otra; las iniciales sí. El color es siempre el de marca: la identidad
   visual la aporta la letra, no un color por persona. */

.cg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--cg-radius-pill);
    background-color: var(--cg-brand-50);
    color: var(--cg-brand-700);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.02em;
    user-select: none;
}

.cg-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.cg-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
}

/* ===== Tarjeta de KPI =====
   Indicador con icono a la izquierda, valor grande y una línea de contexto.
   Se diferencia de .indicator-card (icono arriba, centrado) en que está pensada
   para filas de métricas dentro de una pantalla de trabajo, no para el dashboard. */

.cg-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--cg-space-3);
    height: 100%;
    padding: var(--cg-space-4);
    background-color: #fff;
    border: 1px solid var(--cg-gray-200);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-sm);
}

.cg-kpi-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--cg-radius-md);
    font-size: 1.25rem;
    background-color: var(--cg-brand-50);
    color: var(--cg-brand-700);
}

.cg-kpi-card__icon--success {
    background-color: var(--cg-success-soft);
    color: var(--cg-success-text);
}

.cg-kpi-card__icon--warning {
    background-color: var(--cg-warning-soft);
    color: var(--cg-warning-text);
}

.cg-kpi-card__icon--danger {
    background-color: var(--cg-danger-soft);
    color: var(--cg-danger-text);
}

.cg-kpi-card__icon--info {
    background-color: var(--cg-info-soft);
    color: var(--cg-info-text);
}

.cg-kpi-card__body {
    min-width: 0;
}

.cg-kpi-card__label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cg-gray-600);
}

.cg-kpi-card__info {
    margin-left: var(--cg-space-1);
    font-size: 0.75rem;
    color: var(--cg-gray-400);
    cursor: help;
}

.cg-kpi-card__value {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cg-gray-900);
}

.cg-kpi-card__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cg-gray-500);
}

.cg-kpi-card__hint--positive {
    color: var(--cg-success-text);
}

/* ===== Modales ===== */

.modal-content {
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-lg);
    border: none;
}

/* Header azul suave: da identidad de marca al modal sin el bloque sólido
   anterior, que obligaba a texto e iconos en blanco y competía con el
   contenido del formulario. */
.modal-header {
    background-color: var(--cg-modal-header-bg);
    color: var(--cg-modal-header-text);
    border-bottom: 1px solid var(--cg-modal-header-border);
}

.modal-header .modal-title {
    color: inherit;
    font-weight: 600;
}

/* La variante blanca del botón de cierre asumía un header con color de marca;
   sobre el azul claro el icono blanco desaparece, así que vuelve al oscuro
   por defecto de Bootstrap. */
.modal-header .btn-close-white {
    filter: none;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 3rem);
    }
}

.text-center .form-label {
    display: block;
    text-align: start;
}

/* ===== Pestañas =====
   El portal mezclaba nav-tabs (Empresa, Facturación) con nav-pills
   (Inventario, Centro de Ayuda). Se unifican en un único patrón de píldoras
   para que la navegación secundaria se lea igual en todas las pantallas, sin
   la caja con borde del nav-tabs clásico. Funciona con data-bs-toggle="tab"
   y con "pill" porque el estilo depende solo de .nav-tabs/.nav-pills. */

.nav-tabs,
.nav-pills {
    --bs-nav-tabs-border-width: 0;
    gap: var(--cg-space-1);
    border-bottom: none;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    border: none;
    border-radius: var(--cg-radius-pill);
    padding: 0.5rem 1rem;
    color: var(--cg-text-muted);
    font-weight: 500;
    transition: background-color var(--cg-transition-fast), color var(--cg-transition-fast);
}

.nav-tabs .nav-link:hover:not(.active):not(.disabled),
.nav-pills .nav-link:hover:not(.active):not(.disabled) {
    background-color: var(--cg-gray-100);
    color: var(--cg-text);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--cg-brand-50);
    color: var(--cg-brand-700);
    font-weight: 600;
    border-color: transparent;
}

@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

/* ===== Componentes de página compartidos ===== */

.cg-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cg-space-4);
    margin-bottom: var(--cg-space-6);
}

.cg-page-header__title {
    margin: 0;
    font-size: var(--cg-font-size-2xl);
    font-weight: 700;
    color: var(--cg-text);
}

.cg-page-header__subtitle {
    margin: var(--cg-space-1) 0 0;
    color: var(--cg-text-muted);
    font-size: var(--cg-font-size-sm);
}

.cg-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cg-space-2);
    align-items: center;
}

.cg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--cg-space-3);
    padding: var(--cg-space-4);
    margin-bottom: var(--cg-space-4);
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
}

/* Variante para cuando el filtro vive dentro de la misma tarjeta que el
   encabezado (título + acción principal) en vez de ser su propia tarjeta:
   conserva el layout flex pero quita fondo/borde/sombra propios para no
   duplicar el recuadro ya provisto por la tarjeta que lo contiene. */
.cg-filter-bar--embedded {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Separador discreto sobre el filtro embebido, para distinguirlo del bloque
   de título/acción principal que queda arriba dentro de la misma tarjeta. */
.cg-filter-bar--divided {
    border-top: 1px solid var(--cg-border);
    padding-top: var(--cg-space-4);
}

.cg-filter-bar__field {
    flex: 1 1 200px;
    min-width: 0;
}

.cg-filter-bar__field label {
    display: block;
    margin-bottom: var(--cg-space-1);
    font-size: var(--cg-font-size-sm);
    font-weight: 600;
    color: var(--cg-text);
}

.cg-filter-bar__actions {
    display: flex;
    gap: var(--cg-space-2);
    flex: 0 0 auto;
}

.cg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--cg-space-8) var(--cg-space-4);
    color: var(--cg-text-muted);
}

.table-responsive {
    container-type: inline-size;
}

.table-responsive .cg-empty-state {
    position: sticky;
    left: 0;
    width: 100cqi;
}

.cg-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--cg-space-4);
    border-radius: 50%;
    background: var(--cg-surface-muted);
    color: var(--cg-text-muted);
    font-size: 1.5rem;
}

.cg-empty-state__title {
    margin: 0 0 var(--cg-space-1);
    font-size: var(--cg-font-size-lg);
    font-weight: 600;
    color: var(--cg-text);
}

.cg-empty-state__description {
    margin: 0;
    max-width: 420px;
    font-size: var(--cg-font-size-sm);
}

.cg-empty-state__action {
    margin-top: var(--cg-space-4);
}

/* Fila de estado (activo/inactivo) en formularios de modal: separa el
   interruptor del resto de los campos con un borde superior en vez de
   dejarlo pegado como un checkbox suelto. El grupo se alinea a la izquierda
   (antes iba con space-between, que empujaba el switch al extremo derecho del
   modal y lo desvinculaba visualmente de la palabra "Activo"). */
.cg-status-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cg-space-2);
    margin-top: var(--cg-space-2);
    padding-top: var(--cg-space-4);
    border-top: 1px solid var(--cg-border);
}

.cg-status-toggle__label {
    margin: 0;
    font-weight: 500;
    color: var(--cg-text);
    cursor: pointer;
}

/* El switch ya es el primer elemento del marcado, así que no necesita el
   padding-left que Bootstrap reserva para la etiqueta a su derecha. */
.cg-status-toggle .form-check {
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 0;
    min-height: 0;
}

.cg-status-toggle .form-check-input {
    float: none;
    margin: 0;
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}

/* ===== Modal de confirmación =====
   Se abre encima de otro modal (por ejemplo el formulario de sucursal) y sin
   diferencias visuales se leía como una continuación del mismo diálogo. Se
   distingue por tamaño (más angosto), color de header según el tipo de acción
   -nunca el azul del header de formulario- y profundidad. */

.cg-confirm__dialog {
    max-width: 420px;
}

.cg-confirm .modal-content {
    box-shadow: var(--cg-shadow-lg);
}

/* Bootstrap 5 no gestiona modales apilados: el segundo backdrop queda por
   debajo del modal de atrás (mismo z-index) y no lo oscurece. Se sube el
   backdrop apilado por encima del modal de fondo y el confirm por encima de
   ambos. Se usa el combinador general (~) y no el adyacente porque entre los
   dos backdrops puede quedar el nodo del propio modal en el body. */
.modal-backdrop ~ .modal-backdrop {
    --bs-backdrop-zindex: 1060;
    --bs-backdrop-opacity: 0.7;
}

.modal.cg-confirm {
    --bs-modal-zindex: 1065;
}

.cg-confirm__header {
    align-items: center;
    gap: var(--cg-space-3);
    background-color: var(--cg-gray-100);
    color: var(--cg-gray-800);
    border-bottom: 1px solid var(--cg-gray-200);
}

.cg-confirm__header .modal-title {
    color: inherit;
    font-weight: 600;
}

/* Icono en círculo del tono fuerte de la familia: da el "semáforo" de la
   acción antes de leer el texto. */
.cg-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cg-gray-500);
    color: var(--cg-surface);
    font-size: 1.05rem;
    line-height: 1;
}

.cg-confirm__header--success {
    background-color: var(--cg-success-soft);
    color: var(--cg-success-text);
    border-bottom-color: var(--cg-success-border);
}

.cg-confirm__header--success .cg-confirm__icon {
    background-color: var(--cg-success);
}

.cg-confirm__header--danger {
    background-color: var(--cg-danger-soft);
    color: var(--cg-danger-text);
    border-bottom-color: var(--cg-danger-border);
}

.cg-confirm__header--danger .cg-confirm__icon {
    background-color: var(--cg-danger);
}

.cg-confirm__header--warning {
    background-color: var(--cg-warning-soft);
    color: var(--cg-warning-text);
    border-bottom-color: var(--cg-warning-border);
}

.cg-confirm__header--warning .cg-confirm__icon {
    background-color: var(--cg-warning);
}

.cg-confirm__header--info {
    background-color: var(--cg-info-soft);
    color: var(--cg-info-text);
    border-bottom-color: var(--cg-info-border);
}

.cg-confirm__header--info .cg-confirm__icon {
    background-color: var(--cg-info);
}

.cg-confirm .modal-body {
    padding: var(--cg-space-5);
    color: var(--cg-text);
}

.cg-confirm .modal-footer {
    border-top: 1px solid var(--cg-border);
    gap: var(--cg-space-2);
}

.cg-confirm .modal-footer > .btn {
    min-width: 110px;
    margin: 0;
}