/* ═══════════════════════════════════════════════════════════════════════════════
   6. FORMULARIOS
   Estilos para inputs, selects, textareas y botones
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   6.1 Form Groups
   ───────────────────────────────────────────────────────────────────────────── */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #e9edef;
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: #111b21;
    border: 1px solid #313d45;
    border-radius: 6px;
    padding: 10px 12px;
    color: #e9edef;
    font-size: 14px;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #00a884;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group small {
    color: #aebac1;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.2 Botones
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: #00a884;
    color: white;
}

.btn-primary:hover {
    background: #008f72;
}

.btn-secondary {
    background: #313d45;
    color: #e9edef;
}

.btn-secondary:hover {
    background: #3b4a54;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.3 Tabs (Pestañas)
   Para navegación dentro de modales y secciones
   ───────────────────────────────────────────────────────────────────────────── */

.massive-tabs {
    display: flex;
    border-bottom: 1px solid #313d45;
    margin-bottom: 20px;
}

.tab-btn {
    background: none;
    border: none;
    color: #aebac1;
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-btn.active {
    color: #00a884;
    border-bottom-color: #00a884;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}