/* ─────────────────────────────────────────────────────────────
   VICOSG — COMPONENTES REUTILIZABLES
───────────────────────────────────────────────────────────── */

/* ── BOTONES ─────────────────────────────────────────────── */
.btn {
    font-family:     'Oswald', sans-serif;
    font-weight:     600;
    font-size:       14px;
    letter-spacing:  2px;
    text-transform:  uppercase;
    border:          none;
    border-radius:   var(--radius);
    padding:         16px 24px;
    cursor:          pointer;
    transition:      var(--transition);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    text-decoration: none;
    width:           100%;
    -webkit-appearance: none;
    appearance:      none;
}
.btn-primary {
    background:  var(--accent);
    color:       var(--accent-text);
    box-shadow:  0 4px 16px rgba(200,240,0,0.25);
}
.btn-primary:hover {
    background: var(--accent-dark);
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(200,240,0,0.35);
    text-decoration: none;
}
.btn-secondary {
    background: transparent;
    color:      var(--text-primary);
    border:     1.5px solid var(--border);
}
.btn-secondary:hover {
    border-color: var(--accent);
    text-decoration: none;
}
.btn-orange {
    background: var(--orange);
    color:      #FFFFFF;
    box-shadow: 0 4px 16px rgba(255,92,26,0.3);
}
.btn-orange:hover { opacity: .9; text-decoration: none; }
.btn-danger  { background: var(--error); color: #FFFFFF; }
.btn-ghost   { background: transparent; color: var(--text-secondary); }
.btn-sm      { padding: 10px 16px; font-size: 12px; }
.btn-auto    { width: auto; }
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Spinner dentro de botón */
.btn .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       20px;
    box-shadow:    var(--shadow-card);
}
.card + .card { margin-top: 12px; }

.card-header {
    font-family:     'Oswald', sans-serif;
    font-weight:     600;
    font-size:       16px;
    color:           var(--text-primary);
    margin-bottom:   16px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.card-header .label-mono {
    font-family: 'DM Mono', monospace;
    font-size:   10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── INPUTS ──────────────────────────────────────────────── */
.input-group { margin-bottom: 16px; }
.input-group label {
    display:        block;
    font-family:    'DM Mono', monospace;
    font-size:      11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  6px;
}
.input-field {
    width:        100%;
    background:   var(--bg-input);
    border:       1.5px solid var(--border);
    border-radius:var(--radius-sm);
    padding:      14px 16px;
    font-family:  'DM Sans', sans-serif;
    font-size:    15px;
    color:        var(--text-primary);
    transition:   var(--transition);
    -webkit-appearance: none;
    appearance:   none;
}
.input-field:focus {
    outline:      none;
    border-color: var(--border-active);
    background:   var(--bg-card);
}
.input-field::placeholder { color: var(--text-muted); }

select.input-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Input numérico para series */
.input-number {
    width:        80px;
    height:       52px;
    text-align:   center;
    font-family:  'DM Mono', monospace;
    font-size:    20px;
    font-weight:  700;
    border-radius:var(--radius-sm);
    background:   var(--bg-input);
    border:       1.5px solid var(--border);
    color:        var(--text-primary);
    -webkit-appearance: none;
    appearance:   none;
}
.input-number:focus { border-color: var(--accent); outline: none; }

/* ── OPCIONES SELECCIONABLES ─────────────────────────────── */
.option-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
    margin-bottom:         16px;
}
.option-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.option-card {
    background:    var(--bg-input);
    border:        1.5px solid var(--border);
    border-radius: var(--radius);
    padding:       14px 10px;
    cursor:        pointer;
    text-align:    center;
    transition:    var(--transition);
    font-size:     14px;
    color:         var(--text-secondary);
    user-select:   none;
    position:      relative;
}
.option-card:hover {
    border-color: var(--accent);
    color:        var(--text-primary);
}
.option-card.selected {
    border-color: var(--accent);
    background:   rgba(200,240,0,0.08);
    color:        var(--text-primary);
    font-weight:  500;
}
.option-card .icon { font-size: 24px; display: block; margin-bottom: 6px; }

/* ── PROGRESS BAR ────────────────────────────────────────── */
.progress-bar {
    height:       8px;
    background:   var(--border);
    border-radius:100px;
    overflow:     hidden;
}
.progress-fill {
    height:       100%;
    background:   var(--accent);
    border-radius:100px;
    transition:   width 0.6s ease;
}
.progress-fill.orange { background: var(--orange); }
.progress-fill.green  { background: var(--success); }

/* Paso a paso (onboarding) */
.step-dots {
    display:         flex;
    gap:             8px;
    justify-content: center;
    margin-bottom:   32px;
}
.step-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--border);
    transition:    var(--transition);
}
.step-dot.active  { background: var(--accent); width: 24px; border-radius: 4px; }
.step-dot.done    { background: var(--success); }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
    font-family:    'DM Mono', monospace;
    font-size:      10px;
    letter-spacing: 1px;
    padding:        4px 10px;
    border-radius:  100px;
    text-transform: uppercase;
    font-weight:    500;
    display:        inline-block;
}
.badge-green  { background: rgba(34,197,94,0.12);  color: #16A34A; }
.badge-orange { background: rgba(255,92,26,0.12);  color: var(--orange); }
.badge-lime   { background: rgba(200,240,0,0.15);  color: #5F7A00; }
.badge-red    { background: rgba(239,68,68,0.12);  color: var(--error); }
.badge-gray   { background: var(--bg-secondary);   color: var(--text-muted); }

[data-theme="dark"] .badge-lime { color: #AACC00; }

/* ── TOAST NOTIFICATIONS ─────────────────────────────────── */
.toast {
    position:   fixed;
    top:        20px;
    left:       50%;
    transform:  translateX(-50%);
    background: var(--bg-card);
    border:     1px solid var(--border);
    border-radius: var(--radius);
    padding:    12px 20px;
    box-shadow: var(--shadow);
    z-index:    9999;
    font-size:  14px;
    display:    flex;
    align-items:center;
    gap:        8px;
    animation:  slideDown 0.3s ease;
    white-space:nowrap;
    max-width:  90vw;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--error); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.pr      { border-left: 4px solid var(--accent); }

@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── RECOVERY SCORE ──────────────────────────────────────── */
.recovery-score {
    width:        80px;
    height:       80px;
    border-radius:50%;
    display:      flex;
    align-items:  center;
    justify-content:center;
    font-family:  'Bebas Neue', sans-serif;
    font-size:    28px;
    border:       3px solid;
    flex-shrink:  0;
}
.recovery-high { border-color: var(--success); color: var(--success); }
.recovery-mid  { border-color: var(--warning); color: var(--warning); }
.recovery-low  { border-color: var(--error);   color: var(--error); }

/* ── ESTRELLAS DE RATING ─────────────────────────────────── */
.star-row {
    display: flex;
    gap: 8px;
}
.star {
    font-size:  32px;
    cursor:     pointer;
    transition: transform 0.15s ease;
    filter:     grayscale(1) opacity(.4);
    line-height:1;
}
.star.active  { filter: none; }
.star:hover,
.star.hover   { transform: scale(1.15); filter: none; }

/* ── NAVBAR INFERIOR ─────────────────────────────────────── */
.navbar {
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    height:          var(--nav-height);
    background:      var(--bg-card);
    border-top:      1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-around;
    z-index:         100;
    padding-bottom:  env(safe-area-inset-bottom);
}
.nav-tab {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             3px;
    cursor:          pointer;
    padding:         8px 16px;
    border-radius:   var(--radius-sm);
    transition:      var(--transition);
    position:        relative;
    text-decoration: none;
    flex:            1;
}
.nav-tab .icon  { font-size: 22px; line-height: 1; }
.nav-tab .label {
    font-family:    'DM Mono', monospace;
    font-size:      9px;
    letter-spacing: 0.5px;
    color:          var(--text-muted);
    transition:     color .2s;
}
.nav-tab.active .label { color: var(--accent); }
.nav-tab.active .icon  { transform: scale(1.1); }
.nav-badge {
    position:     absolute;
    top:          4px;
    right:        10px;
    width:        8px;
    height:       8px;
    background:   var(--orange);
    border-radius:50%;
    border:       2px solid var(--bg-card);
}

/* ── SERIE ROW (entrenamiento) ───────────────────────────── */
.serie-row {
    display:     grid;
    grid-template-columns: 28px 1fr 1fr 44px;
    align-items: center;
    gap:         8px;
    padding:     10px 0;
    border-bottom: 1px solid var(--border);
}
.serie-row:last-child { border-bottom: none; }

.serie-num {
    font-family: 'DM Mono', monospace;
    font-size:   12px;
    color:       var(--text-muted);
    text-align:  center;
}
.serie-check {
    width:        40px;
    height:       40px;
    border-radius:50%;
    border:       2px solid var(--border);
    background:   transparent;
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content:center;
    font-size:    18px;
    transition:   var(--transition);
    margin:       0 auto;
    -webkit-appearance: none;
    appearance:   none;
}
.serie-check.done {
    background:   var(--accent);
    border-color: var(--accent);
    color:        var(--accent-text);
}

/* ── MACRO BARS ──────────────────────────────────────────── */
.macro-bar-item     { margin-bottom: 12px; }
.macro-bar-header   {
    display:        flex;
    justify-content:space-between;
    font-size:      12px;
    margin-bottom:  5px;
    color:          var(--text-secondary);
}
.macro-bar-header .macro-name {
    font-family:    'DM Mono', monospace;
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:    500;
}
.macro-bar-prot .progress-fill { background: #3B82F6; }
.macro-bar-carb .progress-fill { background: var(--warning); }
.macro-bar-gras .progress-fill { background: var(--orange); }

/* ── AVATAR ──────────────────────────────────────────────── */
.avatar {
    border-radius:50%;
    object-fit:   cover;
    background:   var(--bg-secondary);
    flex-shrink:  0;
}
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }

/* Avatar placeholder con inicial */
.avatar-init {
    border-radius:  50%;
    background:     var(--accent);
    color:          var(--accent-text);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-family:    'Oswald', sans-serif;
    font-weight:    600;
    flex-shrink:    0;
}
.avatar-init.avatar-sm { width: 32px; height: 32px; font-size: 14px; }
.avatar-init.avatar-md { width: 48px; height: 48px; font-size: 18px; }

/* ── HEADER DE PÁGINA ────────────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 20px 12px;
    position:        sticky;
    top:             0;
    background:      var(--bg-primary);
    z-index:         50;
    border-bottom:   1px solid var(--border);
}
.page-header h2 { font-size: 20px; margin: 0; }

/* ── BACK BUTTON ─────────────────────────────────────────── */
.btn-back {
    display:     flex;
    align-items: center;
    gap:         6px;
    color:       var(--text-secondary);
    font-size:   14px;
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     0;
    font-family: 'DM Sans', sans-serif;
}
.btn-back:hover { color: var(--text-primary); }

/* ── CRONÓMETRO ──────────────────────────────────────────── */
.timer-display {
    font-family: 'DM Mono', monospace;
    font-size:   32px;
    font-weight: 700;
    color:       var(--accent);
    letter-spacing: 3px;
}

/* Banner de descanso */
.rest-banner {
    position:     fixed;
    top:          0;
    left:         0;
    right:        0;
    background:   var(--bg-card);
    border-bottom:2px solid var(--accent);
    padding:      12px 20px;
    z-index:      200;
    display:      flex;
    align-items:  center;
    justify-content:space-between;
    animation:    slideDown .3s ease;
    box-shadow:   var(--shadow);
}
.rest-banner .rest-time {
    font-family: 'Bebas Neue', sans-serif;
    font-size:   36px;
    color:       var(--accent);
    letter-spacing: 2px;
}

/* ── PR CELEBRATION ──────────────────────────────────────── */
.pr-overlay {
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,0.85);
    z-index:        1000;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-direction: column;
    gap:            16px;
    animation:      fadeIn .3s ease;
}
.pr-overlay .pr-icon  { font-size: 72px; animation: bounce .6s ease infinite alternate; }
.pr-overlay h1 { color: var(--accent); text-align: center; font-size: 48px; }
.pr-overlay p  { color: #FFF; font-size: 20px; text-align: center; }

@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── TABS ────────────────────────────────────────────────── */
.tabs {
    display:        flex;
    gap:            4px;
    background:     var(--bg-secondary);
    border-radius:  var(--radius);
    padding:        4px;
    margin-bottom:  20px;
}
.tab-btn {
    flex:           1;
    padding:        9px 8px;
    border:         none;
    border-radius:  var(--radius-sm);
    background:     transparent;
    color:          var(--text-muted);
    font-family:    'DM Mono', monospace;
    font-size:      11px;
    letter-spacing: .5px;
    cursor:         pointer;
    transition:     var(--transition);
    text-transform: uppercase;
}
.tab-btn.active {
    background: var(--bg-card);
    color:      var(--text-primary);
    box-shadow: var(--shadow);
    font-weight:600;
}

/* ── CHAT ────────────────────────────────────────────────── */
.chat-wrap {
    display:        flex;
    flex-direction: column;
    height:         calc(100vh - 130px);
    overflow-y:     auto;
    padding:        16px;
    gap:            12px;
}
.bubble {
    max-width:     80%;
    padding:       12px 16px;
    border-radius: 18px;
    font-size:     15px;
    line-height:   1.5;
}
.bubble-user {
    background:    rgba(200,240,0,0.12);
    border:        1px solid rgba(200,240,0,0.2);
    border-bottom-right-radius: 4px;
    align-self:    flex-end;
    color:         var(--text-primary);
}
.bubble-ai {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-bottom-left-radius: 4px;
    align-self:    flex-start;
}
.chat-input-row {
    position:    fixed;
    bottom:      var(--nav-height);
    left:        0;
    right:       0;
    background:  var(--bg-primary);
    border-top:  1px solid var(--border);
    padding:     12px 16px;
    display:     flex;
    gap:         10px;
    align-items: center;
}
.chat-input-row .input-field {
    flex: 1;
    padding: 12px 16px;
    border-radius: 24px;
}
.chat-send {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    var(--accent);
    color:         var(--accent-text);
    border:        none;
    font-size:     20px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content:center;
    flex-shrink:   0;
    transition:    var(--transition);
}
.chat-send:hover { background: var(--accent-dark); }

/* ── LOADER ──────────────────────────────────────────────── */
.loader-screen {
    position:       fixed;
    inset:          0;
    background:     var(--bg-primary);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            20px;
    z-index:        500;
}
.loader-ring {
    width:        64px;
    height:       64px;
    border:       4px solid var(--border);
    border-top:   4px solid var(--accent);
    border-radius:50%;
    animation:    spin .8s linear infinite;
}
.loader-screen p {
    color:        var(--text-secondary);
    font-size:    16px;
    text-align:   center;
    max-width:    240px;
}

/* ── GRID COMUNIDAD ──────────────────────────────────────── */
.feed-post {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       16px;
    margin-bottom: 12px;
}
.post-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom:12px;
}
.post-meta { flex: 1; }
.post-meta .name {
    font-weight: 500;
    font-size:   15px;
}
.post-meta .time {
    font-family: 'DM Mono', monospace;
    font-size:   11px;
    color:       var(--text-muted);
}
.post-actions {
    display:    flex;
    gap:        16px;
    margin-top: 12px;
    padding-top:12px;
    border-top: 1px solid var(--border);
}
.post-action-btn {
    display:    flex;
    align-items:center;
    gap:        6px;
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  14px;
    color:      var(--text-muted);
    font-family:'DM Sans', sans-serif;
    transition: var(--transition);
    padding:    0;
}
.post-action-btn:hover { color: var(--text-primary); }
.post-action-btn.liked { color: #EF4444; }

/* ── ADMIN TABLE ─────────────────────────────────────────── */
.admin-table {
    width:          100%;
    border-collapse:collapse;
    font-size:      14px;
}
.admin-table th {
    font-family:    'DM Mono', monospace;
    font-size:      11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--text-muted);
    padding:        10px 12px;
    border-bottom:  2px solid var(--border);
    text-align:     left;
    white-space:    nowrap;
}
.admin-table td {
    padding:       12px;
    border-bottom: 1px solid var(--border);
    vertical-align:middle;
}
.admin-table tr:hover td { background: var(--bg-secondary); }

/* ── METRIC CARD (admin) ─────────────────────────────────── */
.metric-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       20px;
    text-align:    center;
}
.metric-card .value {
    font-family: 'Bebas Neue', sans-serif;
    font-size:   40px;
    color:       var(--accent);
    line-height: 1;
}
.metric-card .label {
    font-family: 'DM Mono', monospace;
    font-size:   11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:       var(--text-muted);
    margin-top:  6px;
}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-backdrop {
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,0.6);
    z-index:        300;
    display:        flex;
    align-items:    flex-end;
    justify-content:center;
    animation:      fadeIn .2s ease;
}
.modal-sheet {
    background:    var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding:       24px 20px;
    width:         100%;
    max-width:     480px;
    max-height:    90vh;
    overflow-y:    auto;
    animation:     slideUp .3s ease;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.modal-handle {
    width:         40px;
    height:        4px;
    background:    var(--border);
    border-radius: 2px;
    margin:        0 auto 20px;
}