/**
 * Athena Gym Management System
 * Centralized CSS Variables
 *
 * This file contains all the color variables and common styles
 * used throughout the application to maintain consistency.
 */

:root {
    /* Primary Colors */
    --athena-primary: #435971;
    --athena-primary-light: #566a7f;
    --athena-primary-lighter: #6f7f93;
    --athena-primary-dark: #2c3e50;
    --athena-primary-darker: #1a252f;

    /* Background Colors (tema oscuro - alineado con modern-theme.css) */
    --athena-bg-primary: linear-gradient(135deg, #435971 0%, #566a7f 100%); /* slate de marca */
    --athena-bg-section: linear-gradient(135deg, #1c1e22 0%, #2a2d33 100%);
    --athena-bg-light: #1f2228;   /* superficie elevada sutil (antes #f8f9fa) */
    --athena-bg-white: #2a2e33;   /* superficie/panel (antes #ffffff) */
    --athena-bg-card: #1c1e22;    /* igual que --bs-card-bg (antes #2c3e50) */

    /* Text Colors (tema oscuro: texto claro sobre fondo oscuro) */
    --athena-text-primary: #ffffff;     /* antes #435971 */
    --athena-text-secondary: #b0b3b8;   /* antes #566a7f */
    --athena-text-muted: #6c757d;       /* gris neutro: sirve como texto tenue y fondo de badge */
    --athena-text-light: #9ca3af;       /* antes #858e96 */
    --athena-text-dark: #e5e7eb;        /* antes #495057 (renombrado de facto a "texto fuerte") */

    /* Status Colors */
    --athena-success: #28a745;
    --athena-success-light: rgba(34, 197, 94, 0.15);   /* tinte oscuro (antes #d4edda) */
    --athena-success-dark: #1a9a49;
    --athena-warning: #ffc107;
    --athena-warning-light: rgba(245, 158, 11, 0.15);  /* tinte oscuro (antes #fff3cd) */
    --athena-danger: #dc3545;
    --athena-danger-light: rgba(239, 68, 68, 0.15);    /* tinte oscuro (antes #f8d7da) */
    --athena-info: #17a2b8;
    --athena-info-light: rgba(59, 130, 246, 0.15);     /* tinte oscuro (antes #d1ecf1) */

    /* Border Colors (tema oscuro) */
    --athena-border: #2c2f35;         /* igual que --bs-border-color (antes #dee2e6) */
    --athena-border-light: #383c42;   /* divisor algo más visible (antes #e7eaf0) */
    --athena-border-primary: #435971; /* slate de marca */

    /* Shadow */
    --athena-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --athena-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --athena-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Overlays */
    --athena-overlay: rgba(67, 89, 113, 0.5); /* Primary color with transparency for modals/sheets */

    /* Border Radius */
    --athena-radius-sm: 4px;
    --athena-radius: 8px;
    --athena-radius-lg: 12px;

    /* Spacing */
    --athena-spacing-xs: 0.25rem;
    --athena-spacing-sm: 0.5rem;
    --athena-spacing: 1rem;
    --athena-spacing-lg: 1.5rem;
    --athena-spacing-xl: 2rem;
}

/* Common Styles */

/* Profile Header */
.athena-profile-header {
    background: var(--athena-bg-primary);
    border-radius: var(--athena-radius-lg);
    color: white !important;
    padding: var(--athena-spacing-xl);
    margin-bottom: var(--athena-spacing-xl);
    box-shadow: var(--athena-shadow-lg);
}

.athena-profile-header h1,
.athena-profile-header h2,
.athena-profile-header h3,
.athena-profile-header h4,
.athena-profile-header h5,
.athena-profile-header h6,
.athena-profile-header p,
.athena-profile-header span,
.athena-profile-header i {
    color: white !important;
}

/* Section Header */
.athena-section-header,
.section-header {
    background: var(--athena-bg-section);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
    margin: var(--athena-spacing-lg) 0 var(--athena-spacing) 0;
    border-left: 4px solid var(--athena-border-primary);
}

.athena-section-header h5,
.athena-section-header h6,
.section-header h5,
.section-header h6 {
    color: var(--athena-text-secondary) !important;
    margin-bottom: 0;
    font-weight: 600;
}

.athena-section-header i,
.section-header i {
    color: var(--athena-primary) !important;
}

/* Cards */
.athena-card {
    background: var(--athena-bg-card);
    border-radius: var(--athena-radius);
    box-shadow: var(--athena-shadow);
    border: 1px solid var(--athena-border);
    color: #e5e7eb;
}

.athena-card-header {
    background: var(--athena-bg-light);
    border-bottom: 1px solid var(--athena-border);
    padding: var(--athena-spacing);
    font-weight: 600;
}

/* Form Sections */
.athena-form-section {
    background: var(--athena-bg-light);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing-lg);
    margin-bottom: var(--athena-spacing-lg);
}

.athena-form-section h5 {
    color: var(--athena-text-dark);
    margin-bottom: var(--athena-spacing);
    font-weight: 600;
}

/* Help Text */
.athena-help-text,
.form-text.text-muted,
small.text-muted {
    font-size: 0.85rem;
    color: var(--athena-text-muted);
    margin-top: var(--athena-spacing-xs);
}

/* ============================================
   FORM INPUTS (reusable component)
   ============================================
   Mismo look cómodo y redondeado que las pantallas de login y
   venta rápida. Agrega la clase "athena-form" a un <form> y todos
   los .form-control / .form-select dentro adoptan este estilo:
   no hace falta tocar cada input por separado.
*/
.athena-form .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--athena-text-secondary);
    margin-bottom: 0.5rem;
}

.athena-form .form-control,
.athena-form .form-select {
    background-color: var(--athena-bg-white);
    border: 1.5px solid var(--athena-border);
    border-radius: var(--athena-radius-lg);
    min-height: 52px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--athena-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.athena-form .form-control:focus,
.athena-form .form-select:focus {
    background-color: var(--athena-bg-white);
    border-color: var(--athena-primary-lighter);
    box-shadow: 0 0 0 3px rgba(67, 89, 113, 0.35);
    color: var(--athena-text-primary);
}

/* Mantener espacio para la flecha del dropdown en los <select> */
.athena-form .form-select {
    padding-right: 2.5rem;
}

.athena-form .form-control::placeholder {
    color: var(--athena-text-muted);
}

.athena-form .form-control:disabled,
.athena-form .form-control[readonly] {
    background-color: var(--athena-bg-light);
    opacity: 0.7;
}

/* Status Badges */
.athena-badge-active,
.badge-active {
    background-color: var(--athena-success) !important;
}

.athena-badge-inactive,
.badge-inactive {
    background-color: var(--athena-text-muted) !important;
}

.athena-badge-expired,
.badge-expired {
    background-color: var(--athena-danger) !important;
}

.athena-badge-future,
.badge-future {
    background-color: var(--athena-info) !important;
}

.athena-badge-pending,
.badge-pending {
    background-color: var(--athena-warning) !important;
    color: #000 !important;
}

/* Table Styles */
.athena-table {
    background: var(--athena-bg-white);
}

.athena-table thead {
    background: var(--athena-bg-light);
}

.athena-table-hover tbody tr:hover {
    background-color: var(--athena-bg-light);
    cursor: pointer;
}

/* Filters */
.athena-filter-section {
    background: var(--athena-bg-light);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
    margin-bottom: var(--athena-spacing);
}

/* Stats Cards */
.athena-stats-card {
    border-left: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
}

.athena-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--athena-shadow-lg);
}

/* Alert Styles */
.athena-alert-info {
    background: var(--athena-info-light);
    border: 1px solid var(--athena-info);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
}

.athena-alert-warning {
    background: var(--athena-warning-light);
    border: 1px solid var(--athena-warning);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
}

.athena-alert-danger {
    background: var(--athena-danger-light);
    border: 1px solid var(--athena-danger);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
}

.athena-alert-success {
    background: var(--athena-success-light);
    border: 1px solid var(--athena-success);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
}

/* Calculation Boxes */
.athena-calculation-box {
    background: var(--athena-bg-light);
    border-radius: var(--athena-radius);
    padding: var(--athena-spacing);
}

.athena-total-display {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--athena-primary);
}

/* Preview Boxes */
.athena-salary-preview,
.athena-preview-box {
    background: var(--athena-info-light);
    border: 1px solid var(--athena-info);
    border-radius: var(--athena-radius-sm);
    padding: var(--athena-spacing);
    margin-top: var(--athena-spacing);
}

/* Buttons */
.btn-athena-primary {
    background-color: var(--athena-primary);
    border-color: var(--athena-primary);
    color: white;
}

.btn-athena-primary:hover {
    background-color: var(--athena-primary-dark);
    border-color: var(--athena-primary-dark);
    color: white;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767.98px) {
    .athena-profile-header {
        padding: var(--athena-spacing);
    }

    .athena-section-header {
        padding: var(--athena-spacing-sm) var(--athena-spacing);
    }

    .athena-form-section {
        padding: var(--athena-spacing);
    }
}

/* Nota: la app es de tema oscuro permanente (ver modern-theme.css).
   La paleta --athena-* de arriba ya está definida en valores oscuros en :root,
   por lo que no se usa un bloque @media (prefers-color-scheme: dark): así el
   resultado es idéntico sin importar el modo del sistema operativo. */

/* ========================================
   BUTTON PLACEMENT PATTERNS
   ======================================== */

/* Mobile Action Footer (Fixed) */
.mobile-action-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--athena-spacing, 1rem);
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color, var(--athena-border));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1020;
}

@media (min-width: 768px) {
    .mobile-action-footer {
        display: none;
    }
}

/* Desktop Form Footer */
.desktop-form-footer {
    display: none;
}

@media (min-width: 768px) {
    .desktop-form-footer {
        display: block;
        padding: var(--athena-spacing-lg);
        text-align: right;
        border-top: 1px solid var(--athena-border);
        background: var(--athena-primary-darker);
    }
}

/* Page Header Mobile */
.page-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--athena-spacing);
    border-bottom: 1px solid var(--athena-border);
    position: sticky;
    top: 0;
    background: var(--athena-primary-darker);
    z-index: 99;
    margin-bottom: var(--athena-spacing);
}

.page-header-mobile .page-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
    /* Header con fondo slate oscuro -> texto claro (tema oscuro Athena) */
    color: var(--bs-body-color, #ffffff);
}

@media (min-width: 768px) {
    .page-header-mobile {
        display: none;
    }
}

/* Floating Action Button */
.fab-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--athena-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    text-decoration: none;
}

.fab-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    color: white;
    background: var(--athena-primary-dark);
}

.fab-button:active {
    transform: scale(0.95);
}

/* Tier Badge
   Pill permanente con el plan actual, en la barra superior (dashboard/listados)
   y en la cabecera sticky de detalle. Enlaza a la pantalla de planes.
   Los colores por tier siguen a menu_tier_status: warning para Pro, info para
   Enterprise/Business. */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.tier-badge:hover,
.tier-badge:focus {
    transform: translateY(-1px);
    filter: brightness(1.12);
    text-decoration: none;
}

.tier-badge:active {
    transform: translateY(0);
}

.tier-badge__icon {
    font-size: 0.85rem;
    line-height: 1;
}

/* Tier Badge - colores por plan */
.tier-badge--free {
    color: var(--athena-text-secondary);
    border-color: var(--athena-border-light);
    background: transparent;
}

.tier-badge--pro {
    color: var(--athena-warning);
    border-color: var(--athena-warning);
    background: var(--athena-warning-light);
}

.tier-badge--business {
    color: var(--athena-info);
    border-color: var(--athena-info);
    background: var(--athena-info-light);
}

/* Tier Badge - barrido de brillo, solo en Free (único tier con venta pendiente).
   Finito a propósito: 3 pasadas al cargar y se detiene. Este pill vive en el
   chrome permanente, así que un bucle infinito acabaría siendo ruido que compite
   con la campana de notificaciones, que sí lleva información urgente.
   El sweep ocupa el primer tercio del ciclo; el resto es pausa.
   `forwards` deja la banda parada fuera del pill, no encima. */
.tier-badge--shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    animation: tier-badge-shine 3.2s ease-in-out 3 forwards;
}

@keyframes tier-badge-shine {
    0% {
        transform: translateX(-130%);
    }
    35%,
    100% {
        transform: translateX(320%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tier-badge {
        transition: none;
    }

    .tier-badge--shine::after {
        animation: none;
    }
}

@media (min-width: 768px) {
    .fab-button {
        display: none !important;
    }
}

/* Button Icon Helper */
.btn-icon {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--athena-text-dark);
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-icon:hover {
    background: var(--athena-bg-light);
    color: var(--athena-text-dark);
}

/* En los headers móviles (fondo slate oscuro) el icono debe ser claro */
.page-header-mobile .btn-icon,
.detail-page-header-mobile .btn-icon {
    color: var(--bs-body-color, #ffffff);
}

.page-header-mobile .btn-icon:hover,
.detail-page-header-mobile .btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #ffffff);
}

/* Text Button (for cancel actions) */
.btn-text {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.btn-text.text-danger:hover {
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--athena-radius-sm);
}

/* Add padding-bottom to prevent fixed footer from hiding content */
@media (max-width: 767.98px) {
    .layout-page {
        padding-bottom: 80px !important;
    }
}

/* Detail Page Header (for view/detail pages) */
.detail-page-header-mobile {
    display: flex;
    align-items: center;
    padding: var(--athena-spacing);
    border-bottom: 1px solid var(--athena-border);
    position: sticky;
    top: 0;
    background: var(--athena-primary-darker);
    z-index: 99;
    margin-bottom: var(--athena-spacing);
}

.detail-page-header-mobile .page-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
    /* Header con fondo slate oscuro -> texto claro (tema oscuro Athena) */
    color: var(--bs-body-color, #ffffff);
    padding: 0 var(--athena-spacing-sm);
}

@media (min-width: 768px) {
    .detail-page-header-mobile {
        display: none;
    }
}

/* ========================================
   GLOBAL: HIDE BREADCRUMBS
   ======================================== */
nav[aria-label="breadcrumb"],
.breadcrumb-wrapper {
    display: none !important;
}